Cookie Consent Widget

Privacy-first consent
built for the whole world.

A beautiful, GDPR-compliant cookie consent widget that supports CCPA, LGPD, PDPA and more. Integrates with Google Analytics Consent Mode v2 out of the box.

GDPR / UK GDPR
CCPA / CPRA
LGPD (Brazil)
PDPA (SEA)
POPIA (South Africa)
PIPEDA (Canada)
Google Consent Mode v2
Try it live
Loading demo…
Installation
1Script Tag — CDNEasiest · no build step
jsDelivr CDN
<!-- Paste before </body> in your HTML -->
<script src="https://cdn.jsdelivr.net/npm/@zerakicreative/cookie-consent@1.0.3/dist/zeraki-cookie-consent.iife.js"></script>
<script>
  ZerakiCookieBanner.init({

    // ── Branding ─────────────────────────────────────────
    companyName:            'Your Company',
    primaryColor:           '#2563EB',         // any hex / RGB / HSL value

    // ── Banner layout ────────────────────────────────────
    position:               'bottom-bar',     // 'bottom-bar' | 'top-bar' | 'bottom-left' | 'bottom-right'
    floatingButtonPosition: 'bottom-right',  // 'bottom-right' | 'bottom-left'

    // ── Policy links ─────────────────────────────────────
    privacyPolicyUrl:       '/privacy',
    cookiePolicyUrl:        '/cookies',

    // ── Preferences text (all optional) ─────────────────
    translations: {
      bannerTitle:     'We use cookies',
      bannerText:      'We use cookies to improve your experience.',
      acceptAll:       'Accept All',
      rejectAll:       'Reject All',
      customize:       'Preferences',
      savePreferences: 'Save Preferences',
    },

    // ── Callbacks ────────────────────────────────────────
    onConsentChange: (consent) => console.log(consent),
    onAcceptAll:     (consent) => console.log('Accepted', consent),
    onRejectAll:     ()        => console.log('Rejected'),
  });
</script>
2npm PackageReact · Vue · Svelte
Install
npm install @zerakicreative/cookie-consent
ES Module
import { CookieBanner } from '@zerakicreative/cookie-consent';

new CookieBanner({
  companyName:            'Your Company',
  primaryColor:           '#2563EB',
  position:               'bottom-bar',
  floatingButtonPosition: 'bottom-right',
  privacyPolicyUrl:       '/privacy',
  cookiePolicyUrl:        '/cookies',
  googleAnalytics: {
    measurementId:      'G-XXXXXXXXXX',
    consentModeVersion: 'v2',
    autoLoad:           true,
  },
  onConsentChange: (consent) => console.log(consent),
}).init();
View full documentation →
Analytics & Tag Manager Integration
1Google Consent Mode v2Built-in · Recommended

Pass the googleAnalytics option and the banner handles Consent Mode signalling automatically — no extra callbacks needed.

CDN
ZerakiCookieBanner.init({
  googleAnalytics: {
    measurementId:      'G-XXXXXXXXXX',  // your GA4 Measurement ID
    tagManagerId:       'GTM-XXXXXXX',   // optional — include if using GTM
    consentModeVersion: 'v2',
    autoLoad:           true,              // loads GA script after consent is granted
  },
});
npm / ES Module
new CookieBanner({
  googleAnalytics: {
    measurementId:      'G-XXXXXXXXXX',
    tagManagerId:       'GTM-XXXXXXX',
    consentModeVersion: 'v2',
    autoLoad:           true,
  },
}).init();
2Manual gtag.jsCustom control

Use callbacks to fire gtag() consent updates directly when the user accepts or rejects.

CDN
ZerakiCookieBanner.init({
  onAcceptAll: (consent) => {
    gtag('consent', 'update', {
      analytics_storage:   'granted',
      ad_storage:          'granted',
      ad_user_data:        'granted',
      ad_personalization:  'granted',
    });
  },
  onRejectAll: () => {
    gtag('consent', 'update', {
      analytics_storage:   'denied',
      ad_storage:          'denied',
      ad_user_data:        'denied',
      ad_personalization:  'denied',
    });
  },
  onConsentChange: (consent) => {
    gtag('consent', 'update', {
      analytics_storage:  consent.analytics  ? 'granted' : 'denied',
      ad_storage:         consent.marketing  ? 'granted' : 'denied',
      ad_user_data:       consent.marketing  ? 'granted' : 'denied',
      ad_personalization: consent.marketing  ? 'granted' : 'denied',
    });
  },
});
3Google Tag Manager — dataLayerGTM events

Push consent events to the GTM dataLayer so your GTM tags can fire based on consent status.

CDN & npm — same pattern
ZerakiCookieBanner.init({  // or: new CookieBanner({...}).init()
  onAcceptAll: (consent) => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event:              'cookie_consent_accepted',
      consent_analytics:  'granted',
      consent_marketing:  'granted',
    });
  },
  onRejectAll: () => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event:              'cookie_consent_rejected',
      consent_analytics:  'denied',
      consent_marketing:  'denied',
    });
  },
  onConsentChange: (consent) => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event:              'cookie_consent_update',
      consent_analytics:  consent.analytics ? 'granted' : 'denied',
      consent_marketing:  consent.marketing ? 'granted' : 'denied',
      consent_preferences: consent.preferences ? 'granted' : 'denied',
    });
  },
});
Features
GDPR / UK GDPR
Full opt-in consent for EU/EEA
CCPA / CPRA
California consumer privacy
LGPD (Brazil)
Lei Geral de Proteção de Dados
PDPA (SEA)
Thailand / Singapore data protection
PIPEDA (Canada)
Canadian privacy law
POPIA (South Africa)
Protection of Personal Information Act
Google Consent Mode v2
Full ad_user_data + ad_personalization
Google Tag Manager
GTM dataLayer integration
Auto Region Detection
Timezone-based regulation detection
Any Brand Colour
Pass any hex / RGB / HSL value
GSAP Animations
Premium spring entrance & exit
Accessible (WCAG 2.1)
Focus trapping, ARIA, keyboard nav
Consent Versioning
Re-prompt when policy changes
Toggle Persistence
State saved in localStorage + cookie
Cookie Button Position
Bottom-left or bottom-right
Zero Extra Dependencies
Only GSAP — no framework required