🍪 Fake Cloudflare Zaraz Consent - Live Demo

This demo demonstrates all features of the fake Zaraz consent management system for local development.

⏳ Loading demo...
📚 API Reference: This demo implements the official Cloudflare Zaraz Consent API - all code examples below work with real Zaraz in production.
📦 Installation: Add this package to your local development setup:
npm install fake-cloudflare-zaraz-consent

Fake Zaraz Status

Modal Controls

// Using zaraz-ts import { showConsentModal } from 'zaraz-ts'; showConsentModal();
window.zaraz.consent.modal = false;

Quick Actions

// Using zaraz-ts import { acceptAllConsent } from 'zaraz-ts'; acceptAllConsent();
// Using zaraz-ts import { rejectAllConsent } from 'zaraz-ts'; rejectAllConsent();
window.zaraz.consent.set({ functional: true, analytics: false, marketing: false, preferences: false });

Individual Purposes

// Get consent for specific purpose const hasAnalytics = window.zaraz.consent.get('analytics'); // Set consent for specific purpose window.zaraz.consent.set({ analytics: true }); // Using zaraz-ts for conditional loading import { ifConsentGranted } from 'zaraz-ts'; await ifConsentGranted('analytics', () => { // Load analytics script console.log('Analytics enabled'); });

Advanced (zaraz-ts)

// Using zaraz-ts for conditional loading import { ifConsentGranted } from 'zaraz-ts'; await ifConsentGranted('analytics', () => { loadAnalyticsScript(); });
// Using zaraz-ts debug function import { debugConsentState } from 'zaraz-ts'; await debugConsentState();
// Test zaraz-ts features import { getAllConsent, hasConsentBeenSet } from 'zaraz-ts'; const consent = await getAllConsent(); const isSet = await hasConsentBeenSet();
window.zaraz.consent.sendQueuedEvents();
// Clear consent storage and reload localStorage.removeItem('demo_consent'); location.reload();
// Using zaraz-ts import { getAllConsent } from 'zaraz-ts'; const consent = await getAllConsent(); console.log(consent);

Console Logs & Events

// Listen for consent events (traditional) document.addEventListener('zarazConsentAPIReady', () => { console.log('Zaraz Consent API is ready'); }); // Using zaraz-ts for consent changes import { onConsentChange } from 'zaraz-ts'; const unsubscribe = onConsentChange((consent) => { console.log('Consent updated:', consent); }); // Global tools available in console window.zarazConsentTools.debug(); window.zarazConsentTools.getAll();
Logs will appear here...