ENIT
Home About Learn Blog

Real Cookie Consent in Webflow (Consent Pro)

Intermediate 26:58 webflowcookie-consentgdprfinsweetprivacy

Build a cookie consent system in Webflow that actually blocks trackers before consent — audit your site, then set up Finsweet Consent Pro with opt-in/opt-out banners.

Watch on YouTube

Key takeaways

  • A cookie banner isn't compliance — real compliance is about when tracking scripts run, blocking them until the user consents, not just showing a sticker.
  • Under GDPR and the ePrivacy Directive, tracking technologies must stay blocked by default until the visitor gives explicit consent.
  • You can audit any site for free: open dev tools → Application → Cookies in a private window, or run the Consent Pro scanner, to see which trackers fire before consent.
  • Opt-in vs opt-out matters: opt-in (recommended for GDPR) blocks cookies until accepted; opt-out allows them until rejected — so pick per region with geolocation.
  • Finsweet Consent Pro installs as a Webflow app, scans your site, and matches trackers to a database (AI can fill missing info) — and its script must be the very first in the head so it can block the others.
  • It's free on the Webflow staging domain; a site plan is only needed for a custom domain (and the sitemap-based scanning option).

Video chapters

  1. 00:00 Intro
  2. 01:19 Why cookie compliance matters
  3. 07:56 Scan your website for free
  4. 12:56 Set up Finsweet Consent Pro
  5. 23:02 Test the final setup
  6. 25:49 Outro

By the end of this lesson you’ll be able to build a cookie consent system in Webflow that actually works — one that blocks tracking scripts until the visitor agrees, adapts to different regions, and passes a real compliance scan. Not a decorative banner, a real consent layer, built with Finsweet Consent Pro.

This one matters more than most people think. Most cookie banners are basically stickers: they show up, but the tracking scripts (Meta Pixel, Google Analytics via Tag Manager, Hotmart, and friends) fire immediately anyway, whether the user accepts or rejects. That’s not compliance — and it’s worth understanding why before we fix it.

One important note: I’m a developer, not a lawyer, so treat this as a practical guide to the mechanics of consent, not legal advice. For your specific obligations, check the current regulations or a professional.

How it works

Here’s the principle behind everything. Under the GDPR and the ePrivacy Directive, tracking technologies must stay blocked by default until the visitor gives explicit consent. So if cookies like _fbp (Facebook Pixel) or _ga (Google Analytics) appear before anyone clicks Accept, the site is technically non-compliant — even if it has a banner. Compliance isn’t about the banner existing; it’s about controlling when scripts actually run.

You can see the problem yourself with a quick audit. Open the live site in a private window (a clean environment — no stored cookies), press F12, and go to Application → Storage → Cookies. If you see analytics and marketing cookies on first load, they’re running before consent. The Consent Pro scanner (consentpro.com/scan) makes this rigorous: paste a page URL, scan, and it returns a compliance score, the scripts loaded, the cookies created, and — the key test — how many trackers run before consent. Scanning one page is usually enough, since tracking scripts load globally.

The fix hinges on one distinction: opt-in vs opt-out. An opt-in banner keeps trackers blocked until the user accepts — this is the model required for the GDPR region. An opt-out banner allows them by default and only removes them on reject — fine for regions without prior-consent rules. Because the right choice depends on where the visitor is, Consent Pro’s geolocation lets you create multiple banners (e.g. opt-in for EU + UK, opt-out global) and automatically shows each visitor the correct one.

Finally, the piece that makes it real: the Consent Pro script must be the very first script in your head code. It has to load before Pixel, Tag Manager, and the rest so it can intercept and block them until consent is given. Get that order wrong and you’re back to a decorative banner.

How to use it

  1. Audit first — open your live site in a private window, check Application → Cookies, and run a free scan at consentpro.com/scan to see what fires before consent.
  2. Install the app — in Webflow’s Apps panel, search Finsweet, open Consent Pro, install on your site, and authorize it.
  3. Create your GDPR banner — choose the opt-in type (recommended for GDPR), set geolocation to custom, and target EU countries + UK. Pick which pages it shows on, then create it.
  4. Scan and confirm trackers — run the in-app scan so it detects your trackers, confirm the matches, and where a tracker is missing details, use the AI “fill fields” button and save.
  5. Add the script — first — install the Consent Pro script into Site Settings → Custom Code → Head, making sure it’s the very first script. Publish.
  6. Add a global banner — create a second banner, this time opt-out with geolocation global, for visitors outside the GDPR region. Publish again.
  7. Style on brand — the banners live inside the Consent Components element; switch their display to edit each, then style to match your site.
  8. Test both paths — reload in a private window and confirm: in the GDPR region no trackers fire until you accept; elsewhere the opt-out banner allows them until you reject (leaving only Consent Pro’s own preference cookie). Re-scan to confirm a clean score.

Cookie compliance isn’t about making a banner appear — it’s about making trackers behave the right way, at the right time, for the right users. Build it this way and you can back up “we’re compliant” with an actual passing scan.

Resources

Frequently asked questions

Is a cookie banner enough to be GDPR compliant in Webflow?
No. A banner that appears but doesn't stop scripts from running is just a visual sticker. Real compliance means tracking technologies stay blocked by default and only fire after the visitor gives explicit consent — it's about controlling when scripts run, not showing a message.
How do I check which cookies my Webflow site sets before consent?
Open the live site in a private window, press F12, and go to Application → Storage → Cookies to see what's stored on first visit. For a fuller picture, run a free scan with the Consent Pro scanner, which lists trackers running before consent and gives a compliance score.
What's the difference between an opt-in and an opt-out cookie banner?
An opt-in banner blocks tracking cookies until the user actively accepts them — the model required for the GDPR region. An opt-out banner allows cookies by default and only removes them if the user rejects. With geolocation you can show the right one per region automatically.
How do I set up Finsweet Consent Pro in Webflow?
Install it from the Apps panel, authorize it, and create a banner (opt-in for GDPR, opt-out global). Scan the site so it detects your trackers, confirm the matches (AI can fill missing tracker details), then paste the Consent Pro script as the very first item in your head code so it loads before everything else.
Do I need a paid plan for cookie consent on Webflow?
Consent Pro is free to test on your Webflow staging domain. You only need a site plan when you're ready to run it on a custom domain (and to enable the sitemap-based scanning option), so you can build and verify the whole setup before paying.

Browse all lessons