How to Add Cookie Consent to Webflow: Step-by-Step Guide

To add cookie consent to a Webflow site, pick a route: a cloneable custom-code banner, a marketplace app, or a hosted consent script. Scan your site for cookies, paste the consent code into Webflow's Custom Code head section, and set it to block non-essential scripts before consent. Then publish and test.

Most Webflow site owners finish this task in under an hour once they pick a route and get the code in hand.

How Do You Add Cookie Consent to a Webflow Site? (Quick Answer)

Adding cookie consent to Webflow takes five actions in sequence, from finding your cookies to confirming the banner actually blocks them.

1. Scan your site to find every cookie and tracker it sets
2. Choose a route (custom-code banner, marketplace app, or hosted script) and get your consent code
3. Paste the code into Webflow's Custom Code head section
4. Set the banner to block non-essential scripts and cookies before consent
5. Publish your site and test the banner on the live URL

Does a Webflow Site Legally Need a Cookie Banner?

Yes, if your Webflow site sets non-essential cookies and serves EU or UK visitors (GDPR and ePrivacy require opt-in) or California visitors (CCPA requires opt-out). Webflow itself does not drop tracking cookies by default, but Google Analytics, Google Ads, Meta Pixel, and most embeds do. Most Webflow sites run at least one of these tools, which means most Webflow sites need a compliant banner.

Non-essential cookies cannot legally load before the visitor consents. One r/gdpr thread states the rule plainly.

It is not legal to set the cookie before asking for consent, assuming it's a non-essential cookie.

A banner that only displays but does not stop the tracker from firing does not satisfy this rule. See the general guide to adding a cookie banner to any website for the platform-agnostic version of this requirement.

What You Need Before You Start

You need four things ready before you touch Webflow's settings, and the one most people skip is the cookie list.

• A Webflow site plan or Workspace tier that allows custom code (Core, Growth, Agency, and Freelancer Workspaces qualify, as does an active Site plan on the individual site)
• A list of the cookies and trackers your site actually sets, from a scan
• A consent route chosen (custom-code banner, marketplace app, or hosted script)
• Access to Project Settings if you use Google Analytics, Google Ads, or another Google product, a plan to wire Consent Mode

The Three Ways to Add Cookie Consent to Webflow

Webflow has no built-in cookie consent banner. Three routes fill that gap, and each trades off setup time against how much of the compliance work it does for you.

Route	How it works	Blocks before consent?	Free?	Best for
Cloneable custom-code banner	Design the banner in Webflow, wire consent logic yourself with custom code or attributes	Only if you build it in	Design is free; the underlying consent engine is now paid	Designers comfortable writing or adapting JavaScript
Marketplace app	Install a pre-built app from Webflow's App Marketplace	Depends on the app	Varies by app	Owners who want an in-Designer install with no external script
Hosted consent script (CMP)	Paste one script; the tool scans, blocks, and records consent	Yes, by default	Free trial, then paid	Owners who want scanning and blocking handled automatically

Route 1: A Cloneable Custom-Code Banner

A cloneable custom-code banner is a pre-designed Webflow component you copy into your project. You then wire it to your own consent logic with attributes or a script. The most-cloned free version of this pattern migrated to a paid successor product. The free attributes-based banner many Webflow sites relied on is no longer available at no cost.

This route still works. One Webflow builder described the DIY process directly.

I designed the banner with all the components I needed, gave them relevant IDs and then used ChatGPT to help me with the code.

The honest ceiling is that you build the blocking logic and the Consent Mode signaling yourself. Nothing here scans your site or auto-blocks scripts for you.

Route 2: A Webflow Marketplace App

A marketplace app installs from Webflow's official Apps directory and runs inside the Designer rather than through Custom Code. This route is convenient because you never leave Webflow to configure it. The caveat: confirm the app actually blocks scripts and cookies before consent, not just displays a banner. Some marketplace apps handle the banner UI only and leave you to wire blocking separately.

Route 3: A Hosted Consent Script or CMP

A hosted consent script is one line of code that connects your site to an external consent management platform. The platform scans your site, builds the banner, blocks scripts and cookies before consent, signals Google Consent Mode, and records every visitor's choice. Consently works this way: add your site, design the banner, and copy one script into Webflow's Custom Code.

Step 1: Scan Your Webflow Site to See Which Cookies and Trackers It Sets

You cannot block what you have not found, so scanning comes before any banner configuration. A scan reads your published site and lists every cookie, tracker, script, and iframe it sets, categorized by type (essential, analytics, advertising, and so on).

Run the scan against your live, published Webflow domain, not the Designer preview. Some scripts, such as Google Analytics, embeds, and third-party widgets, only fire on the real site. If your site has funnel or landing pages that are not linked from your main navigation or sitemap, add those URLs to the scan manually. An automated crawl will miss unlinked pages.

Consently runs an automatic full-site scan of your published Webflow domain and detects cookies, trackers, scripts, and iframes without any manual hunting. Add any unlinked pages to the scan list from the dashboard, and Consently re-scans them going forward.

Step 2: Choose Your Route and Get Your Consent Code

Once you know what your site sets, match that list against the three routes above and get the actual code you will paste into Webflow. A site running only first-party analytics has different needs than one running Google Ads, Meta Pixel, and a chat widget.

For the hosted-script route (Route 3), the workflow has three steps.

1. Add your Webflow site's domain to the consent tool
2. Design the banner: pick a layout, match your brand colors and fonts, and preview it live
3. Copy the one-line embed code the tool generates

Consently's banner design includes a live preview and custom CSS for cases where the built-in controls fall short. It also inherits your site's font automatically, so the banner matches your Webflow site without extra styling work.

Step 3: Paste the Code Into Webflow's Custom Code (Head)

The consent script goes into Webflow's Site settings, not the Designer canvas, and it needs to load before any analytics or ad scripts.

Here is where the consent code goes.

1. Open your Webflow project and go to Site settings
2. Click the Custom code tab
3. Paste your consent script into the Head code section
4. Click Save changes

Place the consent script above any Google Tag Manager or analytics code already in the head, so it initializes first. The Head code section holds up to 50,000 characters, which covers any consent script with room to spare.

If a hosted script gets blocked, check whether your site enforces a Content Security Policy header. One Webflow builder hit exactly this problem.

Refused to run the JavaScript URL because it violates the following Content Security Policy directive.

The fix is to allowlist the script's domain in your CSP settings.

Consently installs here as a single line of JavaScript in the Head code section, placed before GTM and other trackers. A GTM Custom HTML tag is the alternative if you prefer to manage the script through Tag Manager instead of directly in Webflow.

Site-Wide Head Code vs Page-Level Custom Code

Webflow's Site settings Head code applies to every page on your site, which is what a consent script needs. Page-level custom code works differently: set under each page's own Page settings, it applies only to that one page. Using it for consent code would leave every other page without the banner, so it is the wrong location.

Step 4: Make the Banner Block Scripts and Cookies Before Consent

A banner that displays but does not stop trackers from firing is decoration, not compliance. Under GDPR and ePrivacy, a non-essential cookie cannot legally load until the visitor consents. The banner has to gate the script, not just cover it. A Webflow builder described the exact failure mode directly.

The cookie Banner works, but everything has to be controlled through Tag Manager, otherwise it's not going to work.

A visible banner with no blocking wiring behind it passes a visual check and fails a legal one.

Confirm your route actually blocks before consent:

• If you chose a hosted script, confirm auto-blocking is enabled; most hosted CMPs block by default once installed
• If you chose a cloneable custom-code banner, you must wire the blocking logic yourself; a banner alone does nothing
• If you chose a marketplace app, verify in its settings whether it blocks scripts or only displays the UI

Consently auto-blocks scripts, iframes, and non-essential cookies before consent automatically once installed, with no manual per-script tagging required. It supports explicit consent only, meaning a visitor must actively accept before anything non-essential loads, which is the stricter and safer standard under GDPR.

Step 5: Wire Google Consent Mode v2 and GTM Without Breaking Analytics

Google Consent Mode v2 tells Google Analytics and Google Ads what the visitor has consented to, using four signals: ad_storage, analytics_storage, ad_user_data, and ad_personalization. All four default to denied until the visitor accepts, then flip to granted.

Wire this in one of two ways:

1. Load your consent tool first in the Head code section, before GTM, so it sets Consent Mode defaults before any tag fires
2. If you manage tags through GTM instead, sequence your consent tool to fire before your other tags using GTM's tag sequencing settings

Manual Consent Mode setup is a common sticking point. One Webflow builder summed up the GTM side plainly.

Last time I tried configuring consent-based triggers it was a nightmare.

Consently removes that step. It signals Consent Mode v2 automatically, setting all four defaults and sending updates without any manual gtag('consent') code. Place Consently first in the head, ahead of GTM, and the sequencing problem does not come up.

Step 6: Publish, Test, and Re-Scan Your Webflow Site

Nothing goes live until you publish. Webflow's own documentation is explicit on this: custom code effects show in preview mode. They do not take effect on the live site until you publish.

Confirm the banner works on the real site:

1. Click Publish in Webflow
2. Open your live URL in an incognito or private window, not the Designer preview
3. Confirm the banner appears before any tracker loads
4. Open your browser's developer tools (Application or Storage tab) and confirm non-essential cookies are absent until you accept
5. Schedule a re-scan on a recurring basis, since new scripts and cookies get added as the site changes

Consently re-scans on a weekly schedule automatically and lets you trigger a manual scan any time. Check your consent log after publishing to confirm visitor choices are being recorded correctly.

Common Webflow Cookie Consent Mistakes to Avoid

The single most damaging mistake is a banner that displays but never blocks anything. It creates the appearance of compliance while leaving every tracker firing on page load.

• Scripts fire before consent despite a visible banner. This looks compliant and is not. Use a route that blocks by default, or wire GTM consent triggers correctly if you manage tags manually.
• Forgetting to republish after adding the code. The banner works in preview but never appears on the live site. Publish, then check the live URL in an incognito window.
• Placing the consent script below GTM or Google Analytics in the head. Trackers initialize first and ignore the consent signal that arrives late. Move the consent script to the top of the Head code section.
• Relying on a free custom-code banner that is no longer maintained. A once-popular free option migrated to a paid product; sites still running the old, unmaintained version risk breakage on Webflow updates. Re-choose a maintained route.
• A hosted script blocked by a Content Security Policy header. The banner never loads, and no error appears on the page itself, only in the browser console. Allowlist the script's domain in your CSP configuration.

How Consently Adds Cookie Consent to Webflow in One Line

Consently covers the entire task in a single install. One line of JavaScript in Webflow's Custom Code head section scans your site and blocks trackers. It also signals consent to Google and generates the policy pages your banner links to.

After you paste the script, Consently does five things automatically.

• Scans your published Webflow domain automatically and finds cookies, trackers, scripts, and iframes
• Blocks non-essential cookies, scripts, and iframes before the visitor consents
• Signals Google Consent Mode v2 automatically, with no manual gtag code
• Logs every consent choice with a timestamp, for audit purposes
• Generates a linked cookie policy, privacy policy, and terms and conditions page

One AppSumo reviewer described the setup speed directly.

Live in under 30 minutes with minimal setup.

Design changes are just as fast.

The auto-scanning feature saves me so much time, and customizing the cookie banner to match my brand was super easy.

If you manage more than one Webflow site, Consently's flat multi-domain pricing covers the whole agency angle. See the full Consently for Webflow page for pricing across multiple client domains.

FAQs

Is there a free cookie consent option for Webflow?

A free cloneable custom-code banner exists, but you wire the blocking logic and Consent Mode signaling yourself. The most widely used free version migrated to a paid successor product, so most current free options require more manual setup than before.

Why did the popular free Webflow cookie banner go paid?

The most-cloned free custom-code banner for Webflow migrated to a paid successor product. The free attributes-based version is no longer maintained as a standalone option, which is why Webflow builders are actively re-choosing a consent route in 2026.

Does Webflow have a built-in cookie consent banner?

No. Webflow has no native cookie consent or scanning feature. You add consent through one of three routes: a cloneable custom-code banner, a marketplace app, or a hosted consent script pasted into Custom Code.

Where do I paste cookie consent code in Webflow?

Paste it into Site settings, Custom code tab, Head code section, then click Save changes. This applies the code site-wide, before the closing head tag, on every page.

Do I need to republish my Webflow site after adding the code?

Yes. Custom code changes appear in Webflow's preview mode immediately, but they do not go live until you publish the site. Always check the live URL after publishing, not the Designer preview.

How do I add cookie consent to Webflow without slowing my site down?

Choose a lightweight hosted script. If you add it manually, load it with the async or defer attribute, since Webflow's own documentation notes that external head scripts can slow page loads. A well-built consent script typically adds negligible load time.

Does my Webflow cookie banner actually block Google Analytics before consent?

Only if you confirm it. A banner that displays without wiring the blocking logic does not stop Google Analytics from firing. Test this directly: open your live site in an incognito window, check the browser's developer tools before accepting, and confirm no analytics cookies are present.

How long does it take to add cookie consent to a Webflow site?

Most Webflow owners finish in under an hour: scanning the site, choosing a route, pasting the code, and publishing typically total 30 to 60 minutes. A hosted script with automatic scanning and blocking is the fastest route since it skips manual blocking logic entirely.

Ready to add cookie consent to your Webflow site the fast way? Consently scans your published domain, blocks scripts and cookies before consent, and signals Consent Mode v2 automatically. It logs every choice and builds your branded Webflow consent banner and linked policies from one script pasted into Webflow's Custom Code. Start a free 14-day trial at app.consently.net, no credit card required.