How can I implement a GDPR compliant Cookie consent in Webflow using the Finsweet option, following the tutorials and main YouTube video by Joe Krug? I'm based in the UK.
- Add Finsweet’s Cookie Consent script in Webflow’s Project Settings and build the consent banner and modal using Finsweet attributes.
- Tag all non-essential scripts (e.g., analytics) with
fs-cc-categoryandtype="text/plain"to ensure they only run after explicit user consent. - Enable GDPR (disable CCPA) in settings, customize consent categories for UK compliance, and test thoroughly to ensure no cookies load before consent.
To implement a GDPR-compliant cookie consent in Webflow using Finsweet's Cookie Consent solution from the tutorial by Joe Krug, follow each key step and configuration carefully to meet UK data protection requirements.
1. Understand Requirements for UK GDPR Compliance
- Consent must be prior to cookie loading (especially tracking/marketing cookies).
- Consent must be granular, allowing users to accept/reject cookie categories.
- No pre-checked boxes; users must opt-in.
- Consent must be revocable at any time.
2. Add Finsweet Cookie Consent via Attributes
- Go to https://finsweet.com/attributes/cookie-consent.
- Click “Use in Webflow” and copy the CDN script link provided by Finsweet.
- In your Webflow project, go to Project Settings > Custom Code, and paste the script inside the Head tag.
Example Location: Paste it before the closing </head> in the Head Code area.
3. Set Up Cookie Consent Elements in Webflow
Use the Finsweet Cloneable project or build from scratch.
Add the container elements used by Finsweet:
One for the banner (
fs-cc="banner").One for accept all (
fs-cc="accept-all").One each for specific category acceptances like:
fs-cc="accept-functional"fs-cc="accept-marketing"
One to trigger preferences modal (
fs-cc="open-preferences").Style the modal and banner using Webflow Designer as needed.
4. Set Cookie Categories in Your Scripts
- For each non-essential script (e.g., Google Analytics, Facebook Pixel), use a
scripttag withtype="text/plain"and add: fs-cc-category="marketing"for marketing cookies.fs-cc-category="functional"for site-enhancing but not necessary scripts.
Example: Modify a Google Analytics script like this:
<script fs-cc-category="marketing" type="text/plain"> // Your GA tracking code</script>- This prevents it from running until consent is given.
5. Tailor the Consent for the UK
- If you're UK-based, treat UK GDPR the same as EU GDPR—explicit consent is required for any non-essential cookies.
- In the Finsweet settings panel, make sure the CCPA check is deactivated and GDPR is enabled.
- Add proper consent categories, and adjust the default language text to reflect UK-targeted users.
6. Test Cookie Behavior
Publish your Webflow site.
Open it in an incognito browser or clear existing cookies.
Accept, reject, or choose categories and inspect via browser dev tools:
Check that no cookies are loaded before acceptance.
Confirm scripts are only triggered after correct consent.
Use tools like Cookiebot validator or GDPR Cookie Scanner to verify compliance.
Summary
To use the Finsweet Cookie Consent tool in Webflow for full UK GDPR compliance, install the CDN script via Project Settings, configure your cookie banner elements using Finsweet Attributes, tag your non-essential scripts with fs-cc-category, and ensure no cookies load before explicit consent. Tailor consent settings specifically for the UK and always test your implementation thoroughly.