How to add a cookie consent banner to a Webflow site

Where to paste the snippet in Webflow

Webflow prints site-wide custom code on every page of the published site. Open Site settings, click the Custom code tab, paste the snippet at the top of the Head code field and click Save:

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

Head code is printed before the closing head tag on every page, and page-level head code (in each page's settings) comes after it, so a tag added to one page still sees the snippet first. The field takes up to 50,000 characters. Custom code is a feature of paid site plans and Workspace plans; a free Starter site cannot add it. Nothing changes on the live site until you Publish.

How to handle Webflow's own analytics and the tags you add

Google Analytics through Apps & Integrations. Webflow can print the Google tag for you when you enter a Measurement ID under Site settings, then Apps & Integrations, then Google Analytics (or through the Google site tools app). That tag is printed by Webflow, outside your Head code, so Cookiequiet cannot mark it. Remove the ID there and paste the Google tag in Head code, below the snippet, in one of the two ways described in the Google Analytics 4 guide: marked with type="text/plain" data-cq-category="analytics" so it does not load before consent, or preceded by Google's default consent block so it runs in Consent Mode with analytics_storage denied.

Webflow Analyze. Webflow's own analytics does not use cookies; it stores an anonymous identifier in local storage. Whether you treat it as needing consent is your call; if you do, set its tracking default to Don't track by default and add this bridge after the snippet. It uses the cq:consent event Cookiequiet dispatches on load and after every choice, and Webflow's browser API:

html
<script>
  window.addEventListener('cq:consent', function (e) {
    var analytics = e.detail.categories.indexOf('analytics') >= 0;
    if (typeof wf === 'undefined') return;
    wf.ready(function () {
      if (analytics) { wf.allowUserTracking(); } else { wf.denyUserTracking(); }
    });
  });
</script>

Tags you paste. The Meta Pixel, Hotjar, Clarity, chat widgets: mark them in Head code or Footer code with type="text/plain" and data-cq-category="marketing" (or analytics, or functional for a chat widget). Scripts that a tag manager injects with JavaScript are held by the auto-blocker when they belong to one of the 80 known trackers.

Embedded videos. In an Embed element, write the iframe with data-cq-src instead of src; Cookiequiet sets the real address after consent. Webflow's native Video element builds its own player; use an Embed element when the video must wait for consent. More in YouTube embeds and consent.

How to add the Cookie preferences link

In the Designer, add a Text link or Link block to the footer, set its link to the URL #cq-preferences, then open the element settings and add a custom attribute named data-cq-show-preferences with an empty value. Either of the two is enough for Cookiequiet to open the preferences centre; having both is harmless. Publish.

How to test

1. Publish, then open the published site (the webflow.io domain or your own) in a private window.
2. Click Reject all. Check the cookies in the developer tools: cq_consent and nothing from Google or Meta.
3. Clear the cookies, click Accept all and reload: the marked tags run, their cookies appear.
4. Check the consent log in the Cookiequiet dashboard.

The banner does not show in the Designer or in preview mode, because custom code only runs on the published site.

What is specific to Webflow

• No built-in banner. Webflow has no consent banner of its own, so there is nothing to turn off. Marketplace banners (Cookiebot, iubenda and others) should be removed before you publish with Cookiequiet.
• Staging and production. Both the webflow.io subdomain and your custom domain receive the same Head code, which is convenient for testing before connecting the domain.
• Localization. Site-wide Head code applies to every locale. The banner picks its language from the visitor's browser, with every string editable per language in the dashboard.
• Webflow Optimize follows the same tracking consent as Analyze; the bridge above covers both.

Run the free cookie scanner on the published site to list the tags Webflow prints for you.