Reform Digital®

CookieFlow™

GDPR-compliant cookie consent, CMP & privacy solution for Webflow.

Clone in Webflow

Overview

CookieFlow™ is a comprehensive cookie consent management solution developed by Reform Digital® specifically for Webflow websites. It provides a compliant, customizable framework for handling user consent preferences across different geographical regions, automatically adapting to privacy regulations like GDPR, CCPA, and others.

What CookieFlow™ Does

  • Automatically detects user location and displays the appropriate consent banner

  • Manages cookie consent across multiple categories (marketing, analytics, personalization)

  • Complies with regional regulations (GDPR, CCPA, etc.)

  • Stores consent records in your Supabase database for audit trails

  • Integrates seamlessly with Google Tag Manager and Webflow Analyze

  • Respects privacy signals like Do Not Track (DNT) and Global Privacy Control (GPC)

Features

🔍 Automatic Geolocation

CookieFlow™ automatically detects your visitors' location using IP-based geolocation and displays the appropriate consent banner based on their region. If geolocation fails, it intelligently falls back to timezone-based detection.

How It Works:

  1. CookieFlow™ checks the visitor's IP address

  2. Determines their country code

  3. Matches the country to the appropriate zone (ZONE_1, ZONE_2, or ZONE_3)

  4. Shows the correct banner for that region

  5. Hides banners for other regions

Privacy-Conscious:

  • IP addresses are anonymized before storage (last octet set to 0)

  • Geolocation data is used only to determine compliance zone

  • No personally identifiable information is collected during detection

📍 Regional Compliance (3 Zones)

  • ZONE_1 (Basic Notice): Simple notice-only approach for 130 countries with minimal compliance requirements

  • ZONE_2 (Opt-Out/CCPA): For 6 CCPA-affected regions (US, PR, GU, AS, MP, VI) with "Do Not Sell" option

  • ZONE_3 (Opt-In/GDPR): For 50 GDPR-affected regions (EU, UK, Canada, Brazil, Japan, etc.) with detailed consent options

  • Customizable: Override defaults with script attributes if privacy regulations change

⏰ Configurable Cookie Expiry

Set how long consent cookies should last (default is 6 months). Users can be prompted to renew their consent when it expires.

📊 Consent Record Storage

GDPR and other privacy regulations require consent records to be stored and maintained for audit trails. CookieFlow™ is built to work seamlessly with Supabase due to its ease of setup and free tier availability. Once configured, all consent records are automatically stored in your Supabase database, providing a complete compliance audit trail without additional maintenance.

🔒 Privacy Signal Respect

CookieFlow™ automatically respects and responds to:

  • Do Not Track (DNT) browser signals

  • Global Privacy Control (GPC) signals

  • Automatically opts users out if these signals are detected

🤖 Bot Detection

Crawlers and bots won't see consent banners, keeping your site's SEO intact.

🔄 Consent ID Tracking

Tracks and displays a unique consent ID to users (GDPR requirement for EU visitors).

🎨 Fully Customizable

Complete control over styling and layout using Webflow's native design tools.

Compliance

✔ Equal Prominence: "Accept" and "Reject" buttons are identical in design. ✔ No Pre-Checked Boxes: Users must actively opt in to non-essential cookies. ✔ Plain Language: Simple, clear wording without legal jargon. ✔ No Implied Consent: Actions like scrolling or navigating do not count as consent. ✔ No Cookie Walls: Full access to the website is provided, even if cookies are rejected. ✔ Granular Control: Users can opt in to different cookie categories. ✔ Close Button: Clearly explains that no cookies will be set if closed. ✔ Privacy & Cookie Policy Link: Easily accessible for transparency. ✔ Publisher Identification: The website publisher's name is explicitly stated. ✔ Stored Consent Choices: Users' selections are remembered for a minimum of 6 months (per France & Italy). ✔ Consent Expiry: Re-consent required every 6–24 months, per country regulations. ✔ Easy Consent Review: Users can modify settings anytime via a widget or link. ✔ Third-Party Cookies Disclosure: Third-party providers are listed in the policy. ✔ Cross-Site Tracking Compliance: Explicit opt-in required for tracking across sites. ✔ No Nudging: Rejecting cookies is just as easy as accepting them. ✔ Dismissal Transparency (Italy): Users are informed that rejecting cookies will not affect access to content.

CookieFlow™ has been built with these regulations in mind, for full compliance implement it according to the documentation, do not change its functionality and only edit and style it considering the above rules.

Considerations

While CookieFlow™ provides comprehensive cookie consent management, there are several Webflow-specific features that require additional attention to ensure full GDPR compliance:

Webflow E-Commerce is not GDPR compliant

Webflow's native e-commerce solution is not fully GDPR compliant by default, as it uses cookies that may track users without explicit consent. Since these cookies are managed directly by Webflow, our cookie consent solution, CookieFlow, cannot control or block them. If you are using Webflow e-commerce, we recommend consulting a legal expert and exploring additional compliance measures to ensure your store meets GDPR requirements.

Webflow's native video element for YouTube

YouTube videos do not comply with GDPR regulations by default. To ensure users have control over their data, it's best to use embedded iFrames. If you add YouTube videos to your Webflow site using the native video element, personal data is automatically shared with YouTube and its parent company, Google, as soon as the page loads. To avoid this, consider using a custom code embed instead.

Webflow's map is not GDPR compliant

Webflow's native map element does not comply with GDPR regulations, as it automatically shares personal data with third parties like Google without user consent. To prioritize user privacy and provide better control over data sharing, it's advisable to use an embedded Google Map instead.

Webflow's reCaptcha is not GDPR compliant

Webflow's built-in reCaptcha does not fully comply with GDPR, as it collects user data (such as IP addresses and behavior) without explicit consent. To maintain compliance and safeguard user privacy, it's best to integrate reCaptcha manually into your forms.

Remove <noscript> tags for compliance

<noscript> tags are not compliant with cookie consent regulations and should be removed. These tags execute even when JavaScript is disabled, which can bypass cookie consent mechanisms and potentially collect user data without proper authorization. To ensure GDPR compliance, it is essential to eliminate all <noscript> tags from your website.

Support

Getting Help

Need assistance with CookieFlow™? Try these steps:

  1. Review the documentation - Most common issues are covered in this guide

  2. Check the browser console - Look for error messages that may indicate configuration issues

  3. Verify your configuration - Ensure all attributes are spelled correctly and properly formatted

  4. Validate Supabase credentials - Confirm your Supabase URL and API key are correct and have proper permissions

  5. Still stuck? - Join our Slack community for direct support from our team

Feature Requests & Bugs

CookieFlow™ is actively maintained and continuously improved. We welcome your feedback:

  • Feature requests - Share ideas to make CookieFlow™ even better

  • Bug reports - Help us identify and fix issues

  • General feedback - Tell us about your experience

Join our Slack community to contribute!

Recommended Setup

Quick Start

We provide a ready-to-use Webflow component that includes all necessary elements, attributes, and scripts out of the box. Simply copy the component from our demonstration website and paste it into your Webflow project.

Get the Cloneable

What's Included

The prebuilt component comes with:

  • All required HTML elements with proper attributes

  • The CookieFlow™ script already integrated

  • Three banner variations (for different compliance zones)

  • Settings/preferences modal with consent toggles

  • Manager button for reopening the consent interface

  • GDPR consent info banner

Important: Script Configuration

The prebuilt component includes the CookieFlow™ script already. You just need to:

  1. Copy the component from our demo site

  2. Paste it into your Webflow project

  3. Update the script attributes in the component with your Supabase credentials (see the Supabase Setup section below)

  4. Customize the styling to match your brand

Supabase Setup

CookieFlow™ requires a Supabase database to store consent records for compliance and audit purposes. If you don't already have a Supabase account and database set up:

  1. Sign up at https://supabase.com

  2. Create a new project (wait for provisioning to complete)

  3. Open the SQL Editor in your Supabase dashboard

  4. Paste & run the following SQL code to create the necessary tables and security policies:

  1. Copy your Supabase URL and API Key from your Supabase dashboard:

    • Project URL: Found in Settings → Data API tab (e.g., https://xxxxxxxxxxxxx.supabase.co)

    • anon key: Found in Settings → API Keys tab (copy the anon public key)

Script Configuration

The prebuilt component includes an embed element called "Component Scripts" with the required CookieFlow™ script already configured. To get started with the default configuration, simply update the script's attributes with your Supabase credentials (see Supabase Setup above).

Basic Configuration

The script requires these two essential attributes to function:

Advanced Configuration (Optional)

Beyond the basic setup, CookieFlow™ supports additional customizations to meet your specific compliance needs and preferences.

Cookie Expiration Configuration

Default Behavior: By default, the consent cookie expires after 6 months. This setting works well for most countries and aligns with common GDPR requirements.

How It Works: CookieFlow™ stores a consent cookie called cookieconsent_status that remembers the user's choices. The expiration of this cookie is controlled by the rd-consent-expiry attribute in your script tag.

Setting a Custom Expiration: If you need to set a different expiration period based on your specific country's GDPR regulations, you can override the default by adding the rd-consent-expiry attribute to your script tag along with a value in months. For example, if your country states that consents should expire after 3 months instead of six, then you would update the attribute as follows:

What Happens on Expiry: When the consent cookie expires:

  1. User returns to your site

  2. CookieFlow™ detects the expired cookie

  3. The appropriate consent banner is shown again

  4. User can reconfirm or change their preferences

Displaying Expiry Date to Users (Optional): To inform users when their consent expires, add this attribute to any text element:

CookieFlow™ will automatically replace {0} with the expiry period from your script configuration.

Regional Compliance Overview

CookieFlow™ automatically adapts to your visitors' location, showing the appropriate compliance interface. The system uses three compliance zones:

ZONE_1: Basic Notice (Default)

Countries: Most countries worldwide Behavior: Simple notice informing users about cookie usage User Actions: Accept or dismiss the notice Use Case: Minimal compliance requirements

Default Country Assignment (130 countries): AF, AX, AL, DZ, AD, AO, AI, AQ, AG, AM, AW, AU, AZ, BS, BD, BB, BY, BZ, BJ, BM, BT, BO, BQ, BA, BW, BV, IO, BN, BF, BI, CV, KH, CM, KY, CF, TD, CL, CN, CX, CC, CO, KM, CG, CD, CK, CR, CI, CU, CW, DJ, DM, DO, EC, EG, SV, GQ, ER, SZ, ET, FK, FO, FJ, GF, PF, TF, GA, GM, GE, GH, GI, GL, GD, GP, GT, GG, GN, GW, GY, HT, HM, VA, HN, HK, IN, ID, IR, IQ, IM, JM, JE, JO, KZ, KI, KP, KW, KG, LA, LB, LS, LR, LY, MO, MG, MW, MY, MV, ML, MH, MQ, MR, YT, MX, FM, MD, MC, MN, ME, MS, MA, MZ, MM, NA, NR, NP, NC, NI, NE, NU, NF, MK, OM, PK, PW, PS, PA, PG, PY, PE, PH, PN, RE, RU, RW, BL, SH, KN, LC, MF, PM, VC, WS, SM, ST, SA, SN, RS, SC, SL, SG, SX, SB, SO, GS, SS, LK, SD, SR, SJ, SY, TW, TJ, TZ, TH, TL, TG, TK, TO, TT, TN, TM, TC, TV, UZ, UA, AE, VU, VE, VN, VG, WF, UM, EH, YE, ZM, ZW

ZONE_2: Opt-Out (CCPA)

Countries: United States and other CCPA-affected regions Behavior: Users must opt-out if they don't want their data sold User Actions:

  • Accept All

  • Reject All (opt-out)

  • Manage Preferences (opens settings) Use Case: California Consumer Privacy Act (CCPA) compliance

Default Country Assignment (6 countries): AS, GU, MP, PR, US, VI

Special Features:

  • "Do Not Sell My Personal Information" option

ZONE_3: Opt-In (GDPR)

Countries: European Union and other GDPR-affected regions Behavior: Granular consent required for each cookie category User Actions:

  • Accept All

  • Reject All

  • Accept Selected (only enable desired categories)

  • Open detailed preferences Use Case: General Data Protection Regulation (GDPR) compliance

Default Country Assignment (50 countries): AR, AT, BH, BE, BR, BG, CA, HR, CY, CZ, DK, EE, FI, FR, DE, GR, HU, IS, IE, IL, IT, JP, KE, KR, LV, LI, LT, LU, MT, MU, NL, NZ, NG, NO, PL, PT, QA, RO, SK, SI, ZA, ES, SE, CH, TR, UG, GB, UY

Special Features:

  • Detailed cookie category descriptions

  • Consent ID display for audit trails

  • Granular consent management

Automatic Detection

CookieFlow™ uses a two-step detection process:

  1. Primary: IP-based geolocation (via ipapi.co)

  2. Fallback: Timezone-based detection if IP lookup fails

You don't need to configure anything for this to work—it's automatic.

Regional Configuration Override

By default, CookieFlow™ uses predefined country assignments based on current privacy regulations (see the Regional Compliance Overview above). However, you can override these defaults if:

  1. A country's privacy regulations change

  2. You need to customize the regional assignments for your specific use case

  3. You want to test different compliance zones

To customize country assignments, add these attributes to your script tag:

How to Override: Simply provide a comma-separated list of 2-letter ISO country codes to reassign any country to a different zone.

Example: If Canada moves from ZONE_3 to ZONE_2 due to a regulation change:

Configuration Attribute Reference

rd-consent-storage-url (Required)

  • Your Supabase project URL

  • Format: https://xxxxxxxxxxxxx.supabase.co

  • Found in: Settings → Data API

rd-consent-storage-api (Required)

  • Your Supabase anonymous/public API key

  • Format: Long string of characters

  • Found in: Settings → API Keys (use the anon public key)

rd-consent-expiry (Optional)

  • Cookie expiration duration in months

  • Default: 6 (6 months)

  • Can be any number (e.g., 3, 12, 24)

rd-zone-1, rd-zone-2, rd-zone-3 (Optional)

  • Comma-separated list of country codes (2-letter ISO format)

  • Used to override default regional assignments

  • Format: "US,CA,MX"

Store Consents

CookieFlow™ automatically stores comprehensive consent records in your Supabase database for compliance and audit purposes. Each time a user interacts with the consent banner, a detailed record is created that includes both technical metadata and the user's specific consent choices.

What Information is Stored

Every consent record contains the following information:

Consent Identification

  • consent_id: Unique identifier generated from timestamp and anonymized IP (28-character base36 string)

  • action_date: Precise timestamp when consent was given (automatically set by database)

User Consent Choices

  • consents: JSON object containing the user's specific consent decisions:

Technical Metadata

  • anonymized_ip: User's IP address with the last octet set to "0" for privacy

  • user_agent: Browser and device information for technical support

  • page_url: The website domain where consent was given

  • geo_region: User's compliance zone (ZONE_1, ZONE_2, or ZONE_3)

User Interaction Details

  • consent_method: How consent was given ("accept_all", "reject_all", "accept_selected")

  • button_clicked: Text content of the specific button the user clicked

  • modal_text: The full text content of the consent banner/modal

Consent Record Examples

Example 1: Accept All (GDPR Region)

Example 2: Selective Consent (GDPR Region)

Example 3: Reject All (CCPA Region)

Privacy & Security Features

IP Anonymization

  • All IP addresses are automatically anonymized by setting the last octet to "0"

  • Example: 192.168.1.123 becomes 192.168.1.0

  • This provides location data while protecting user privacy

Unique Consent IDs

  • Each consent record gets a unique 28-character identifier

  • Generated using SHA-256 hash of timestamp + anonymized IP

  • Enables tracking consent changes over time while maintaining privacy

Database Security

  • Row-level security (RLS) enabled on all tables

  • Anonymous users can only INSERT records (no SELECT/UPDATE/DELETE)

  • Consent retrieval requires specific function calls with proper permissions

Compliance Benefits

Audit Trail

  • Complete record of all consent decisions

  • Timestamped entries for regulatory compliance

  • Detailed interaction metadata for transparency

Data Subject Rights

  • Users can request their consent records using their consent ID

  • Records can be exported for data portability requests

  • Clear consent withdrawal tracking

Regulatory Reporting

  • Structured data format for compliance reporting

  • Geographic region tracking for multi-jurisdictional compliance

  • Detailed consent method tracking for audit purposes

Accessing Consent Records

For Users (ZONE_3/GDPR)

Users in GDPR regions can view their consent ID and timestamp directly in the consent banner after making a choice.

For Administrators

Use the Supabase dashboard to query consent records. You can run any of these queries as needed:

Consent Categories

CookieFlow™ manages consent across four main categories:

1. Marketing Cookies

Purpose: Used for advertising and tracking across websites Includes: Social media pixels, retargeting pixels, advertising cookies Control: Users can enable or disable this category

2. Analytics Cookies

Purpose: Used to understand how visitors interact with your site Includes: Google Analytics, Webflow Analytics, heatmap tools Control: Users can enable or disable this category

3. Personalization Cookies

Purpose: Used to remember user preferences and personalize experience Includes: Language preferences, theme preferences, saved settings Control: Users can enable or disable this category

4. Essential Cookies (Always On)

Purpose: Necessary for website functionality Includes: Authentication, security, site functionality Control: Cannot be disabled—required for site to function

Adding Project Scripts

Once CookieFlow™ is set up, you need to configure your existing scripts to respect user consent preferences. CookieFlow™ provides two methods for script integration:

Method 1: Adding Scripts Directly in Webflow

This method is ideal if you manage scripts directly within your Webflow project using embed elements or custom code.

How It Works

CookieFlow™ uses HTML attributes to control when scripts load based on user consent. Add the appropriate attributes to all your project scripts:

Important: Remove <noscript> Tags for Compliance

Remove <noscript> tags for compliance: When adding any tracking scripts directly in Webflow, ensure that no <noscript> tags are included. If any of your existing scripts contain <noscript> tags, remove them as they will bypass consent management and violate compliance requirements.

Example of what NOT to add (Google Tag Manager <noscript> tag):

This <noscript> tag loads tracking scripts even when JavaScript is disabled, completely bypassing consent management and violating privacy regulations.

Essential Scripts

Attribute: type="enabled" rd-cookieflow="essential" Use for: Authentication, security, payment processing, accessibility scripts, form validation, load balancing, privacy & consent management

Analytics Scripts

Attribute: type="disabled" rd-cookieflow="analytics" Use for: Google Analytics, Hotjar, tracking and recording scripts, heatmaps, Microsoft Clarity, Adobe Analytics

Marketing Scripts

Attribute: type="disabled" rd-cookieflow="marketing" Use for: Tracking pixels, advertising tags, social media integration scripts, retargeting cookies, affiliate tracking, marketing automation

Personalization Scripts

Attribute: type="disabled" rd-cookieflow="personalization" Use for: Language preferences, theme or appearance, recommendations, user profile customization, behavioral segmentation, geo-targeting

Important Notes for Webflow Integration

  1. Add attributes to embed elements: In Webflow, when adding scripts via embed elements, include the attributes in the opening <script> tag

  2. Scripts load automatically: Once users give consent, CookieFlow™ automatically enables the appropriate scripts

  3. Essential scripts always load: Scripts with rd-cookieflow="essential" load immediately without requiring consent

Method 2: Adding Scripts via Google Tag Manager

This method is recommended if you use Google Tag Manager to manage your website scripts and tracking.

Prerequisites

Remove <noscript> tags for compliance: When installing Google Tag Manager, do not add the <noscript> tag after the opening <body> tag. If you already have Google Tag Manager installed, remove that part from Webflow.

Step 1: Set Up Triggers in Google Tag Manager

Go to Workspace → Triggers and click New to create triggers for each consent category:

Essential Cookie Trigger

  • Name: Essential Cookie Activated

  • Type: Other → Custom Event

  • Event Name: essential-activated

  • Fires On: Some Custom Events

  • Condition: Event equals essential-activated

Analytics Cookie Trigger

  • Name: Analytics Cookie Activated

  • Type: Other → Custom Event

  • Event Name: analytics-activated

  • Fires On: Some Custom Events

  • Condition: Event equals analytics-activated

Marketing Cookie Trigger

  • Name: Marketing Cookie Activated

  • Type: Other → Custom Event

  • Event Name: marketing-activated

  • Fires On: Some Custom Events

  • Condition: Event equals marketing-activated

Personalization Cookie Trigger

  • Name: Personalization Cookie Activated

  • Type: Other → Custom Event

  • Event Name: personalization-activated

  • Fires On: Some Custom Events

  • Condition: Event equals personalization-activated

Step 2: Configure Your Tags

For each existing or new tag in Google Tag Manager:

Essential Scripts

  • Trigger: Essential Cookie Activated

  • Use for: Authentication, security, payment processing, accessibility scripts, form validation, load balancing, privacy & consent management

Analytics Scripts

  • Trigger: Analytics Cookie Activated

  • Use for: Google Analytics, Hotjar, tracking and recording scripts, heatmaps, Microsoft Clarity, Adobe Analytics

Marketing Scripts

  • Trigger: Marketing Cookie Activated

  • Use for: Tracking pixels, advertising tags, social media integration scripts, retargeting cookies, affiliate tracking, marketing automation

Personalization Scripts

  • Trigger: Personalization Cookie Activated

  • Use for: Language preferences, theme or appearance, recommendations, user profile customization, behavioral segmentation, geo-targeting

Step 3: Add Advanced Consent Settings

For each tag, go to Tag Configuration → Advanced Settings → Consent Settings and select Require additional consent for tag to fire:

Essential Scripts

  • Required Consent: security_storage

Analytics Scripts

  • Required Consent: analytics_storage

Marketing Scripts

  • Required Consent: ad_storage

Personalization Scripts

  • Required Consent: personalization_storage and functionality_storage

Step 4: Publish & Test

  1. Publish: Click Submit, name your version, and hit Publish

  2. Test: Click Preview, enter your website URL to initiate test mode

  3. Verify: By default, you should only see essential tags firing without further consent

  4. Test Consent: Toggle different cookie types on your previewed website to verify their respective tags fire correctly

Troubleshooting GTM Integration

  • Tags not firing: Check that triggers are properly configured and attached to tags

  • Consent not working: Verify that advanced consent settings are properly configured

  • Essential scripts not loading: Ensure essential tags have the correct trigger and consent settings

Manual Setup

Setup Guide

If you prefer to build your own UI or need to customize the implementation beyond the prebuilt component, you can manually set up CookieFlow™ by adding the required HTML elements and attributes to your Webflow project.

Quick Start

  1. Add the CookieFlow™ script to your Webflow project

  2. Create the required HTML elements in your Webflow project

  3. Add the necessary attributes to each element

  4. Customize the styling to match your brand

Adding the Script

Add the following script to your Webflow project's global settings, inside the <head> tag:

What's Next?

  • Configure your Supabase database: Follow the Supabase Setup guide in Option 1

  • Learn about script attributes: See the Script Configuration section for all available attributes and customization options

  • Understand regional compliance: Check the Regional Compliance Overview section to learn how CookieFlow™ adapts to different regions

Elements & Attributes

CookieFlow™ uses HTML data attributes to identify and control UI elements. These attributes start with rd-cookieflow (Reform Digital CookieFlow).

Core Components

1. Wrapper Element

Purpose: Contains all CookieFlow™ components Attribute: rd-cookieflow="wrapper"

2. Manager Component

Purpose: Small button/floating element that allows users to reopen the consent interface Attribute: rd-cookieflow="manager" Additional: Add rd-cookieflow="manager-interaction" to control show/hide state

Position: Typically positioned as a floating button, often in the bottom-right corner

Privacy Settings Link (Alternative to Manager)

If you prefer to use a text link instead of the floating manager button (e.g., a "Privacy Settings" link in your footer), you can add this attribute to any element:

Attribute: rd-cookieflow="manager-link"

How It Works:

  • Clicking this element opens the CookieFlow™ settings modal, just like the floating manager button

  • You can place this link anywhere on your page (footer, navigation, etc.)

  • If using this approach, the floating manager button (rd-cookieflow="manager") can be removed without affecting functionality

3. Banner Components

Purpose: Display consent options to users when they first visit

There are three banner types, one for each compliance zone:

  • Banner Zone 1 (Basic Notice): rd-cookieflow="banner-zone-one"

  • Banner Zone 2 (Opt-Out/CCPA): rd-cookieflow="banner-zone-two"

  • Banner Zone 3 (Opt-In/GDPR): rd-cookieflow="banner-zone-three"

Important: All three banners are hidden by default. CookieFlow™ will automatically remove the banners that don't apply to the user's location.

Additional: Add rd-cookieflow="banner-interaction" to control show/hide state

4. Settings/Preferences Component

Purpose: Detailed consent management modal where users can customize their preferences Attribute: rd-cookieflow="settings" Additional: Add rd-cookieflow="preferences-interaction" to control show/hide state

Components Inside Settings:

  • Header text

  • Consent category toggles

  • Action buttons (Accept All, Reject All, Accept Selected)

  • Close button

5. Consent Info Banner (GDPR Only)

Purpose: Displays consent ID and information about cookies for GDPR users Attribute: rd-cookieflow="consent-banner" Additional: Add rd-cookieflow="consent-interaction" to control show/hide state

Essential UI Elements Within Components

Consent Buttons

All consent-related buttons need these attributes:

  • Accept All: rd-cookieflow="accept"

  • Reject All: rd-cookieflow="reject"

  • Custom/Selected: rd-cookieflow="accept-selected"

  • Open Settings: rd-cookieflow="open-settings"

  • Close: rd-cookieflow="close"

Consent Checkboxes

For the settings/preferences modal, add checkboxes for each consent category:

  • Marketing Cookies:

    • Checkbox: rd-cookieflow="marketing-checkbox"

    • Toggle interaction: rd-cookieflow="toggle-interaction" (inside the checkbox container)

    • State display: rd-cookieflow="marketing-state" (to show On/Off text)

  • Analytics Cookies:

    • Checkbox: rd-cookieflow="analytics-checkbox"

    • Toggle interaction: rd-cookieflow="toggle-interaction" (inside the checkbox container)

    • State display: rd-cookieflow="analytics-state" (to show On/Off text)

  • Personalization Cookies:

    • Checkbox: rd-cookieflow="personalization-checkbox"

    • Toggle interaction: rd-cookieflow="toggle-interaction" (inside the checkbox container)

    • State display: rd-cookieflow="personalization-state" (to show On/Off text)

Scroll Lock Attribute

To prevent page scrolling when the settings modal is open, add this attribute to the settings component container:

Example Structure

Here's an example of a complete CookieFlow™ structure:

Product Tracking

CookieFlow™ includes an extremely lightweight telemetry module that helps us understand product adoption patterns. This information allows us to focus our support efforts and prioritize product enhancements where they matter most.

What We Track:

  • Product Identifier: The name of the product (e.g., "COOKIE_FLOW")

  • Domain: The public hostname where the product is installed (e.g., "example.com")

Privacy & Performance:

  • No cookies, fingerprinting, or personally identifiable information

  • Only runs on live, public domains (never on localhost or development environments)

  • Single lightweight request sent once per page load

  • Data is aggregated for internal analytics only

  • Not used for advertising, marketing, or tracking

This anonymous usage data helps us ensure CookieFlow™ evolves to meet real-world needs.

PreviousDevKit™ (Condensed)NextScriptEmbed™

Last updated