Webflow Cookie Banner: Setup & Compliance

Webflow gives you total design control — and ships with no built-in cookie consent at all. Every tracker you add loads through custom code, which means your GA4, Meta Pixel, and Hotjar fire the moment a visitor lands, before anyone accepts anything. This guide covers how to add a Webflow cookie banner properly: where the code goes, how to block scripts before consent, and the US litigation angle most Webflow tutorials skip.

Do you need a cookie banner on Webflow?

Almost certainly, yes. Webflow itself sets very few cookies — but the moment you add Google Analytics 4, a Meta Pixel, Hotjar, a YouTube embed, or any marketing integration, your site places non-essential cookies on visitors. The EU's GDPR and ePrivacy rules require opt-in before those load; California's CCPA and 18 other US state laws require a clear opt-out. Because Webflow ships nothing native, an unmanaged Webflow site running any tracker is non-compliant by default — which is why regulators' recent enforcement (including CNIL's €150M SHEIN fine in September 2025 for pre-consent cookies) matters here.

Why Webflow is different: there's no native CMP

This is the crucial difference from other platforms, and it shapes everything about how you set up consent. WordPress has plugins. Shopify has a Customer Privacy API. Squarespace has a native banner. Webflow has none of these — cookie consent relies entirely on custom code you add yourself.

That cuts both ways. The upside: Webflow's custom-code area accepts any JavaScript, so a consent tool can intercept and manage scripts without platform restrictions — cleaner, in some ways, than fighting a platform's own half-measures. The downside: full responsibility sits with you. There's no toggle to flip; if you don't add a consent layer, nothing blocks anything.

How to add a cookie banner to Webflow

Because there's no native option, every route is a variation on "add a consent script and configure blocking." Here's the correct sequence.

1. Choose a consent tool that actually blocks scripts (not just shows an overlay), supports Google Consent Mode v2, and installs via a head snippet.
2. In Webflow, go to Project Settings → Custom Code → Head Code. Paste the consent script at the very top, before any GA4, GTM, or pixel code. Load order is everything here.
3. If you added trackers via the Integrations panel (Webflow's built-in GA/Facebook fields) or embedded them in page-level custom code, register those with your consent tool so they're gated too.
4. Self-host Google Fonts if your compliance posture requires it (Webflow loads them from Google by default).
5. Publish, then test on the production domain — not the webflow.io subdomain. Open incognito, open DevTools → Network, and confirm non-essential scripts stay blocked until you consent. Test all three paths: reject, partial, accept.

The mistakes that break Webflow consent

Because it's all manual, Webflow consent fails in specific, common ways:

• Consent script loaded too late. If it isn't first in the head, GA4 and pixels initialise before it can block them — the single most common Webflow mistake.
• Notice-only widgets. Many "cookie banner" scripts display a bar but don't actually block anything. A banner that shows while trackers fire meets the notice requirement, not the consent requirement.
• Integrations-panel trackers left ungated. The GA and Facebook fields in Webflow's own settings fire independently of a banner you added separately.
• Testing on webflow.io. The staging subdomain behaves differently from your live domain — always verify on production.
• Embeds forgotten. A YouTube or Vimeo embed sets third-party cookies on render, not on play.

We built the deeper, Webflow-specific version of this — including the exact head-code order and a full native-vs-ConsentPixel breakdown — into our cookie consent for Webflow guide.

Your 2 options for a compliant Webflow cookie banner

With no native tool, it comes down to two realistic routes — honestly compared.

1. An independent consent tool (e.g. ConsentPixel)

Best for: any Webflow site running GA4, GTM, pixels, embeds, or session-replay — especially with US visitors. A dedicated consent layer added with one head snippet that blocks trackers before consent, passes all four Google Consent Mode v2 parameters, detects GPC, and keeps a timestamped consent log. Among independent tools, ConsentPixel — Privacy · Verified is built prevention-first: it blocks scripts rather than showing a notice over them, and Webflow's open custom-code area is ideal for it.

2. A general CMP or app (CookieYes, Cookiebot, Termly, Finsweet Consent Pro)

Best for: sites wanting a banner-and-policy bundle. These install via the same head-code route and add consent categories. They're capable and widely used. The difference is emphasis: verify the tier you pick actually blocks scripts before consent — some display categories while trackers fire — and check its GPC and CIPA coverage, which varies by plan.

The US angle most Webflow guides skip: CIPA

Nearly every "Webflow cookie banner" tutorial focuses on GDPR. It matters — but if any of your visitors are in the United States, the more urgent 2026 risk is often the California Invasion of Privacy Act (CIPA). Plaintiffs' firms have built a sustained wave of "wiretapping" lawsuits arguing that session-replay tools, tracking pixels, and chat widgets capturing a visitor's activity before consent amount to unlawful interception. Under California Penal Code §637.2, a plaintiff can seek statutory damages of $5,000 per violation — often read per affected visitor — with no proof of harm required.

Why this hits Webflow sites specifically: with no native gate and everything running through custom code, session-replay tools like Hotjar and Clarity almost always fire on load unless you've deliberately blocked them. A Webflow site running Hotjar and serving California visitors can carry real exposure even with a banner on screen. The fix is to hard-block those scripts until consent. You can follow the trend on our CIPA Lawsuit Tracker.

Frequently asked questions