Finsweet Cookie Consent for

Incredibly powerful cookie consent plugin built specifically
for Webflow

Create a custom cookie consent UI
that complies with GDPR law

Get started
finsweet cookie consent interface

Getting Started

Is it free?

Yes!

Is it easy to use?

Yes!

Does it work with Webflow?

Yes!

Does it comply with cookie laws?

Yes!

Quick overview

We use components

We build and use components that make up our cookie consent UI. They're 1000% Webflow Designer friendly.

For example, the banner someone sees when they first visit your site is a component. The popup that allows the user to customize their preferences is a component.

We apply attributes

We apply attributes to elements inside our components to give them superpowers.

For example, applying fs-cc="allow" to the button that allows all cookies - or fs-cc="close" to the button that closes the preferences popup.

We modify our script tags

We apply attributes to our script tags to identify scripts that should be turned on or off based on the user's consent selection.

For example, applying type="fs-cc" to the Google Analytics script to identify it as a cookie issuing script - as well as fs-cc-categories="analytics" to further identify it as an analytics script.

We don't touch javascript

Finsweet Cookie Consent for Webflow is 100% attribute-based. You don't have to edit a single line of javascript - only copy-paste the script file!

We attempt to make this implementation as simple and nocode as possible. If you know how to use Webflow and you know how to apply attributes, you know Finsweet Cookie Consent.

We help you understand

Our tool has education baked into it. We have walkthrough videos, a visual debugging tool, a cloneable Webflow project, "The Cookie Oven", and a big FAQ section.

We're dedicated to making you a pro at cookie consent.

Sell like an F'in boss

GDPR is confusing. Give your leads and clients peace of mind and show them how cookies are added and removed from the browser with Finsweet Cookie Consent.

Our walkthroughs show you exactly how and when cookies are added and removed. You can see it working. You can demo it. Show your leads how it works, look like an F'in boss, get the sale.

Setup

Choose the cookie option you would like to use

Cookie Option 1 - Informational cookie message

Banner component
example

'Informational message', or 'implied disclosure', is a type of cookie compliance that informs users that cookies will be used on the site.

The user does not have the option to accept or deny the cookies. The user only has the option to close the cookie banner. The banner is simply informing the user of the use of cookies on the website.

This is the most simple option to implement. It requires the least amount of steps when building a cookie bar. Understand that the user does not have access to turn on and off cookies using the 'informational message' option.

Recommended for companies that requires the more simple and base compliance. This option is not fully compliant with GDPR regulations.

Important: The preference manager does not work with this option, as there are no cookie options or preferences to manage.

Step 2.

Add attributes to important elements. For "Informational message" we are required to add two attributes.

Required: Add an attribute on the full cookie bar

Place the fs-cc="banner" on on the div that is holding the entire cookie bar.

custom <div> attributes
fs-cc="banner"

Required: Add an attribute on the "Close" button

Place the fs-cc="close" on the button/icon/element that closes the cookie bar. In this bar below, this is the "Awesome" button.

Step 3.

Add the Cookie Consent for Webflow javascript file to your page

Paste in Site Settings > Head Code. For "Informational message" the javascript file can be placed anywhere in the Head Code.

<!-- Finsweet Cookie Consent -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/cookie-consent@1/fs-cc.js" fs-cc-mode="informational"></script>

Copy here

Done. That's all you need for Option 1: Informational cookie message

Cookie Option 2 - Opt-out of cookies

Banner component
example

'Opt-out of cookies' is a type of cookie compliance that loads cookies by default on the user's first visit to the site. The user then has the option to continue browsing the site with the cookies or deny cookies.

If the user chooses the option to continue browsing with cookies, nothing happens. The user continues to use cookies.

If the user chooses to deny cookies, we remove the cookies from their browser. We allow them to continue browsing the site and disable all use of scripts that issue non-essential cookies.

This option is not GDPR compliant. For full GDPR compliance, use Option 3.

Recommended for companies concerned about EU Cookie Law, CCPA, GDPR and other privacy laws but do not need full compliance. Option 2 gives an additional layer of protection to privacy laws by allowing the user to opt-out of cookie use as well as update their preferences.

Option 2 has same implementation steps as Option 3. The key difference between Option 2 and Option 3 is when the cookies are given the user. Option 2 gives cookies on load. Option 3 gives cookies on the user's acceptance.

Step 2.

Add attributes to important elements. For "Opt-out of cookies" we are required to add three attributes.

If you copy-paste from our cloneable, you don't have to add these attributes. Our cloneable comes pre-loaded with all of the correct attributes.

Required: Add an attribute on the full cookie bar

Place the fs-cc="banner" on on the div that is holding the entire cookie bar.

custom <div> attributes
fs-cc="banner"

Required: Add an attribute on the "Allow" button

Place the fs-cc="allow" on the button/icon/element that closes the cookie bar. In this bar below, this is the "Accept All" button.

Required: Add an attribute on the "Deny" button

Place the fs-cc="deny" on the button/icon/element that closes the cookie bar. In this bar below, this is the "Deny" button.

Optional: If you are using the "Preferences" button, add an attribute on the "Preferences" button

Place the fs-cc="open-preferences" on the button/icon/element that opens the preference UI. In this bar below, this is the "Preferences" button. If you use a Preferences button, you must follow the "Preference Manager" setup.

The preferences button on the initial cookie bar is not required and is optional for cookie compliance.

Step 3.

Optional: To allow the user to change their cookie consent preferences, follow the "Preferences Manager" setup in the tabs above .

Preferences Manager is required for full compliance. However, "Option 2: Opt-out of cookies" is not fully compliant so adding the Preferences Manager will not make this implementation fully compliant.

Step 4.

Add type type="fs-cc" as an attribute to all scripts that issue cookies. Super important.

Why are we doing this?

We prevent scripts from running. In Option 3, we can not load scripts that give cookies when the site loads. Adding this attribute will prevent these scripts from loading on the page until the user specifically selects "Allow" cookies. This is required to be cookie compliant. In Option 2, adding this attribute will allow us to prevent scripts from running when the user visits a new page on the site.

Adding these attributes will tells the library which scripts to turn on and off based on the user's cookie consent selection.

Do not do this if you are using Google Tag Manager. We have a special setup unique to Google Tag Manager! Follow it here.

<noscript> tags are specifically designed to run when a user has Javascript disabled on the browser. This means that Finsweet Cookie Consent, or any javascript-based cookie consent solution, cannot interact with noscript tags. Since we can not prevent them from running, they are no GDPR compliant.

To be fully compliant, remove all <noscript> tags included in your third party scripts. See Facebook Pixel example below.

Examples of applying type="fs-cc" as an attribute

Note that Webflow's javascript color formatting goes away after we add type="fs-cc". This is intended and correct for setup. This visual is shown below.
fb script 2
<noscript> tags are not GDPR compliant, so we must remove them
fb script 1

The Cookie Oven

Is modifying script tags too much?

We thought it might be... so we made The Cookie Oven. Put your scripts in the oven, choose your options, and take out your freshly modified scripts that have the proper attributes added to them. No code ✌️
Go to the bakery

Step 5.

Add the Cookie Consent for Webflow javascript file to your page

Paste in Site Settings > Head Code. For "Opt-out of cookies" the javascript file should be placed after the last third-party script that issues cookies. For example, Cookie Consent for Webflow would be placed after Google Analytics and Facebook.

<!-- Finsweet Cookie Consent -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/cookie-consent@1/fs-cc.js" fs-cc-mode="opt-out"></script>

Copy here

Done. That's all you need for Option 2: Opt-out of cookies

Cookie Option 3 - Opt-in to cookies

Banner component
example

'Opt-in to cookies' is a type of cookie compliance that requires the user to specifically accept the use of cookies on the site before we issue cookies. There are no cookies given to the user until they click "Accept" (or similar confirmation button). This is the highest level of compliance.

If the user chooses to "Accept" cookies, we run all of the scripts that use cookies. The user continues to use the site with cookies. Understand that scripts that use cookies are not loaded on the page until the user specifically accepts the cookie message.

If the user chooses to "Deny" cookies, we allow them to continue browsing the site and disable all use of scripts that issue non-essential cookies. They are never given cookies and will continue to not get cookies throughout their time on your website.

This is required for full compliance. Recommended for companies who must be fully compliant with EU Cookie Law, CCPA, GDPR and other privacy laws.

Option 3 has similar implementation steps as Option 2. The key difference between Option 2 and Option 3 is when the cookies are given the user. Option 2 gives cookies on load. Option 3 gives cookies on the user's acceptance.

Step 2.

Add attributes to important elements. For "Opt-in to cookies" we are required to add three attributes.

If you copy-paste from our cloneable, you don't have to add these attributes. Our cloneable comes pre-loaded with all of the correct attributes.

Required: Add an attribute on the full cookie bar

Place the fs-cc="banner" on on the div that is holding the entire cookie bar.

custom <div> attributes
fs-cc="banner"

Required: Add an attribute on the "Allow" button

Place the fs-cc="allow" on the button/icon/element that closes the cookie bar. In this bar below, this is the "Accept All" button.

Required: Add an attribute on the "Deny" button

Place the fs-cc="deny" on the button/icon/element that closes the cookie bar. In this bar below, this is the "Deny" button.

Optional: If you are using the "Preferences" button, add an attribute on the "Preferences" button

Place the fs-cc="open-preferences" on the button/icon/element that opens the preference UI. In this bar below, this is the "Preferences" button. If you use a Preferences button, you must follow the "Preference Manager" setup.

The preferences button on the initial cookie bar is not required and is optional for cookie compliance.

Step 3.

Required for full compliance: In the tabs above, follow the"Preferences Manager" setup to allow the user to change their cookie consent preferences.

Preferences Manager is required for full compliance. If you are using "Option 3: Opt-in to cookies" it is recommended that you add a Preferences Manager.

Step 4.

Add type type="fs-cc" as an attribute to all scripts that issue cookies. Super important.

Why are we doing this?

We prevent scripts from running. In Option 3, we can not load scripts that give cookies when the site loads. Adding this attribute will prevent these scripts from loading on the page until the user specifically selects "Allow" cookies. This is required to be cookie compliant.

‍Adding these attributes will tells the library which scripts to turn on and off based on the user's cookie consent selection.

Do not do this if you are using Google Tag Manager. We have a special setup unique to Google Tag Manager! Follow it here.

<noscript> tags are specifically designed to run when a user has Javascript disabled on the browser. This means that Finsweet Cookie Consent, or any javascript-based cookie consent solution, cannot interact with noscript tags. Since we can not prevent them from running, they are no GDPR compliant.

To be fully compliant, remove all <noscript> tags included in your third party scripts. See Facebook Pixel example below.

Examples of applying type="fs-cc" as an attribute

Note that Webflow's javascript color formatting goes away after we add type="fs-cc". This is intended and correct for setup. This visual is shown below.
fb script 2
<noscript> tags are not GDPR compliant, so we must remove them
fb script 1

The Cookie Oven

Is modifying script tags too much?

We thought it might be... so we made The Cookie Oven. Put your scripts in the oven, choose your options, and take out your freshly modified scripts that have the proper attributes added to them. No code ✌️
Go to the bakery

Step 5.

Add the Cookie Consent for Webflow javascript file to your page

Paste in Site Settings > Head Code. For "Opt-out of cookies" the javascript file must be placed after the last third-party script that issues cookies. For example, Cookie Consent for Webflow would be placed after Google Analytics and Facebook.

<!-- Finsweet Cookie Consent -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/cookie-consent@1/fs-cc.js" fs-cc-mode="opt-in"></script>

Copy here

Done. That's all you need for Option 3: Opt-out of cookies

Add-on - Preferences Manager

Step 3.

Add type fs-cc-categories="CATEGORY" attributes to all scripts that issue cookies. This will classify a script as Marketing, Personalization, or Analytics.

fs-cc-categories="marketing"
fs-cc-categories="personalization"
fs-cc-categories="analytics"
You can apply multiple categories to a script by comma separating category names.

Like this: fs-cc-categories="analytics, marketing"

Why are we doing this?

Adding these attributes tells the library which scripts to turn on and off when the user makes their category-specific selections in the Preferences Manager.

Do not do this if you are using Google Tag Manager. We have a special setup unique to Google Tag Manager! Follow it here.
Note that Webflow's javascript color formatting goes away after we add type="fs-cc". This is intended and correct for setup.
fb script 3
<noscript> tags are not GDPR compliant, so we must remove them
fb script 1

The Cookie Oven

Is modifying script tags too much?

or do you have no idea which scripts fall under Marketing, Personalization, or Analytics????

We thought it might be... so we made The Cookie Oven. Put your scripts in the oven, choose your options, and take out your freshly modified scripts that have the proper attributes added to them. No code ✌️

AND we have a list of the most popular application scripts and which category they fall under. Tasty!
Go to the bakery

Done. That's all you need for Preference Manager

Attributes

Overview of all components, triggers, and attributes you can put throughout your cookie consent system.

Components

Component
Allowed elements
Attribute
Description
Banner
Div, Section
fs-cc="banner"
Applied to the outer parent of the entire banner element.
cookie example 3
Manager
Div, Section
fs-cc="manager"
Applied to the outer parent of the fixed cookie icon that allows the user to open preferences.
cookie preferences example
Preferences
Div, Section
fs-cc="preferences"
Applied to the outer parent of the preferences UI.
cookie settings example
Consents Form
Form
No attribute needed.

This Component can be placed inside Banner and/or Preferences.
The Form element that holds preference checkboxes. The Consents Form can be placed inside the Banner and/preferences Component.
cookie checkbox examples

Triggers for functionality

Functionality
Allowed elements
Works inside
Attribute
Description
Allow all cookies
Button, Text Link, Link Block, Div, Text Block
Banner, Preferences
fs-cc="allow"
Accepts all cookies.
Deny all cookies
Button, Text Link, Link Block, Div, Text Block
Banner, Preferences
fs-cc="deny"
Denies all cookies.
(except essential cookies)
Close
Button, Text Link, Link Block, Div, Text Block
Banner, Preferences
fs-cc="close"
Closes banner or preferences manager without making any Allow/Deny/Save selection.
Open Preferences
Button, Text Link, Link Block, Div, Text Block
Banner, Manager
fs-cc="open preferences"
Opens Preference Manager.
Marketing Toggle
Checkbox
Consents Form
fs-cc-checkbox= "marketing"
When checked, users will allow all Cookies from the marketing category.
Personalization Toggle
Checkbox
Consents Form
fs-cc-checkbox= "personalization"
When checked, users will allow all Cookies from the personalization category.
Analytics Toggle
Checkbox
Consents Form
fs-cc-checkbox= "analytics"
When checked, users will allow all Cookies from the analytics category.
Save Preferences
Submit Button, Button, Text Link, Link Block, Div, Text Block
Consents Form
fs-cc="submit"
When clicked, the new preferences from the user will be stored and the component will close.
Webflow Interaction
Div (must be set to display: none)
Banner, Manager, Preferences
fs-cc="interaction"
If this Div is placed inside the component, the script will use Webflow's Interactions to open/close it. Read Webflow Interactions for more information.

Other attributes

Use
Placed on
Attribute
Description
Identify cookie issuing scripts
<script> tag of third-party script
type="fs-cc"
Placed as an attribute on script tag.

Don't understand how to add this? Go to The Cookie Oven
Identify categories of cookie issuing scripts
<script> tag of third-party script
fs-cc-categories="marketing"
fs-cc-categories="marketing, analytics"
Placed as an attribute on script tag. Accepts:

"essential"
"marketing"
"personalization"
"analytics"

Apply multiple categories to fs-cc-categories attribute by comma separating category names.

Don't understand how to add this? Go to The Cookie Oven
Specify the cookie consent option you're using
<script> tag of the Finsweet Cookie Consent script
fs-cc-mode="opt-in"
Placed as an attribute on script tag. Accepts:

"informational"
"opt-out"
"opt-in"

Don't understand how to add this? Go to The Cookie Oven
Specify when the user's cookie consent selection expires
<script> tag of the Finsweet Cookie Consent script
fs-cc-expires="180"
Placed as an attribute on script tag. Accepts any number:

fs-cc-expires="NUMBER_OF_DAYS"

Default is 180 days. Using "30" as the values would make the user's select expire in 30 days.

Don't understand how to add this? Go to The Cookie Oven
Disable scroll
On the Banner or Preferences component.
fs-cc-scroll="disable"
If placed on the Banner component, the body locks and page scrolling is disabled when the Banner is visible.

If placed on the Preferences component, the body locks and page scrolling is disabled when Preferences are visible.
Visual debug tool when something isn't working
<script> tag of the Finsweet Cookie Consent script
fs-cc-debug="true"
FOR TESTING ONLY. NOT FOR LIVE PRODUCTION WEBSITE.

We built a visual debugging tool that notifies you of missing elements and common mistakes implementing Finsweet Cookie Consent.
cookie alert example
Don't understand how to add this? Go to The Cookie Oven
POST consent to API endpoint
<script> tag of the Finsweet Cookie Consent script
fs-cc-endpoint="URL"
Optionally send consents to an API endpoint, so you can store consent records in your database. More information here.

Google Tag Manager setup

If you are using Google Tag Manager, follow these instructions.

DO NOT set your GTM script to type="fs-cc". DO NOT add any attributes to the GTM script tag.

Add your category tags as custom events inside GTM dashboard. Do this for each script in GTM that issues cookies. Below is a a step-by-step visual of all the steps you must take.

Steps

1. Click Triggers > New.

See the visual

2. Click Trigger Configuration and choose the Custom Event trigger type.

See the visual

3. Add the script's category as the Event name and Event equals Category tag and save your changes

essential-activated
marketing-activated
analytics-activated
personalization-activated
See the visual

4. Bind the Trigger with a Tag from the same category and submit your changes

See the visual

Important:

Make sure you understand when you're using Google Tag Manager and when you're not. Google's naming convention is not as clear as it should be.

This is not Google Tag Manager, even though the script file uses the words googletagmanager.com
ga script example 2
This is Google Tag Manager!
cookie gtm script example

Important:

Make sure you are not using <noscript> tags. Ignore this step in the GTM directions to be compliant with GDPR

Make sure you do not add the <noscript> tag as instructed by Google. <noscript> is not GDPR compliant.
noscript example

Storing consent records

For super cookie consent GDPR compliance.

This is not required for all countries. Most websites do not have this this level of compliance. However, storing consent records is mandatory for some countries under GDPR.

Some countries require you to keep clear records of consent and be able to demonstrate that the user has given consent. Our library offers the option to send consents to an API endpoint, so you can store them in your database.

Use our pre-made Cloudflare solution to store consent records

Steps

1. Sign up for a free Cloudflare account

See the visual

2. Create a 'KV' from the 'Workers' section

See the visual
You can name the 'KV' anything you want.

3. Create a new 'Worker'

See the visual
Delete this boilerplate code.
Add this code.
https://cdn.jsdelivr.net/gh/finsweet/cookie-consent-worker@1/worker/script.js
You can name the 'Worker' anything you want.

4. Bind the 'Worker' with the 'KV'

See the visual
Select Settings in the 'Worker' dashboard.
Add "CONSENTS" in the Variable name field, in all CAPS.
Next, select the 'KV' you just created.

5. Add the endpoint given to you by Cloudflare as an attribute on the Finsweet Cookie Consent script

See the visual
1) Open the endpoint URL in a new tab.
2) Copy the endpoint URL from the new tab.
3) Paste the endpoint URL in Webflow Project Settings.
fs-cc-endpoint="[your Cloudflare endpoint]"

Use your own API endpoint to store consent records

Use the fs-cc-endpoint attribute to make a POST request

If fs-cc-endpoint="URL" is set, the library will make a POST request to the endpoint every time a user allows / denies / updates the consent. The request is done with the following payload:
https://cdn.jsdelivr.net/gh/finsweet/cookie-consent-worker@1/src/utils/types.d.ts
Make sure you also store the following information for GDPR compliance:
Property
Description
Anonymized IP
The user's IP with the last digit replaced with a 0 to maintain anonymity.
Timestamp
The date and time when you store the consent.
For how long? Nobody knows exactly, but many consider that 2 years is a safe bet.

Using Webflow Interactions

Optional custom animations for all Banner, Manager, and Preferences components.

Finsweet Cookie Consent integrates with Webflow Interactions. This is optional and only should be used if you want custom in/out animations for your Banner, Manager, and Preferences popup.

If custom animation for your cookie consent system is not important, you do not need to use Webflow Interactions and you can ignore this section. Our library comes with simple fade-in and fade-out ease effects by default.

Steps

1. Add a Div inside the Component you want animated

2. Give this Div a unique class and give it a style of display:none

3. Add the attribute fs-cc="interaction" to the Div

4. Add a Mouse click (tap) interaction to this Div

5. Add a "On first click" animation that shows this element. Add a "On second click" animation that hides this element

6. In "Trigger settings" make sure "Class" is selected

Important: Only set the Webflow click interaction to the hidden div trigger! Do not put this interaction to any other element (like the buttons). Finsweet Cookie Consent will programmatically click this hidden Div when needed and fire the correct Webflow Interaction.

Debug tool

When you mess up, we got you.

When you want to look like a pro with your clients, we got you.

Console errors are hard to understand. Console > Application is hard to understand. So we built our own designer-friendly visual debugging tool. See your cookie consent system working (or not working!).

See the Finsweet Cookie Consent working in real-time as you test. Get alerts when there are errors in your setup or missed attributes on elements. If something is wrong, we'll let you know.

Add fs-cc-debug="true" as an attribute on the Finsweet Cookie Consent library script tag

<!-- Finsweet Cookie Consent -->
<script async src="https://cdn.jsdelivr.net/npm/@finsweet/cookie-consent@1/fs-cc.js" fs-cc-mode="opt-in" fs-cc-debug="true"></script>

Copy here
Don't understand how to do this? Go to The Cookie Oven

Important: Do not use debug mode on your live site. This is only for testing, building, and showing off to your clients. Make sure to remove the attribute when you go live.

Webflow implementation video tutorials

We are working hard to record visual documentation of this entire page. Walkthroughs, explanations, and visuals are actively being prepared for you.

Give us a few weeks to record, edit, and produce videos for you. Thanks!
coming soon video
coming soon video
coming soon video
coming soon video
coming soon video
coming soon video
coming soon video
coming soon video

Examples and a hot cloneable

cookie consent example 2cookie consent example 3cookie consent example 4cookie consent example 5

Cookie consent education

Take 10 minutes to read this. Imagine... in 10 minutes from now, you'll be smarter than you are right now.

How does this comply with EU Cookie Law, CCAP, GDPR and other privacy laws?

Finsweet Cookie Consent gives you the tools you need to fully comply with privacy laws.

  • Scripts that issue cookies are not loaded on page until a visitor accepts cookies
  • Visitors are clearly presented with a link to the privacy policy
  • Visitors are clearly given the option to accept or deny cookies
  • Visitors are clearly given the option to accept or deny cookies by category
  • Visitors are clearly given the option to access and change their consent selection after their original selection
  • You have the option to store cookie consent selections on a server

What is 'information message'? (Option 1)

'Informational message', or 'implied disclosure', is a type of cookie compliance that informs users that cookies will be used on the site. The user does not have the option to accept or deny the cookies. The user only has the option to close the cookie bar. The bar is simply informing the user of the use of cookies on the website.

This is the most simple option to implement. It requires the least amount of steps when building a cookie bar. Understand that the user does not have access to turn on and off cookies using the 'informational message' option. The preference manager does not work with this option, as there are no cookies or preferences to manage.

What is 'opt-out of cookies'? (Option 2)

'Opt-out of cookies' is a type of cookie compliance that loads cookies by default on the user's first visit to the site. The user then has the option to continue browsing the site with the cookies or deny cookies.

If the user chooses the option to continue browsing with cookies, nothing happens. The user continues to use cookies.

If the user chooses to deny cookies, we remove the cookies from their browser. We allow them to continue browsing the site and disable all use of scripts that issue non-essential cookies.

Important: Option 2 requires using <text-tag>type="fs-cc"<text-tag> on your scripts that issue cookies.

Option 2 has same implementation steps as Option 3. The key difference between Option 2 and Option 3 is when the cookies are given to the user. Option 2 gives cookies on load. Option 3 gives cookies on the user's acceptance.

What is 'opt-in to cookies'? (Option 3)

'Opt-in to cookies' is a type of cookie compliance that requires the user to specifically accept the use of cookies on the site before we issue cookies. There are no cookies given to the user until they click "Accept" (or similar confirmation button). This is the highest level of compliance.

If the user chooses to <text-tag>"Accept"<text-tag> cookies, we run all of the scripts that use cookies. The user continues to use the site with cookies. Understand that scripts that use cookies are not loaded on the page until the user specifically accepts the cookie message.

If the user chooses to <text-tag>"Deny"<text-tag> cookies, we allow them to continue browsing the site and disable all use of scripts that issue non-essential cookies. They are never given cookies and will continue to not get cookies throughout their time on your website.

Be aware: Choosing Option 3 will not report accurate website visitor information. If a user visits your website, and chooses to "Deny" cookies, Google Analytics (and other user tracking scripts) will not be loaded to the page. This user would not count as a visitor on your website.

Important: Option 3 requires using <text-tag>type="fs-cc"<text-tag> on your scripts that issue cookies. See How it works section for more information.

Option 3 has the same implementation steps as Option 2. The key difference between Option 2 and Option 3 is when the cookies are given the user. Option 2 gives cookies on load. Option 3 gives cookies on the user's acceptance.

Which option do I need?

This depends on your location, website, users, and how much you or your client is concerned with cookie compliance.

Many websites use Option 1. This requires the more simple and base compliance.

Companies concerned about EU Cookie Law, CCPA, GDPR and other privacy laws often choose Option 2 or 3. This gives an additional layer of protection to privacy laws by allowing the user to opt-out of cookie use.

If you or your client want the highest level of compliance, Option 3 + Preference Manager is the highest level of compliance.

If you are unsure, please consult a legal professional.

Do I need the Preference Manager?

To be fully compliant with cookie consult laws, yes.

In Option 1, you can not use the Preference Manager. There are no preferences stored and nothing for the user to change. Therefore, there is no need for a Preference Manager.

In Option 2 or 3, you can use the Preference Manager to allow the user to change their cookie preference selections. If a user selects <text-tag>"Accept"<text-tag> or <text-tag>"Deny"<text-tag> in the initial cookie bar message, they can later change their selected option. The ability for the user to change their cookie preferences is required to be fully cookie consent compliant.

Additionally, you can give the user the options to turn on or turn off marketing, personalization, and analytics-based cookies. This gives your users a further layer of cookie preference control.

Essential vs. Marketing vs. Personalization vs. Analytics

Essential cookies

These items are required to enable basic website functionality.

Examples of non-essential cookies:

  • The cookie we give the user to remember their cookie preferences

Marketing cookies

These items are used to deliver advertising that is more relevant to you and your interests. They may also be used to limit the number of times you see an advertisement and measure the effectiveness of advertising campaigns. Advertising networks usually place them with the website operator’s permission.

Examples of marketing cookies:

  • Facebook
  • Twitter

Personalization cookies

These items allow the website to remember choices you make (such as your user name, language, or the region you are in) and provide enhanced, more personal features. For example, a website may provide you with local weather reports or traffic news by storing data about your current location.

Examples of personalization cookies:

  • Weglot

Analytics cookies

These items help the website operator understand how its website performs, how visitors interact with the site, and whether there may be technical issues. This storage type usually doesn’t collect information that identifies a visitor.

Examples of analytics cookies:

  • Google Analytics

How does this tool work? (full explanation)

By preventing the scripts from running on page load (by setting the <text-tag>type="fs-cc"<text-tag> attribute to them), we can have control over them and choose when should they run.

The FsCC library lets you set up different components where the users can accept, deny or granularly choose what categories of scripts they allow to run.

  • First, the library checks if the visitor is a Bot or a user with DoNotTrack settings to prevent from displaying the components to them.
  • When loaded, the library looks for all the scripts that are set to <text-tag>type="fs-cc"<text-tag> and stores them by category.
  • It checks if the user has previously confirmed his consents. If so, it pulls the consents from the user's cookies and runs the scripts that are allowed by switching their type to <text-tag>type="text/javascript"<text-tag>. The state of all the scripts is tracked to avoid running them more than once.
  • If the user hasn't confirmed his consents in the past, the library displays the Banner component, where the user can give his consent.
  • Once the user gives his consents, the following actions happen:
  • <trigger-bullet-1>The consents are stored in a cookie so we can retrieve them in the future. The max-age of this cookie can be modified.<trigger-bullet-1>
  • The library runs the allowed scripts.
  • A GTM event is pushed to the data layer for every accepted category (only once for each)
  • A POST request is made to the API endpoint with the necessary information to store the record:
  • <trigger-bullet-2>Unique Universal Identifier for the consent.<trigger-bullet-2>
  • The performed action (allow all, deny all or submit choices).
  • The consented categories.
  • The text that is displayed in the <text-tag>Banner<text-tag> component.
  • The URL where the user is located and his device.
  • The banner closes and the <text-tag>Manager<text-tag> component is displayed, allowing the users to open the <text-tag>Preferences<text-tag> component at any time.
  • Every time the user makes any change about his consents, all the cookies of the site (except the <text-tag>HttpOnly<text-tag> ones) are removed before loading the correspondent scripts. Also a new POST request is performed to the API.
  • All components go through an accessibility check before being mounted, making sure Keyboard Navigation users can navigate through them and Screen Readers can identify them.
  • All components have built in animations for showing/hiding them, but custom Webflow Interactions can also be used.
  • If <text-tag>debugMode<text-tag> is activated, every action, warning and error that happens under the hood will be displayed as a floating card.
  • When the mode is set to be <text-tag>informational<text-tag> or <text-tag>opt-out<text-tag>, all consents are allowed by default, thus the scripts will always run unless the user denies them.
  • The library provides a Javascript API with methods and events that allow developers to extend its functionalities.

Does Finsweet Cookie Consent for Webflow hurt my website performance?

The short answer, no.

The explanation: Most of the other cookie consent solutions force to load their script in the <text-tag><head><text-tag> before any other script on the page has run. This is done so they can programmatically block the correspondent scripts if needed. This increments the loading speed of the pages, because loading their cookie consent blocks the main thread and does not let the rest of the page to be rendered.

Our solution is imported with an async attribute and is loaded in the background without blocking the page rendering. Because we ask the users to set the <text-tag>type="fs-cc"<text-tag> to the scripts, we don't need our solution to strictly run before those. By doing this, our solution is more performance friendly than other cookie consent solutions.

How do I make my Webflow Forms GDPR compliant?

Webflow Forms are not GDPR compliant because they process data on US-based servers.

Check out free/paid services of cookie consent leaders, Iubenda

https://www.iubenda.com/en/consent-solution

How to make my Privacy Policy GDPR compliant?

According to the GDPR, organizations must provide people with a privacy notice that is:

  • In a concise, transparent, intelligible, and easily accessible form
  • Written in clear and plain language, particularly for any information addressed specifically to a child
  • Delivered in a timely manner
  • Provided free of charge

If an organization is collecting information from an individual directly, it must include the following information in its privacy notice:

  • The identity and contact details of the organization, its representative, and its Data Protection Officer
  • The purpose for the organization to process an individual’s personal data and its legal basis
  • The legitimate interests of the organization (or third party, where applicable)
  • Any recipient or categories of recipients of an individual’s data
  • The details regarding any transfer of personal data to a third country and the safeguards taken
  • The retention period or criteria used to determine the retention period of the data
  • The existence of each data subject’s rights
  • The right to withdraw consent at any time (where relevant)
  • The right to lodge a complaint with a supervisory authority
  • Whether the provision of personal data is part of a statutory or contractual requirement or obligation and the possible consequences of failing to provide the personal data
  • The existence of an automated decision-making system, including profiling, and information about how this system has been set up, the significance, and the consequences

Get a free downloadable template for a GDPR compliant Privacy Policy.

How does Webflow process user data and form submissions?

Why are we adding type="fs-cc" to scripts? This seems weird and unconventional.

This will prevent the scripts from loading when a user visits your website. This is required for cookie compliance. A user must explicitly allow or accept cookie usage before we load scripts that issues cookies. Adding a custom type value (fs-cc) will prevent the script from loading because the browser will not recognize it as javascript.

Finsweet Cookie Consent for Webflow will programmatically run the script, or prevent the script from running, based on the user's cookie consent preferences.

Are noscript tags GDPR and CCPA compliant?

No! The <text-tag><noscript><text-tag> tags are specifically designed to run when a user has Javascript disabled on the browser. This means that Finsweet Cookie Consent, or any javascript-based cookie consent solution, cannot interact with noscript tags. Since we can not prevent them from running, they are no GDPR compliant.

To be fully compliant, remove all <text-tag><noscript><text-tag> tags included in your third party scripts. For example, the <text-tag><noscript><text-tag> tag in the Facebook Pixel must be removed.

Dev flex

Well deserved bragging from our technical development team

100% written in Typescript.

Easy to set up by non-technical users without Javascript knowledge.

Extensible Javascript API for developers.

Developer documentation available.

Small and performant. Just 7.6 KB gzipped!

Debug mode for easily fixing issues.

Fully accessible!

About Finsweet

Finsweet Cookie Consent for Webflow is created and maintained by Finsweet.

Finsweet is a Webflow-exclusive development company that makes badass products and tools for the Webflow community.

sweet js logo

THIS TOOL IS NOT SUPPORTED UNDER SWEET JS SUPPORT.

DEBUG MODE WILL HELP YOU UNDERSTAND ISSUES AND HOW TO FIX THEM.

Hey! We're Finsweet! The creators of Cookie Consent for Webflow, and Sweet JS! We will offer absolutely no support for Finsweet Cookie Consent for Webflow due to legal reasons. We have created this tool for you to use and a debug mode to automate bug fixes.

Finsweet News

Stay updated with product releases, product updates, Webflow cloneables, and lots more!

Get notified instantly

Receive a monthly summary

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Send feedback to Finsweet
Thank you!

Maybe we will respond to you, maybe we won't.

We are taking in all feedback and making adjustments to the documentation as needed.

If this is a serious and urgent issue, please contact communications@finsweet.com
Oops! Something went wrong while submitting the form.