# Install FlowConsent on Framer

On Framer, add the FlowConsent snippet in Project Settings → Custom Code at the start of the <head>, publish, and do not also enable the Framer Cookie Banner.

> Canonical: https://www.flowconsent.com/en/doc/install-framer
> Last updated: 2026-10-01
On Framer, the FlowConsent snippet goes in **Project Settings → Custom Code → Add Script**, placed at the **start of the `<head>`**, and then you **publish** the site. Installation takes three steps. The main pitfall: Framer's **Cookie Banner** component is a separate consent banner wired to Google Tag Manager; if you added it, remove it so visitors do not see two banners.

## Before you start

- An account on [app.flowconsent.com](https://app.flowconsent.com) (free Free plan, no credit card, 25,000 sessions per month) and a banner that is created and deployed. On the Free plan, deployment runs through your own Cloudflare account ([guide](/en/doc/cloudflare-deployment)); on Pro and Enterprise it is one click.
- A Framer project you can edit and publish. In practice a GDPR banner runs on your own domain, and Framer reserves custom domains for paid Site plans. If the editor asks you to upgrade when you add the script, your current plan does not include it.

## Step 1: Copy the snippet

In FlowConsent, open **Builder → Deployment → Integration**, **HTML / No-code** tab. The snippet has two parts, and their order matters:

```html title="Project Settings → Custom Code → start of <head>"
<script>
// FlowConsent Loader - place BEFORE any other script in the <head>
window.dataLayer=window.dataLayer||[];
function gtag(){dataLayer.push(arguments);}
gtag('consent','default',{
  'ad_storage':'denied',
  'analytics_storage':'denied',
  'ad_user_data':'denied',
  'ad_personalization':'denied',
  'wait_for_update':500
});
gtag('set','url_passthrough',true);
gtag('set','ads_data_redaction',true);
</script>
<!-- FlowConsent CMP -->
<script src="https://YOUR-LICENSE-CODE.consent.flowconsent.com/cookie-manager.js?code=YOUR_LICENSE_CODE"></script>
```

The first block sets the Consent Mode v2 defaults (everything `denied`), the second loads the banner. Paste them together, in a single Framer script.

## Step 2: Add it in Project Settings → Custom Code

In your Framer project:

1. Open **Project Settings** (called **Site Settings** in some versions of the editor).
2. Select the **Custom Code** tab in the left sidebar.
3. Click **Add Script** if you have no code yet, otherwise click the **+** icon.
4. Give the script a clear name, such as `FlowConsent`, and paste the snippet.
5. Choose the **start of the `<head>` tag** as the placement, so the snippet runs before any other script.
6. Keep the script active on all pages, without restricting the page list.
7. For how often it runs, choose **Once**: the page loads the snippet a single time, and the banner itself follows page changes (see step 3).

## Step 3: Publish, enable SPA Mode and remove the Framer Cookie Banner

Custom code does not run in the canvas preview: click **Publish** to put the snippet live, then test on the published site.

A Framer site changes pages in the browser, without a full reload. Turn on **SPA Mode** in the banner settings so FlowConsent rechecks consent on every navigation. The approach is covered in the [Next.js and SPA guide](/en/doc/nextjs-integration).

> [!WARNING]
> Framer offers its own **Cookie Banner** component, which sends the visitor's choices to Google Tag Manager through a container ID. Do not use it alongside FlowConsent: two banners mean two conflicting choices and consent you cannot prove. Delete the component from your project (it often lives in a shared component such as the navigation), then publish again.

If you loaded Google Tag Manager, Google Analytics or the Meta Pixel through other **Custom Code** scripts, none of them may run before FlowConsent. The safest option: remove those scripts and declare the services in **Builder → Services**, so the banner only loads them after consent. For GTM, keep the container in custom code, but place it at the **end of the `<head>`**, after the FlowConsent snippet. Framer's built-in analytics (Framer Analytics) do not use cookies according to Framer, so they do not go through the banner.

## Verify the installation

1. Open your published site in a **private window**: the banner should appear.
2. In the **Network** tab of the developer tools, no third-party request (Google, Meta, LinkedIn, and so on) should leave before you click "Accept".
3. Run the **installation assistant** (**Builder → Integration**): it checks the live page (loader present with your license code, Consent Mode stub present, stub placed BEFORE every Google tag). See [the setup wizard](/en/doc/setup-wizard).
4. Finish with a **refusal scan** from the **Compliance** tab: a real browser refuses consent and confirms that nothing fires. See [compliance verification](/en/doc/compliance-verification).

## Do it from your AI agent (MCP)

FlowConsent has an official MCP server, `https://mcp.flowconsent.com`, that works from Claude, ChatGPT or any MCP client. You connect with OAuth 2.0 using your FlowConsent account, no API key needed. Your agent can fetch the snippet and placement instructions (`get_banner_snippet` and `get_setup_instructions` tools), verify the installation with a real scan (`verify_consent_compliance`) and set up recurring monitoring (`monitor_compliance`).

Example request:

> Give me my banner snippet for my Framer site and check that it is installed correctly on https://mysite.com

The agent does not edit your Framer project for you: it gives you the snippet, the instructions and the verification. See [the MCP server](/en/doc/mcp-server) and [the MCP page](/en/mcp).

## Frequently asked questions

### Why doesn't the banner show up in the Framer preview?

Framer does not load custom code in the canvas preview. Publish the site and open the live address, ideally in a private window.

### Do I need a banner if I only use Framer Analytics?

According to Framer, its built-in analytics set no cookies and need no consent. As soon as you add a third-party service (Google Analytics, HubSpot, YouTube videos, and so on), you need a banner.

### Can I add FlowConsent to a single page only?

Framer allows it, but it is not recommended: the banner has to be on every page to block scripts before consent and to let visitors change their choice anywhere.

### Should I load FlowConsent through Google Tag Manager?

No. FlowConsent does not load through GTM, because a banner loaded from GTM arrives too late for prior blocking. The snippet goes at the start of the `<head>`, above the GTM container. See [Google Consent Mode](/en/doc/google-consent-mode).