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

> In Webflow, paste the snippet at the top of the Head code field under Site settings, then Custom code, and publish; custom code needs a paid site plan. Mark the tags you paste in the same field, use a custom attribute for the footer link, and let Webflow Analyze follow the choice with wf.allowUserTracking().

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

## Steps

1. **Open the Custom code tab** Open your site's Site settings and click the Custom code tab. Custom code requires a paid site plan or Workspace plan.
2. **Paste the snippet in Head code** Paste the Cookiequiet snippet at the very top of the Head code field, above any other code, and click Save. Site-wide head code is printed before page-level code.
3. **Move your Google tag out of the integration field** If you entered a Measurement ID under Apps & Integrations, remove it: Webflow prints that tag itself. Paste the Google tag in Head code below the snippet instead, marked with data-cq-category="analytics" or preceded by Google's default consent block.
4. **Mark the other tags** Give every Meta Pixel, Hotjar or chat widget script in Head code or Footer code the type="text/plain" attribute and a data-cq-category. For embedded videos in an Embed element, replace src with data-cq-src on the iframe.
5. **Pass consent to Webflow Analyze** If you use Webflow Analyze, set its tracking default to Don't track by default and add the short bridge from this guide that calls wf.allowUserTracking() when analytics is granted and wf.denyUserTracking() otherwise.
6. **Add the Cookie preferences link** In the Designer, add a text link to the footer, set its URL to #cq-preferences and, in the element settings, add the custom attribute data-cq-show-preferences with an empty value.
7. **Publish and test** Publish the site, open it 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 Designer or in preview.

## 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](/platforms/google-analytics-4): 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](/guides/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](/tools/cookie-scanner) on the published site to list the tags Webflow prints for you.

## Questions

### Can I add Cookiequiet to a free Webflow site?

Custom code requires a paid site plan or Workspace plan, as Webflow documents. The snippet is custom code, so a free Starter site cannot load it.

### Why does the banner not appear in the Designer?

Webflow runs custom code only on the published site, not in the Designer or in preview. Publish to the webflow.io domain and test there.

### Should I keep Google Analytics in Site settings, then Apps & Integrations?

No. Webflow prints that tag itself, before Cookiequiet can mark it. Remove the Measurement ID and paste the Google tag in Head code below the snippet, marked or with Google's default consent block.

### Does Webflow Analyze need consent?

Webflow states that Analyze sets no cookies and uses an anonymous identifier in local storage. If you decide to ask anyway, set its default to Don't track by default and pass the analytics choice with wf.allowUserTracking() and wf.denyUserTracking() as shown above.

## Sources

- [Webflow Help: Custom code in head and body tags](https://help.webflow.com/hc/en-us/articles/33961357265299-Custom-code-in-head-and-body-tags)
- [Webflow Help: How do I connect my Webflow site to Google Analytics?](https://help.webflow.com/hc/en-us/articles/33961293143059-How-do-I-connect-my-Webflow-site-to-Google-Analytics)
- [Webflow Developers: Site tracking and consent management](https://developers.webflow.com/browser/reference/consent-management)
- [Webflow Help: Intro to Webflow Analyze](https://help.webflow.com/hc/en-us/articles/34200153798163-Intro-to-Webflow-Analyze)