Platforms

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.

Published 20 October 2026 · By the Cookiequiet team · Markdown

Steps

Open the custom code settingsOpen 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).

Add the snippet at the start of the headClick 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.

Add your tags below itAdd 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.

Mark embeds and widgetsIn Embed components, write iframes with data-cq-src instead of src, and give chat or analytics scripts the same marking with the right category.

Add the Cookie preferences linkAdd 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.

Publish and testPublish, 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.

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.
Click Add Script (or the + icon), paste the snippet, and set Placement to Start of head tag, Pages to All and Run to Once.
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.

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).

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

Publish, then open the published site in a private window and click Reject all.
Check the cookies in the developer tools: cq_consent and nothing from Google or Meta.
Clear the cookies, click Accept all, reload: the marked tags run and their cookies appear.
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 lists it from the published pages.

Questions

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.

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

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.

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

Cookie banner for Webflow: install Cookiequiet in the Head codePaste the Cookiequiet snippet in Webflow's Head code, mark your tags, pass consent to Webflow Analyze, add a Cookie preferences link and test Reject all.Google Analytics 4 and Cookiequiet: Consent Mode v2 or no tag before consentRun Google Analytics 4 with Cookiequiet: Consent Mode with analytics_storage denied until consent, or the Google tag marked so it never loads before consent.Meta Pixel and Cookiequiet: fire the pixel only after marketing consentHold the Meta Pixel until marketing consent with Cookiequiet: mark the base code, fire it from Google Tag Manager on cq_consent, or use Meta's consent calls.

Back to Platforms

Put a quiet banner on your website today

Free for one website with every core feature, no card and no trial clock. Upgrade a website to Pro for $3 a month when you want the AI designer, no branding and the five-year consent log.

Start free, no card See pricing