# How to add a cookie consent banner to a Framer site

> In Framer, open Site Settings (called Project Settings in older docs), go to the custom code section, add a script with its placement set to Start of head tag, paste the snippet, save and publish. Framer's built-in analytics sets no cookies, so the tags to mark are the ones you add yourself: Google, Meta, chat widgets and embeds.

Source: https://cookiequiet.com/platforms/framer
Published: 2026-10-20
Publisher: Cookiequiet

## Steps

1. **Open the custom code settings** Open your site's Site Settings and go to the custom code section (the Code tab; older Framer docs call it the Custom Code tab of Project Settings).
2. **Add the snippet at the start of the head** Click Add Script (or the + icon), paste the Cookiequiet snippet, set Placement to Start of head tag, Pages to All and Run to Once, then save.
3. **Add your tags below it** Add the Google tag or Meta Pixel as a second entry, marked with type="text/plain" and data-cq-category, or preceded by Google's default consent block. If both entries share the Start of head placement, check the published page source to confirm the Cookiequiet snippet comes first; otherwise place the tag at Start of body.
4. **Mark embeds and widgets** In Embed components, write iframes with data-cq-src instead of src, and give chat or analytics scripts the same marking with the right category.
5. **Add the Cookie preferences link** Add a text link in the footer with the URL #cq-preferences. If Framer turns it into a page anchor, use an Embed component containing an HTML link with data-cq-show-preferences, or turn on the floating preferences button.
6. **Publish and test** Publish, open the site in a private window, click Reject all and check that no _ga or _fbp cookie is set. Accept all, reload and confirm the tags load. Custom code does not run in the preview.

## Where to paste the snippet in Framer

Framer adds site-wide code from the site settings, with a placement choice for each entry.

1. Open **Site Settings** (older Framer articles call it Project Settings) and go to the custom code section: it appears as the **Code** tab in Framer's current guides and as the **Custom Code** tab in older ones.
2. Click **Add Script** (or the **+** icon), paste the snippet, and set **Placement** to **Start of head tag**, **Pages** to **All** and **Run** to **Once**.
3. Save, then **Publish**: custom code runs on the published site only.

```html
<script src="https://cookiequiet.com/cq.js" data-site="YOUR_SITE_KEY" data-consent-mode="1" data-auto-block="1" defer></script>
```

Start of head is the earliest placement Framer offers, which is what a consent script needs: it must run before any tag that sets cookies.

## How to handle Framer's analytics and the tags you add

**Framer Analytics.** Framer's built-in analytics does not use cookies or persistent identifiers: it hashes the IP address and user agent with a secret that changes every day, and Framer states that no cookie consent is needed to use it. There is nothing to mark on that side.

**Tags you add.** Everything else goes through the same custom code panel, so you decide how it loads:

- **Marked** (nothing loads before consent): add the Google tag or the Meta Pixel as a second entry with `type="text/plain"` and `data-cq-category="analytics"` or `"marketing"` on each script tag. Cookiequiet runs them once the category is granted.
- **Consent Mode** (the Google tag loads with denied defaults and sends cookieless pings until consent): put Google's default consent block in the same entry as the Google tag, above it, so the default is always in place, as shown in the [Google Analytics 4 guide](/platforms/google-analytics-4).

When several entries use the Start of head placement, open the published page source and check that the Cookiequiet snippet is printed first. If it is not, give the tag entry the **Start of body** placement instead; a marked tag works from anywhere, and the default consent block must simply precede the Google tag.

**Embeds.** In an **Embed** component with HTML, write the iframe with `data-cq-src` instead of `src`: Cookiequiet sets the address after consent. Framer's native video and map components build their own iframes with JavaScript; the auto-blocker holds the known ones (YouTube under marketing, Vimeo under functional) until the category is granted, which the test below will confirm for your site.

**Chat widgets.** Mark their loader with `data-cq-category="functional"` (or `marketing` when the vendor also uses it for advertising).

## How to add the Cookie preferences link

Add a text link labelled "Cookie preferences" in the footer and set its URL to `#cq-preferences`. Framer treats hash links as page anchors; if the published link no longer carries that exact href, use an **Embed** component containing `<a href="#cq-preferences" data-cq-show-preferences>Cookie preferences</a>` in the footer, or turn on the floating preferences button in the banner settings.

## How to test

1. Publish, then open the published site in a private window and click **Reject all**.
2. Check the cookies in the developer tools: `cq_consent` and nothing from Google or Meta.
3. Clear the cookies, click **Accept all**, reload: the marked tags run and their cookies appear.
4. Open the consent log in the Cookiequiet dashboard.

The banner does not show in Framer's preview; it needs the published site.

## What is specific to Framer

- **Published only.** Custom code and the banner only exist on the published site, including a staging publication if you use one.
- **No built-in banner.** Framer has no consent banner; marketplace components that add one should be removed before you publish with Cookiequiet.
- **Localization.** The code applies to every locale; the banner's language follows the visitor's browser, with every string editable per language.
- **Content Security Policy.** If you set one through Framer's custom headers, allow `https://cookiequiet.com` in `script-src` and `connect-src`.

If you are unsure what your site loads, the free [cookie scanner](/tools/cookie-scanner) lists it from the published pages.

## Questions

### Does Framer's built-in analytics need a cookie banner?

Framer states that its analytics sets no cookies and keeps no persistent identifier, and that no consent is needed for it. The banner is for the third-party scripts you add: Google, Meta, chat widgets, embedded videos.

### Why is the banner not visible in the Framer preview?

Framer runs custom code on the published site only. Publish, then test in a private window.

### Where exactly is the custom code setting in Framer?

In Site Settings, in the code section: Framer's current guides show it as the Code tab, older ones as the Custom Code tab of Project Settings. The placement option Start of head tag is the same in both.

### How do I keep Google Analytics from setting cookies before consent on Framer?

Either mark its two script tags with type="text/plain" and data-cq-category="analytics" in the custom code entry, or put Google's default consent block above the Google tag in the same entry so it runs in Consent Mode with analytics_storage denied until the visitor accepts.

## Sources

- [Framer Help: How to add custom code](https://www.framer.com/help/articles/how-to-add-custom-code/)
- [Framer Help: Add Google Tag Manager to your site](https://www.framer.com/help/articles/how-to-add-google-tag-manager-to-your-site/)
- [Framer Help: How Framer's built-in analytics work](https://www.framer.com/help/articles/how-framer-s-built-in-analytics-work/)
- [Framer Help: GDPR and cookies in Framer](https://www.framer.com/help/articles/gdpr-and-cookies/)