@reform-digital/cookie-flow

v2.0.1

Published

a month ago

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,

Downloads

117

0High
0Medium
0Low

reform-digital

CookieFlow™

Overview

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 Analytics
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:

CookieFlow™ checks the visitor's IP address
Determines their country code
Matches the country to the appropriate zone (ZONE_1, ZONE_2, or ZONE_3)
Shows the correct banner for that region
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:

Review the documentation - Most common issues are covered in this guide
Check the browser console - Look for error messages that may indicate configuration issues
Verify your configuration - Ensure all attributes are spelled correctly and properly formatted
Validate Supabase credentials - Confirm your Supabase URL and API key are correct and have proper permissions
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.

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:

Copy the component from our demo site
Paste it into your Webflow project
Update the script attributes in the component with your Supabase credentials (see the Supabase Setup section below)
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:

Sign up at https://supabase.com
Create a new project (wait for provisioning to complete)
Open the SQL Editor in your Supabase dashboard
Paste & run the following SQL code to create the necessary tables and security policies:

/* ============================================================
   1️⃣  CREATE TABLES
   ============================================================ */

-- Create the main consents table (idempotent)
create table if not exists public.consents (
  id              serial primary key,
  consent_id      text       not null,
  anonymized_ip   text,
  action_date     timestamptz default now(),
  page_url        text       not null,
  user_agent      text,
  consent_method  text,
  modal_text      text,
  button_clicked  text,
  consents        jsonb      not null,
  geo_region      text
);

/* ============================================================
   2️⃣  ROW-LEVEL SECURITY (RLS)
   ============================================================ */

-- Enable RLS on the consents table
alter table public.consents enable row level security;

-- Allow anonymous INSERTs only (no SELECT/UPDATE/DELETE)
do
$$
begin
  if not exists (
    select 1
    from pg_policies
    where schemaname = 'public'
      and tablename  = 'consents'
      and policyname = 'Allow public inserts'
  ) then
    create policy "Allow public inserts"
      on public.consents
      for insert
      with check (true);
  end if;
end
$$;

/* ============================================================
   3️⃣  QUERY HELPER FUNCTION
   ============================================================ */

-- Use a wrapper so clients can only read whitelisted columns
create or replace function public.get_consent_by_id (p_consent_id text)
returns table (
  consent_id  text,
  action_date timestamptz,
  consents    jsonb
)
language sql
stable
security definer
set search_path = public
as
$$
  select consent_id, action_date, consents
  from   public.consents
  where  consent_id = p_consent_id
  order  by action_date desc
  limit  1;
$$;

-- Revoke direct table SELECT, grant function EXECUTE
revoke select on public.consents from public;
grant  execute on function public.get_consent_by_id(text) to public;

/* ============================================================
   4️⃣  HEARTBEAT FUNCTION (keep-alive for Supabase Free plan)
   ============================================================ */

create or replace function public.heartbeat ()
returns void
language sql
stable
set search_path = public
as
$$
  select 1;
$$;

-- Grant execution to the anonymous role so an external cron
-- can ping /rest/v1/rpc/heartbeat using only the anon key
grant execute on function public.heartbeat() to anon;

/* Optional: Lock down visibility of heartbeat to everyone else */
revoke all on function public.heartbeat() from public;

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:

<script 
  src="https://cdn.jsdelivr.net/npm/@reform-digital/cookie-flow@LATEST_VERSION/prod/index.js"
  rd-consent-storage-url="https://your-project.supabase.co"
  rd-consent-storage-api="your-api-key-here"
></script>

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:

<script 
  src="https://cdn.jsdelivr.net/npm/@reform-digital/cookie-flow@LATEST_VERSION/prod/index.js"
  rd-consent-storage-url="https://your-project.supabase.co"
  rd-consent-storage-api="your-api-key-here"
  rd-consent-expiry="3"
></script>

What Happens on Expiry: When the consent cookie expires:

User returns to your site
CookieFlow™ detects the expired cookie
The appropriate consent banner is shown again
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:

<!-- Will render as "6 months" (based on your configuration) -->
<p><span rd-cookieflow="consent-expiry">{0}</span> months</p>

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:

Primary: IP-based geolocation (via ipapi.co)
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:

A country's privacy regulations change
You need to customize the regional assignments for your specific use case
You want to test different compliance zones

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

<script 
  src="https://cdn.jsdelivr.net/npm/@reform-digital/cookie-flow@LATEST_VERSION/prod/index.js"
  rd-consent-storage-url="https://your-project.supabase.co"
  rd-consent-storage-api="your-api-key-here"
  rd-zone-1="US,CA,MX"
  rd-zone-2="UK,AU,BR"
  rd-zone-3="DE,FR,IT,ES"
></script>

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:

<script 
  ...
  rd-zone-2="CA"
></script>

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:

{
  "marketing": true/false,
  "analytics": true/false, 
  "personalization": true/false,
  "essential": true
}

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)

{
  "consent_id": "A1B2C3D4E5F6G7H8I9J0K1L2M3N4",
  "action_date": "2024-01-15T14:30:25.123Z",
  "anonymized_ip": "192.168.1.0",
  "user_agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36",
  "page_url": "https://example.com",
  "consent_method": "accept_all",
  "button_clicked": "Accept All",
  "modal_text": "We use cookies to enhance your experience...",
  "geo_region": "ZONE_3",
  "consents": {
    "marketing": true,
    "analytics": true,
    "personalization": true,
    "essential": true
  }
}

Example 2: Selective Consent (GDPR Region)

{
  "consent_id": "B2C3D4E5F6G7H8I9J0K1L2M3N4O5",
  "action_date": "2024-01-15T14:35:10.456Z",
  "anonymized_ip": "203.45.67.0",
  "user_agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36",
  "page_url": "https://example.com",
  "consent_method": "accept_selected",
  "button_clicked": "Save Preferences",
  "modal_text": "We use cookies to enhance your experience...",
  "geo_region": "ZONE_3",
  "consents": {
    "marketing": false,
    "analytics": true,
    "personalization": false,
    "essential": true
  }
}

Example 3: Reject All (CCPA Region)

{
  "consent_id": "C3D4E5F6G7H8I9J0K1L2M3N4O5P6",
  "action_date": "2024-01-15T14:40:15.789Z",
  "anonymized_ip": "198.51.100.0",
  "user_agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15",
  "page_url": "https://example.com",
  "consent_method": "reject_all",
  "button_clicked": "Reject All",
  "modal_text": "We use cookies to enhance your experience...",
  "geo_region": "ZONE_2",
  "consents": {
    "marketing": false,
    "analytics": false,
    "personalization": false,
    "essential": true
  }
}

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:

-- Get all consent records for a specific date range
SELECT * FROM consents 
WHERE action_date >= '2024-01-01' 
AND action_date < '2024-02-01';

-- Get consent records by region
SELECT * FROM consents 
WHERE geo_region = 'ZONE_3';

-- Get specific user's consent history
SELECT * FROM consents 
WHERE consent_id = 'USER_CONSENT_ID';

-- Get latest consent for a specific user
SELECT * FROM get_consent_by_id('USER_CONSENT_ID');

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):

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

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

Essential Scripts

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

<!-- Stripe JS Library -->
<script rd-cookieflow="essential" src="https://js.stripe.com/v3/"></script>

<!-- Authentication Script -->
<script rd-cookieflow="essential">
  // Your authentication code here
</script>

Analytics Scripts

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

<!-- Google Analytics 4 -->
<script type="disabled" rd-cookieflow="analytics" async src="https://www.googletagmanager.com/gtag/js?id=YOURGA4ID"></script>
<script type="disabled" rd-cookieflow="analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'YOURGA4ID');
</script>

<!-- Hotjar -->
<script type="disabled" rd-cookieflow="analytics">
  (function(h,o,t,j,a,r){
    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
    h._hjSettings={hjid:YOUR_HOTJAR_ID,hjsv:6};
    a=o.getElementsByTagName('head')[0];
    r=o.createElement('script');r.async=1;
    r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
    a.appendChild(r);
  })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>

Marketing Scripts

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

<!-- Meta Pixel Code -->
<script type="disabled" rd-cookieflow="marketing">
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>

<!-- Google Ads Conversion Tracking -->
<script type="disabled" rd-cookieflow="marketing">
  gtag('event', 'conversion', {
    'send_to': 'AW-CONVERSION_ID/CONVERSION_LABEL',
    'value': 1.0,
    'currency': 'USD'
  });
</script>

Personalization Scripts

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

<!-- Language Preference Script -->
<script type="disabled" rd-cookieflow="personalization">
  function setLanguagePreference(lang) {
    localStorage.setItem('preferred-language', lang);
    document.documentElement.lang = lang;
  }
</script>

<!-- Theme Customization Script -->
<script type="disabled" rd-cookieflow="personalization">
  function applyUserTheme(theme) {
    document.body.className = theme;
    localStorage.setItem('user-theme', theme);
  }
</script>

Important Notes for Webflow Integration

Add attributes to embed elements: In Webflow, when adding scripts via embed elements, include the attributes in the opening <script> tag
Scripts load automatically: Once users give consent, CookieFlow™ automatically enables the appropriate scripts
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

Publish: Click Submit, name your version, and hit Publish
Test: Click Preview, enter your website URL to initiate test mode
Verify: By default, you should only see essential tags firing without further consent
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

Add the CookieFlow™ script to your Webflow project
Create the required HTML elements in your Webflow project
Add the necessary attributes to each element
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:

<script 
  src="https://cdn.jsdelivr.net/npm/@reform-digital/[email protected]/prod/index.js"
  rd-consent-storage-url="YOUR_SUPABASE_URL"
  rd-consent-storage-api="YOUR_SUPABASE_API_KEY"
></script>

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"

<div rd-cookieflow="wrapper">
  <!-- All other components go inside here -->
</div>

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

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:

<div rd-cookieflow-scroll="disabled">
  <!-- Settings modal content -->
</div>

Example Structure

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

<div rd-cookieflow="wrapper" style="display: none;">
  
  <!-- Manager Button (always visible) -->
  <div rd-cookieflow="manager">
    <button rd-cookieflow="open-settings">Cookie Settings</button>
  </div>

  <!-- Zone 1 Banner (Basic Notice) -->
  <div rd-cookieflow="banner-zone-one">
    <p>We use cookies to enhance your experience...</p>
    <button rd-cookieflow="accept">Accept</button>
  </div>

  <!-- Zone 2 Banner (Opt-Out/CCPA) -->
  <div rd-cookieflow="banner-zone-two">
    <p>We use cookies to enhance your experience...</p>
    <button rd-cookieflow="accept">Accept All</button>
    <button rd-cookieflow="reject">Reject All</button>
    <button rd-cookieflow="open-settings">Manage Preferences</button>
  </div>

  <!-- Zone 3 Banner (Opt-In/GDPR) -->
  <div rd-cookieflow="banner-zone-three">
    <p>We use cookies to enhance your experience. Choose your preferences...</p>
    <button rd-cookieflow="accept">Accept All</button>
    <button rd-cookieflow="reject">Reject All</button>
    <button rd-cookieflow="accept-selected">Accept Selected</button>
    <button rd-cookieflow="open-settings">Customize</button>
  </div>

  <!-- Settings/Preferences Modal -->
  <div rd-cookieflow="settings" rd-cookieflow-scroll="disabled">
    <h2>Cookie Preferences</h2>
    
    <!-- Marketing Toggle -->
    <div>
      <input type="checkbox" rd-cookieflow="marketing-checkbox">
      <button rd-cookieflow="toggle-interaction"></button>
      <span rd-cookieflow="marketing-state">Off</span>
    </div>

    <!-- Analytics Toggle -->
    <div>
      <input type="checkbox" rd-cookieflow="analytics-checkbox">
      <button rd-cookieflow="toggle-interaction"></button>
      <span rd-cookieflow="analytics-state">Off</span>
    </div>

    <!-- Personalization Toggle -->
    <div>
      <input type="checkbox" rd-cookieflow="personalization-checkbox">
      <button rd-cookieflow="toggle-interaction"></button>
      <span rd-cookieflow="personalization-state">Off</span>
    </div>

    <button rd-cookieflow="accept">Accept All</button>
    <button rd-cookieflow="reject">Reject All</button>
    <button rd-cookieflow="accept-selected">Accept Selected</button>
    <button rd-cookieflow="close">Close</button>
  </div>

  <!-- GDPR Consent Info Banner -->
  <div rd-cookieflow="consent-banner">
    <p>Your Consent ID: [will be populated automatically]</p>
    <button rd-cookieflow="open-settings">Manage Cookies</button>
    <button rd-cookieflow="close">Close</button>
  </div>

</div>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

CookieFlow™

Overview

Features

🔍 Automatic Geolocation

📍 Regional Compliance (3 Zones)

⏰ Configurable Cookie Expiry

📊 Consent Record Storage

🔒 Privacy Signal Respect

🤖 Bot Detection

🔄 Consent ID Tracking

🎨 Fully Customizable

Compliance

Considerations

Webflow E-Commerce is not GDPR compliant

Webflow's native video element for YouTube

Webflow's map is not GDPR compliant

Webflow's reCaptcha is not GDPR compliant

Remove <noscript> tags for compliance

Support

Getting Help

Feature Requests & Bugs

Recommended Setup

Quick Start

What's Included

Important: Script Configuration

Supabase Setup

Script Configuration

Basic Configuration

Advanced Configuration (Optional)

Store Consents

What Information is Stored

Consent Record Examples

Privacy & Security Features

Compliance Benefits

Accessing Consent Records

Consent Categories

1. Marketing Cookies

2. Analytics Cookies

3. Personalization Cookies

4. Essential Cookies (Always On)

Adding Project Scripts

Method 1: Adding Scripts Directly in Webflow

Method 2: Adding Scripts via Google Tag Manager

Manual Setup

Setup Guide

Quick Start

Adding the Script

What's Next?

Elements & Attributes

Core Components

Essential UI Elements Within Components

Example Structure

Remove `<noscript>` tags for compliance