Documentation

npm install @zerakicreative/cookie-consent

<script src="https://cdn.jsdelivr.net/npm/@zerakicreative/cookie-consent@1.0.3/dist/zeraki-cookie-consent.iife.js"></script>

<!-- 1. Load the widget -->
<script src="https://cdn.jsdelivr.net/npm/@zerakicreative/cookie-consent@1.0.3/dist/zeraki-cookie-consent.iife.js"></script>

<!-- 2. Initialise with your options -->
<script>
  ZerakiCookieBanner.init({

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

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

import { CookieBanner } from '@zerakicreative/cookie-consent';

new CookieBanner({
  companyName:            'Your Company',
  primaryColor:           '#2563EB',
  position:               'bottom-bar',
  floatingButtonPosition: 'bottom-right',
  privacyPolicyUrl:       '/privacy',
  cookiePolicyUrl:        '/cookies',
  onConsentChange: (consent) => console.log(consent),
}).init();

import { useEffect } from 'react';
import { CookieBanner } from '@zerakicreative/cookie-consent';

export default function App() {
  useEffect(() => {
    const banner = new CookieBanner({ primaryColor: '#2563EB', privacyPolicyUrl: '/privacy' }).init();
    return () => banner.destroy();
  }, []);
}

ZerakiCookieBanner.init({
  googleAnalytics: {
    measurementId:      'G-XXXXXXXXXX',  // your GA4 Measurement ID
    consentModeVersion: 'v2',
    autoLoad:           true,              // injects the gtag.js script after consent
  },
});

new CookieBanner({
  googleAnalytics: {
    measurementId:      'G-XXXXXXXXXX',
    consentModeVersion: 'v2',
    autoLoad:           true,
  },
}).init();

ZerakiCookieBanner.init({
  googleAnalytics: {
    tagManagerId:       'GTM-XXXXXXX',   // use tagManagerId instead of measurementId
    consentModeVersion: 'v2',
    autoLoad:           true,
  },
});

new CookieBanner({
  googleAnalytics: {
    tagManagerId:       'GTM-XXXXXXX',
    consentModeVersion: 'v2',
    autoLoad:           true,
  },
}).init();

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',
    });
  },
});

new CookieBanner({
  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',
    });
  },
}).init();

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',
      consent_preferences: 'granted',
    });
  },
  onRejectAll: () => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event:               'cookie_consent_rejected',
      consent_analytics:   'denied',
      consent_marketing:   'denied',
      consent_preferences: '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',
    });
  },
});

new CookieBanner({
  translations: {
    bannerTitle:      'We value your privacy',
    bannerText:       'We use cookies to improve your experience.',
    acceptAll:        'Accept all',
    rejectAll:        'Reject all',
    customize:        'Manage preferences',
    savePreferences:  'Save preferences',
    privacyPolicy:    'Privacy Policy',
    cookiePolicy:     'Cookie Policy',
    categories: {
      analytics: {
        name:        'Analytics',
        description: 'Help us understand how visitors use our site.',
      },
      marketing: {
        name:        'Marketing',
        description: 'Used to deliver personalised ads.',
      },
    },
  },
}).init();

const banner = new CookieBanner({ ... }).init();

banner.show();           // Show the consent banner
banner.hide();           // Hide the banner
banner.showModal();       // Open the preferences modal
banner.hideModal();       // Close the preferences modal
banner.acceptAll();       // Accept all cookie categories
banner.rejectAll();       // Reject all non-essential categories
banner.getConsent();      // → ConsentState | null
banner.destroy();         // Remove the widget from the DOM (cleanup)

interface ConsentState {
  necessary:   boolean;   // always true
  analytics:   boolean;
  marketing:   boolean;
  preferences: boolean;
  timestamp:   string;    // ISO 8601
  version:     string;    // matches consentVersion config
  region?:     RegionCode;
}