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.
TL;DR
- Embed Finsweet’s Cookie Consent script in Webflow’s <head>, design the modal with required fs-cc attributes, and define cookie categories with toggles.
- Wrap third-party scripts to load only on consent, optionally geo-target for GDPR regions like the UK, and ensure proper policy links and consent behavior testing.
To implement a GDPR-compliant cookie consent in Webflow using Finsweet’s Cookie Consent solution, follow the steps outlined in their official tutorial, including the YouTube video by Joe Krug. This ensures full compliance for users in the UK, where GDPR rules still apply post-Brexit.
1. Add Finsweet’s Cookie Consent Script
- Go to Finsweet Cookie Consent and click “Add to Webflow”.
- They’ll guide you through copying the embed code.
- Paste the code in Webflow ➝ Project Settings ➝ Custom Code ➝ Inside <head>.
2. Prepare Your Webflow Elements
- In your Webflow project, design the cookie UI modals using div blocks, text, and buttons.
- Assign the required FS attributes to each cookie UI element using the Webflow Attribute panel.
- Example buttons:
- Accept All:
fs-cc="accept-all" - Deny All:
fs-cc="deny-all" - Open Preferences:
fs-cc="open-preferences" - Category Consent:
fs-cc-category="analytics"
- Accept All:
3. Define Cookie Categories in Webflow
- You must manually define cookie categories under the modal using Finsweet’s attribute structure.
- Basic required categories:
- Essential (required, no toggle)
- Analytics
- Marketing
- Use attributes like
fs-cc-category="analytics"andfs-cc-toggle="true"on toggles or switches.
4. Configure Scripts by Category
- Only run tracking scripts if the user consents.
- Wrap third-party scripts (e.g., Google Analytics, Facebook Pixel) inside conditional attributes:
- Add
type="text/plain"andfs-cc-category="analytics"to analytics scripts. - This prevents them from running until the user agrees.
5. Set Country Targeting Rules (Optional)
- Finsweet supports geo-based display using
fs-cc-region. - For UK users (which fall under GDPR rules), show the cookie modal explicitly.
- Add
fs-cc-region="eu"to the modal container to show to EU/UK visitors only.
6. Test in Preview and Live Environment
- Use Webflow Preview to ensure attributes are applied properly.
- Publish your site and test consent behavior:
- Accept All
- Customize Options
- Deny All
- Regional visibility (use VPN/testing tools)
7. Link to Privacy & Cookie Policy
- Ensure your cookie banner links to a full Privacy Policy and Cookie Policy.
- State:
- What data is collected
- Which cookies are used
- How users can withdraw consent
Summary
To set up a GDPR-compliant cookie consent banner in Webflow using Finsweet, embed the Finsweet script, add the proper attributes to your modal elements, configure cookie categories, and ensure scripts are conditionally loaded based on user consent. For UK users, treat GDPR rules as fully applicable and make consent explicit and granular.