How to add an attribute:

close icon
Hey! Give us some feedback here.
collapse all icon
Collapse All

Cookie Consent

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!

Get Started

0

loads per month

Cookie Consent
Script
Documentation
Examples
FAQ
API
Tutorial
Cloneable
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Scroll horizontally to see documentation
Step #2

Implement in Webflow Applying attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

Setup option 1 — Informational cookie message

'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 require basic 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.

Required for minimum setup

Below is a list of the Attributes that are required for this option.

navigator arrow
Banner
This
div block icon

Div Block

is my cookie consent banner wrapper
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cc
copy icon
Value
banner
copy icon
Check live example here
Place the fs-cc="banner" on the div that is holding the entire cookie bar.
how to add cms filter list attribute
navigator arrow
close button
I want this
div block icon

Button, Icon or Element

to close the cookie back
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cc
copy icon
Value
close
copy icon
Place the fs-cc="close" on the button/icon/element that closes the cookie bar. In the bar below, this is the "Awesome" button.
how to add cms filter list attribute

Setup option 2 — Opt-out of cookies

'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 the 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.

Required for minimum setup

Below is a list of the Attributes that are required for this option.

navigator arrow
Banner
This
div block icon

Div Block

wraps cookie consent bar
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cc
copy icon
Value
banner
copy icon
Check live example here
Place the fs-cc="banner" on the div that is holding the entire cookie bar.
how to add cms filter list attribute
navigator arrow
Allow
I want
div block icon

Button, Icon or element

to be my "Accept All" button
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cc
copy icon
Value
allow
copy icon
Check live example here
Place the fs-cc="allow" on the button/icon/element that accepts all of the cookies and closes the cookie bar. In the bar below, this is the "Accept All" button.
how to add cms filter list attribute
navigator arrow
Deny
I want this
div block icon

Button, Icon or Element

to be my "Deny" button
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cc
copy icon
Value
deny
copy icon
Place the fs-cc="deny" on the button/icon/element that closes the cookie bar and rejects all of the cookies. In the bar below, this is the "Deny" button.
how to add cms filter list attribute
navigator arrow
Type
I want this
div block icon

Script

to issue cookies
See how it works
see webflow attributes
Add this attribute
Description
Name
type
copy icon
Value
fs-cc
copy icon
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 tell 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. (<- we need an anchor link to GTM setup)

<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 the Facebook Pixel example below.
how to add cms filter list attribute
navigator arrow
Option
Preferences
I want to add a preferences button
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cc
copy icon
Value
open-preferences
copy icon
Place the fs-cc="open-preferences" on the button/icon/element that opens the preference UI. In the 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.
how to add cms filter active attribute

Setup option 3 — Opt-in to cookies

'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 a 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 to the user. Option 2 gives cookies on load. Option 3 gives cookies on the user's acceptance.

Required for minimum setup

Below is a list of the Attributes that are required for this option.

navigator arrow
Banner
This
div block icon

Div Block

wraps cookie consent bar
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cc
copy icon
Value
banner
copy icon
Check live example here
Place the fs-cc="banner" on the div that is holding the entire cookie bar.
how to add cms filter list attribute
navigator arrow
Allow
I want
div block icon

Button, Icon or element

to be my "Accept All" button
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cc
copy icon
Value
allow
copy icon
Check live example here
Place the fs-cc="allow" on the button/icon/element that accepts all of the cookies and closes the cookie bar. In the bar below, this is the "Accept All" button.
how to add cms filter list attribute
navigator arrow
Deny
I want this
div block icon

Button, Icon or Element

to be my "Deny" button
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cc
copy icon
Value
deny
copy icon
Place the fs-cc="deny" on the button/icon/element that closes the cookie bar and rejects all of the cookies. In the bar below, this is the "Deny" button.
how to add cms filter list attribute
navigator arrow
Type
I want this
div block icon

Script

to issue cookies
See how it works
see webflow attributes
Add this attribute
Description
Name
type
copy icon
Value
fs-cc
copy icon
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 tell 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 the Facebook Pixel example below.
how to add cms filter list attribute
navigator arrow
Option
Preferences
I want to add a preferences button
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cc
copy icon
Value
open-preferences
copy icon
Place the fs-cc="open-preferences" on the button/icon/element that opens the preference UI. In the 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.
how to add cms filter active attribute

Preferences Manager

Add-on for option 2 and option 3

navigator arrow
Option
Preferences
I want to add a preferences button
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cc
copy icon
Value
open-preferences
copy icon
Place the fs-cc="open-preferences" on the button/icon/element that opens the preference UI. In the 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.
how to add cms filter active attribute

More attributes to use

Below is a list of Attributes that can help you customize your filter system.

navigator arrow
Option
categories
I want to dentify categories of cookie issuing scripts
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cc-categories
copy icon
Value
marketing
copy icon
Placed as an attribute on the script tag.

Accepts:
"essential"
"marketing"
"personalization"
"analytics"
Where?
<script> tag of third-party script
Name
fs-cc-categories
copy icon
Value
marketing,analytics
copy icon
Apply multiple categories to fs-cc-categories attribute by comma separating category names.
Where?
<script> tag of third-party script
how to add cms filter active attribute
navigator arrow
Option
opt-in
I want to specify the cookie consent option you're using
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cc-mode
copy icon
Value
opt-in
copy icon
Placed as an attribute on the script tag.

Accepts:
"informational"
"opt-out"
"opt-in"
Where?
<script> tag of the Finsweet Cookie Consent script
how to add cms filter active attribute
navigator arrow
Option
cookie expiration
I want to specify when the user's cookie consent selection expires
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cc-expires
copy icon
Value
NUMBER_OF_DAYS
copy icon
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.
Where?
<script> tag of the Finsweet Cookie Consent script
how to add cms filter active attribute
navigator arrow
Option
debug tool
I want to debug my Cookie Conset implementation
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cc-debug
copy icon
Value
true
copy icon
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.
Where?
<script> tag of the Finsweet Cookie Consent script
how to add cms filter active attribute
navigator arrow
Option
API
I want to POST consent to API endpoint
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cc-endpoint
copy icon
Value
URL
copy icon
Optionally send consents to an API endpoint, so you can store consent records in your database.
Where?
<script> tag of the Finsweet Cookie Consent script
how to add cms filter active attribute
navigator arrow
Option
fetch somponents from other page
I want to dynamically load components from a different page
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cc-source
copy icon
Value
URL
copy icon
If set, the components (Banner, Manager and Preferences) will be fetched from the specified URL and rendered to the current page. This way, you won't have to manually place them into each single page of the website.

Accepts both absolute URLs
‍
fs-cc-source="https://example.com/components"
‍
and relative paths

fs-cc-source="/components"
Where?
<script> tag of the Finsweet Cookie Consent script
how to add cms filter active attribute
navigator arrow
Option
display Property
I want to change my banner's properties
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cc-display
copy icon
Value
PROPERTY_NAME
copy icon
If this attribute is set and no interaction is used for displaying the component, the default fade animation will set this display property.
‍
Avaiable properties are: block, flex, grid, inline-block, inline.
‍
Defaults to flex.
Where?
On the Banner, Manager and Preferences components
how to add cms filter active attribute
navigator arrow
Option
disable scroll
I want to disable scroll
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cc-scroll
copy icon
Value
disable
copy icon
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.
Where?
On the Banner, Manager and Preferences components
how to add cms filter active attribute
navigator arrow
Option
domain
I want to modify the domain target when storing Consents Cookies
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-cc-domain
copy icon
Value
DOMAIN_NAME
copy icon
Allows subdomain.example.com to store the Consent Cookie at domain level using fs-cc-domain="example.com".

The cookie will be set using example.com instead of subdomain.example.com.
Where?
<script> tag of the Finsweet Cookie Consent script
how to add cms filter active attribute

Frequently Asked Questions

Everything you need to know about this attributes solution.

No items found.

Developer documentation

Check the dev documentation
external link icon

Next time implement inside Webflow

Use Finsweet Extension
external link icon
Automated Support

Need more help? Use the Automated Support

Help yourself in minutes. Don't wait hours or days for support.

Subscribe

Sign up for future releases!

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