@reform-digital/cookie-flow

CookieFlow™

Copy to Webflow Copy to Figma Copy to Supabase

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 or returns invalid data, we default to ZONE_3 (GDPR/strictest) to stay compliant.

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

Cloudflare Worker response

• The worker returns JSON ({ country, ip }) so the client can parse it reliably.
• IPs are masked in the worker itself (last octet zero) before the JSON payload is delivered.
• supabaseClient.js still runs an additional anonymization pass as a safety net.

📍 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 website and paste it into your Webflow project. You can also copy the original Figma design so you can style CookieFlow as needed.

Copy to Webflow Copy to Figma

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 rd-cf-consent 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 the rd-consent-expiry attribute to any text element (except script tags):

<!-- Will display "6" (based on your configuration) -->
<p><span rd-consent-expiry></span> months</p>

CookieFlow™ will automatically set the text content of the element to the expiry period number 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 IP-based geolocation via a Cloudflare Worker that leverages Cloudflare's built-in geolocation data. This approach is GDPR-compliant as no third-party services receive user IP addresses.

• Primary: IP-based geolocation (via Cloudflare Worker using request.cf.country)
• Fallback: Defaults to ZONE_3 (GDPR/strictest) if geolocation fails

You can configure your Cloudflare Worker URL via the rd-geo-worker-url script attribute, or it will use the default worker URL.

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

rd-geo-worker-url (Optional)

• Your Cloudflare Worker URL for geolocation
• Format: https://your-worker.your-subdomain.workers.dev
• Default: Uses a default worker URL if not specified
• The worker should return a 2-letter country code and accept the x-cookieflow: 1 header
• 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 Analyze, 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: type="disabled" rd-cookieflow="essential"
Use for: Authentication, security, payment processing, accessibility scripts, form validation, load balancing, privacy & consent management

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

<!-- Authentication Script -->
<script type="disabled" 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/cookie-flow@1.3.8/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

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"

<!-- Example: Footer privacy link -->
<a href="#" rd-cookieflow="manager-link">Privacy Settings</a>

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:

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

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.