How does Finsweet Cookie Consent for Webflow work?

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 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 consent. If so, it pulls the consent 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 consent 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 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 consent, 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.