Documentation
Cookie Consent
Get the App
Watch a quick tutorial
CONSENT PRO DOCS

The ultimate FAQ and practical guide for Consent Pro

Watch Tutorial
Watch Migration Tutorial

Consent Pro is designed to help with GDPR compliance related to user consent for cookies and website tracking. However, full GDPR compliance also depends on factors such as server locations and data processing, which remain your responsibility. This tool does not provide legal services. For specific compliance needs, please consult a lawyer.

About Components and styles

Note: Consent Pro is the standalone successor to the Cookie Consent solution previously included in Finsweet Components. You may still encounter mentions of “Cookie Consent” or “Components” in the screenshots of this documentation, but they remain accurate and applicable for following the tutorial.

Do not remove the Attributes. They are required to make the Consent Pro solution work.

Do not remove the attributes added to generated elements. If they are removed, the Solution will stop working.

Do not move the elements outside the fs-consent_component wrapper.

To keep the app functionality and edit mode working, keep all elements of the Consent Pro component inside the fs-consent_component element that wraps all Consent Pro elements.

Do not export the code and host the website on an external server.

Currently, Webflow still doesn't allow us to export the website code with the script generated by our app needed to make the components work. In this case, if you export the code from Webflow and host your website on your own server, Consent Pro will not function.

You can style and customize the Consent Pro Component however you want.

Use the Webflow style panel to customize your Consent Pro elements however you want. Use the Webflow Style panel just like any element inside Webflow.

Use the Global Banner option if you want to have one Consent Pro Component in your project and load it on every page.

Global Banner will take one Consent Pro component and load it on every page of your project. Banners, preferences, and consent UI elements will work on every page of your project with Global Banner.

The 'Global Banner' option is incompatible with Webflow Localization. To translate the Consent Pro banner, uncheck 'Use Global Banner' and add the banners manually and set it up for each Locale. For more details, see How to Use Webflow Localization.

Use the open-preferences attribute to any element to make it a "Open Preferences Panel" button.

Use a text link, div block, or image act as the trigger to open the preferences panel. It's common to add a "Open Preferences" button in the footer of your website so a user can access their preferences on any page of the website. Add the attributefs-consent-element = "open-preferences" to any element to make it a trigger.

Use the placeholder attribute on a div block to serve as a placeholder.

Use the attribute fs-consent-element="placeholder" on a div block with a message indicating that a video, map, or embedded content is blocked until the user consents. The placeholder will be displayed when the page loads and will be removed once the user accepts cookies.

See the documentation below for instructions on using placeholders with embedded videos and Google Maps:

Embed Videos
Embed Maps

Set the banner to display: none to avoid flashing when the page loads.

If you notice the Cookie Consent banner flashing when the page loads, you can select the banner element and set its display to none to hide it initially. This will prevent the flashing issue during page load.

About scripts and how the solution works

You must update each script in your project when using Full Setup.

We must be able to load and not load scripts on your website based on a user's consent preferences. For Consent Pro to block the scripts before the user's decision, you to update each cookie-issue script in your project. The Scripts tab in the Consent Pro App will help you through this process.

Scripts categorized as "Essential" will always load for the user.

Only categorize a script as essential if you are sure this script is necessary for the essential functionality of the website and does not collect user data. Examples of essential scripts are:

  • ‍Authentication Scripts: Used for login and user authentication processes to ensure secure access to user accounts.‍
  • Security Scripts: Protect the website from malicious activities, such as scripts for web application firewalls and bot detection.‍
  • Payment Processing Scripts: Required for secure payment transactions and to comply with PCI DSS (Payment Card Industry Data Security Standard) without storing personal payment data unnecessarily.
  • ‍Accessibility Scripts: Improve the accessibility of the website for users with disabilities, such as scripts for screen readers or keyboard navigation enhancements.

Examples of scripts usually categorized as "Marketing".

Scripts categorized as marketing typically involve tracking and analyzing user behavior to optimize advertising efforts and engage with users more effectively. Examples of such scripts include:

  • ‍Tracking Pixels: Track user interactions across websites (e.g., Facebook, Google Ads).
  • ‍Advertising Tags: Load ads from ad networks (e.g., Google AdSense, DoubleClick).
  • ‍Retargeting Scripts: Show ads to users who have previously visited the site (e.g., AdRoll, Criteo).
  • ‍Social Media Integration Scripts: Enable social media features and track interactions (e.g., Facebook SDK, Twitter pixel).
  • ‍Email Marketing Scripts: Track email campaign engagement (e.g., Mailchimp, HubSpot).

Examples of scripts usually categorized as "Personalization".

Scripts categorized as personalization typically enhance user experience by customizing content based on individual preferences and behaviors. Examples include:

  • ‍Recommendation Engines: Suggest personalized content or products (e.g., Amazon product suggestions).
  • ‍Dynamic Content Scripts: Adjust website content in real-time based on user behavior (e.g., personalized homepage banners).
  • ‍User Preference Scripts: Save and apply user settings and preferences (e.g., language selection, theme settings).
  • ‍Location-Based Personalization: Offer content relevant to the user's geographic location (e.g., local news, weather updates).
  • ‍A/B Testing Scripts: Test and personalize different website versions for user segments (e.g., Optimizely, VWO).

Examples of scripts usually categorized as "Analytics".

Scripts categorized as analytics typically collect and analyze data on user behavior to improve website performance and user experience. Examples include:

  • ‍Tracks website traffic and user behavior (e.g, Google Analytics).
  • ‍Records user sessions and heatmaps (e.g, Hotjar).

You can translate or change the name of categories by updating the text field in Webflow.

It is required to keep the categories set in Consent Pro. However, the plain-text name on the front-end can be updated. For example, "Analytics" can be updated to "Analytik" by changing the text in Webflow Designer. Behind the scenes, Consent Pro reads "Analytics."

After updating the script, it will look disabled. That's fine.

After updating the scripts, they will look like this. They will have a different color and lose highlighting. We are literally 'turning off' the script to make sure it doesn't run until the user consents to it.

Make sure you don’t have scripts duplicated in the project settings and the page settings.

Duplicated scripts in both the project settings and the page settings can cause problems. We recommend managing all scripts that issue cookies in the custom code section of the site settings.

Do not use Google Analytics and Meta Pixel options 'App & Integrations' tab.

When Analytics and Meta Pixel are added in the 'App & Integrations' tab, we cannot prevent them from loading. These scripts will load without user consent, which is not GDPR compliant. Please add the full code snippet to the custom code section of the site settings.

If you use Google Tag Manager to add your scripts, you will need to do a manual setup.

Follow the tutorial below to learn how to add the scripts using Google Tag Manager:

Watch Tutorial

If you use Webflow Localization, do not select the 'Global Banner' option.

It is not possible to translate the Consent Pro banner using the 'Global Banner' option. If you want to use Webflow Localization, make sure to add the Consent Pro component manually to all pages. For more details, see the How to Use Localization documentation below:

How to use Localization

About GDPR & Compliance

The most compliant solution is the Full Setup with preferences panel and Opt-in method.

The required configs to make your website fully GDPR compliant are indicated with this green icon below:

Storing consents is required for a fully GDPR-compliant website.

Storing consents is essential for GDPR compliance as it provides proof of user consent, ensures accountability, and helps manage user rights regarding their data. It supports transparency by maintaining records of what users have agreed to, and is necessary for responding to regulatory audits or legal disputes. Properly stored consents also facilitate updates and management of user preferences, demonstrating the organization's commitment to data protection and privacy

Not all websites require this level of GDPR compliance. Compliance and regulations are based on country and the location of users accessing your website. Follow the tutorial below to learn how to store consents:

Watch Tutorial

Integrating Webflow's Analyze and Optimize features to comply with data laws

Webflow Analyze and Optimize track what visitors do on your site. Finsweet Consent Pro offers users a consent banner to select their tracking preferences. We've built an integration to use Consent Pro as the UI for Webflow Analyze and Optimize user preferences.

To integrate Consent Pro with the Analyze and Optimize features in the Insights panel, follow the tutorial below:

Watch Tutorial

YouTube videos are not GDPR compliant. Make sure to use embedded iFrames to give users control.

If you embed YouTube videos using Webflow's native video element on your page, personal data of the user is automatically passed on to YouTube and its parent company, Google, as soon as the user visits your website. To prevent this, we recommend using a code embed element. Please check the documentation below:

Learn how to embed videos

Webflow's map is not GDPR compliant. Use embedded Google Maps to give users control.

Webflow's native map element automatically transfers personal data to third parties like Google without user consent. To ensure privacy and give users control over their data, it's recommended to use embedded Google Maps. Please check the documentation below:

Learn how to embed maps

Google Fonts loaded from Google's API are not GDPR compliant. Make sure to use them locally.

Google Fonts, when loaded directly from Google's API, can lead to the automatic transfer of user data to Google servers without consent, violating GDPR regulations. To ensure compliance and protect user privacy, it is recommended to download the fonts and host them locally on Webflow. Please check the documentation below:

Learn how to use Google Fonts

Webflow's native reCaptcha is not GDPR compliant. Add it manually to ensure compliance.

Webflow's native reCaptcha is not fully GDPR compliant because it automatically collects user data (like IP addresses and behavior) without explicit consent. To ensure compliance and protect user privacy, it's recommended to add it manually to your forms following the guide below:

Learn how to use reCaptcha

<noscript> tags are not Consent Pro compliant. Make sure to remove them.

All <noscript> tags run even if JavaScript is disabled. This undermines the purpose of Consent Pro and GDPPR compliance by potentially allowing the collection of user data without proper consent. It is required to remove all <noscript> tags from your website.

How to Configure Consent Pro in opt-out mode?

Configure Consent Pro in opt-out mode using the Google Tag Manager template. Opt-out is not compliant with GDPR, which requires opt-in to be turned on by default. Opt-out is compliant with some other regulations such as California's CCPA.

Prerequisites

  • Update to the latest Consent Pro GTM template. If you already have an older template installed in GTM (including any previous Cookie Consent or Consent Pro templates), remove it and import the new one. The opt-out control is only available in the latest template.

Import the template in GTM

  1. Download the Consent Pro GTM template (latest).
  2. In GTM → Templates, remove any previous Consent Pro or Cookie Consent template.
  3. Import the new template file you just downloaded.

‍

Switch the Consent Initialization tag to opt-out

You likely already have the Consent Initialization tag in place from the standard (opt-in) setup.

Change a single setting to turn it into opt-out:

Open your Consent Initialization tag (created from the Consent Pro template).

  1. In Select category, choose CCPA instead of GDPR. This selection enables the opt-out mode. If you turn it back to GDPR, you're re-enabling opt-in
  2. Save your changes and Publish the GTM container.

‍

Configure downstream tags (example: Analytics)

After switching to opt-out, configure your tags (Analytics, Marketing, etc.) to respect consent. Rely on consent signals, and optionally combine them with Consent Pro’s custom events.

Important: Tags must not fire on the custom event alone. Always include consent checks.

You have two valid options for an Analytics tag trigger:

  • Option A — Consent only
    Fire the tag only when analytics_storage is granted.
  • Option B — Consent + event
    Fire the tag only when analytics_storage is granted and the analytics-activated event has fired.

Do not configure an Analytics tag to fire only on the analytics-activated event. It must include a consent check (analytics_storage) — either alone (Option A) or combined with the event (Option B).

Apply the same pattern to other categories (for example, marketing_storage) using their corresponding consent checks and, if useful, the matching custom events.

‍

Publish

Once your tag triggers are updated to respect opt-out logic, publish your GTM changes. Your project is now running Consent Pro in opt-out (CCPA) mode.

‍

Attributes

Components

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

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

Triggers for functionality

Functionality
Allowed elements
Works inside
Attribute
Description
Allow all cookies
Button, Text Link, Link Block, Div, Text Block
Banner, Preferences
fs-consent="allow"
Accepts all cookies.
Deny all cookies
Button, Text Link, Link Block, Div, Text Block
Banner, Preferences
fs-consent="deny"
Denies all cookies.
(except essential cookies)
Close
Button, Text Link, Link Block, Div, Text Block
Banner, Preferences
fs-consent="close"
Closes banner or preferences manager without making any Allow/Deny/Save selection.
Open Preferences
Button, Text Link, Link Block, Div, Text Block
Any element on the page
fs-consent="open preferences"
Opens Preference Manager.
Marketing Toggle
Checkbox
Consents Form
fs-consent-checkbox= "marketing"
When checked, users will allow all Cookies from the marketing category.
Personalization Toggle
Checkbox
Consents Form
fs-consent-checkbox= "personalization"
When checked, users will allow all Cookies from the personalization category.
Analytics Toggle
Checkbox
Consents Form
fs-consent-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-consent="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-consent="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-consent"
Placed as an attribute on the 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-consent-categories="marketing"
fs-consent-categories="marketing, analytics"
Placed as an attribute on the 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-consent-mode="opt-in"
Placed as an attribute on the 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-consent-expires="180"
Placed as an attribute on the 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
Visual debug tool when something isn't working
<script> tag of the Finsweet Cookie Consent script
fs-consent-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.
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-consent-endpoint="URL"
Optionally send consents to an API endpoint, so you can store consent records in your database. More information here.
Dynamically loaded components from a different page
<script> tag of the Finsweet Cookie Consent script
fs-consent-source="URL"
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").
Default display property
On the Banner, Manager and Preferences components
fs-consent-display=
"PROPERTY_NAME"
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.
Disable scroll
On the Banner or Preferences component.
fs-consent-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.
Modify the domain target when storing the Consents Cookie.
<script> tag of the Finsweet Cookie Consent script
fs-consent-domain= "DOMAIN_NAME"
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.

About migrating to Consent Pro from Cookie Consent

This information is related to the previous version of Consent Pro, named Cookie Consent and part of the Finsweet Compnents app

Will Finsweet Components Cookie Consent integration stop working now that its new version, Consent Pro, is launched?

No, Finsweet Components Cookie Consent will still work normally.

Is the migration to Consent Pro mandatory?

While you can install the new App and achieve the migration in a couple of clicks, it's not mandatory to do so, until you want to update and make some changes to your current integration configuration.

How can a Finsweet Components Cookie Consent integration be turned into a Consent Pro integration?

Install the Consent Pro App on the existing project, and launch it.

The App will first ask you to publish your project to make sure that your published site matches the version in the Designer.

It will then check for an existing Cookie Consent integration and automatically migrate it to Consent Pro. If a banner is found, you'll be able to resume your integration from there and update your settings.

If no banner is found, creating a brand new integration will be proposed by the app.

What is the difference between the Finsweet Components Cookie COnsent and the new Consent Pro solution?

Feature-wise, and for the time being, there's no difference in features and workflow between the old and the new app. The transition is necessary for us to bring new features to the new App soon.

The pricing changes, however. We have lowered the Single Lifetime Site Licence and introduced Agency plans allowing you to purchase Lifetime Sites Licences in bulk. Lifetime licences never expires and are never lost if you don't activate them during the current suscription period.

About the plans

What happens if I upgrade my current Agency Plan to a higher plan?

If you want to upgrade from an Agency Plan to a higher Agency Plan, you're first asked to pay for the price difference with the new plan, for the remainder months of the current subscription period. Then, we calculate the number of Lifetime Site Licences earned during the period on the current plan and the period of the higher plan.

What happens if I cancel my Unlimited Agency plan?

When you cancel the Unlimited plan with fewer than 100 active websites, you keep 100 lifetime licenses in total. Active licenses remain valid, and unused ones (for example, 72 if 28 are active) can be assigned anytime without expiration.

Can I assign licenses after purchase?

Yes, you can activate a Lifetime Site License anytime on a new domain. Lifetime Site Licenses don't expire even if the subscription did.

What counts as a site, what one licence covers?

One site hosted under a custom domain = one license.

Fully testing the app for free is possible, you can install the app and use it without signing up, and check the results on the Webflow.io staging domain. Publishing the integration to custom domain will require a subscription or purchase of a Lifetime Site License.

What happens if I cancel my plan?

You keep all unused licenses granted with that plan—if any— and all activated licenses remain valid forever. Your license balance stays available to assign at any time, but no new licenses will be added unless you renew or subscribe to a new plan.

Do licenses expire?

Never.

Unused licenses remain in your balance forever, regardless of whether you keep a plan active or not.

I have a lot of sites to migrate to Consent Pro, what’s the best plan?

Check Agency Plans for the most cost-effective way to secure lifetime licenses in bulk. Estimate how many websites you plan to publish over the coming year and choose the plan that fits. The cost per site decreases as you move up to higher tiers.

Can I move my lifetime license to another site?

No. Lifetime licenses are intended to stay with the site where they are first activated.

If you expect to rotate sites frequently, a subscription is the better option.

How many sites are included?

Each Single Site plan covers one site. Add more by purchasing additional licenses or use an Agency plan

Does a Lifetime Site License ever expire?

A lifetime license is perpetual for a single site. It never expires and is not tied to an active subscription. If you plan to rotate sites regularly, a subscription is the more suitable option.

What happens if I cancel a Single Site subscription?

The benefits of a Single Site subscription end when the current billing period expires.

Can I switch from monthly to annual?

For a Single Site subscription, yes, switch anytime. The new term starts at your next billing date.

For an agency plan, no, the only option is the yearly payment.

Do subscriptions include all features?

All features are included in all plans.

Legal Disclaimers

Understand the entire Agreement for using Finsweet Products

Check out our Legal agreements and policies for Products and Services page at finsweet.com/legal.

Understand your responsibility for compliance and security

Check out our User Responsibility for Compliance and Security page at finsweet.com/legal/user-responsibility-for-compliance-and-security.

Still need help?

Get Support
Watch Tutorial