ConsentManager - Live Demo

📊 Current Consent Status

Cookie Name:

Consent Valid:

Accept Type: -

Last Updated: -

🎨 Style Configurator

Customize the consent banner appearance in real-time!

🎨 Colors

Primary Color:

Background Color:

Text Color:

Button Text:

📐 Layout & Position

Layout Type:

Position:

Transition:

📝 Typography

Font Size: 14px

Border Radius: 12px

Button Radius: 8px

🎮 Interactive Controls

Test the consent manager functionality:

Modal Controls

Accept/Reject Controls

Testing Controls

🔒 Tracking Script Demo

These simulate Google Analytics and Facebook Pixel - they only run if you accept the corresponding category:

📊 Analytics (Google Analytics)

Waiting for consent...

📢 Marketing (Facebook Pixel)

Waiting for consent...

How it works: These scripts have data-category="analytics" and type="text/plain". ConsentManager automatically converts them to type="text/javascript" when you accept the category.

📡 Event Log

Watch consent events in real-time:

[Init] Event logger started

📚 API Reference

Try these commands in the browser console:

ConsentManager.getUserPreferences() - Get current preferences

ConsentManager.acceptedCategory('analytics') - Check if category accepted

ConsentManager.getCookie() - Get cookie data

ConsentManager.validConsent() - Check if consent is valid

ConsentManager.reset(true) - Reset everything

🚀 Integration Info

CDN JavaScript:


                        https://storage.googleapis.com/consent-manager-cdn-tanapatj-jkt/v1.0.0/consent-manager.umd.js

CDN CSS:


                        https://storage.googleapis.com/consent-manager-cdn-tanapatj-jkt/v1.0.0/consent-manager.css

Region: Asia-Southeast3 (Bangkok 🇹🇭)

Version: 1.0.0

🔥 BigQuery Logging ACTIVE + 🔐 AUTHENTICATED

This demo logs detailed consent events to BigQuery in real-time with API key authentication!

Dataset: conicle-ai-dev.consent_analytics

Table: consent_events (37 columns)

Cloud Function: logConsentAuth (asia-southeast1)

Features: ✅ API Key Auth, ✅ Domain Whitelist, ✅ Raw IP, ✅ UTM, ✅ Thai labels

🔐 API Key: Loaded securely via server config

📊 What's logged: IP address, browser, device, UTM parameters, action labels (Thai/English), and more!

Try it: Accept/reject cookies and check BigQuery to see detailed logs! ✅

💡 Query your data: See bigquery/example-queries.sql in the GitHub repo for analytics queries.