CookieCraft

Lightweight GDPR-compliant cookie consent library for any website.

Zero dependencies. Modern UI. Google Consent Mode v2 built-in. Works on Webflow, WordPress, Shopify, or any site.

Live Configurator | Demo

Features

• GDPR Compliant — Full opt-in mode, script blocking before consent, cookie purge on rejection
• Lightweight — < 15KB total (JS + CSS), zero runtime dependencies
• Modern UI — Clean design, dark/light/auto themes, smooth animations
• GTM Ready — Google Consent Mode v2 built-in (ad_storage, analytics_storage, etc.)
• Accessible — WCAG 2.2 AA, focus trapping, keyboard navigation, ARIA attributes
• Customizable — Primary color, layouts, positions, translations, CSS variables
• Universal — Works on any website via CDN (Webflow, WordPress, Shopify, custom)
• Script Blocking — Prevents tracking scripts from firing before consent
• Floating Widget — Persistent button for users to update preferences anytime
• Visual Configurator — No-code setup tool that generates ready-to-paste code

Quick Start

Add this before </body> on your site:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cookiecraft@1/dist/cookiecraft.css">
<script src="https://cdn.jsdelivr.net/npm/cookiecraft@1/dist/cookiecraft.min.js"></script>

<script>
new CookieCraft.CookieConsent({
  primaryColor: '#0066cc',
  categories: {
    necessary: { enabled: true, readOnly: true, label: 'Essential', description: 'Required for the website to function.' },
    analytics: { enabled: true, readOnly: false, label: 'Analytics', description: 'Help us understand how you use our site.' },
    marketing: { enabled: true, readOnly: false, label: 'Marketing', description: 'Used to deliver relevant ads.' }
  },
  translations: {
    title: 'Your privacy matters',
    description: 'We use cookies to improve your experience. You choose which ones you accept.'
  }
}).init();
</script>

Or use the Visual Configurator to generate your code without writing anything.

Platform-specific instructions

Webflow — Paste in Site Settings > Custom Code > Footer Code.

WordPress — Paste in your theme's footer.php before </body>, or use a "Insert Headers and Footers" plugin.

Shopify — Paste in Online Store > Themes > Edit Code > theme.liquid before </body>.

Script Blocking

Change tracking scripts to type="text/plain" with a data-cookieconsent attribute. CookieCraft blocks them until the user consents:

<!-- Google Analytics — blocked until analytics consent -->
<script type="text/plain" data-cookieconsent="analytics"
  src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>

<!-- Facebook Pixel — blocked until marketing consent -->
<script type="text/plain" data-cookieconsent="marketing">
  fbq('init', 'YOUR_PIXEL_ID');
  fbq('track', 'PageView');
</script>

Layout Options

Banner Layouts

| Layout | Description | |---|---| | bar | Full-width banner at top or bottom | | box | Compact modal in corner or center | | floating | Small notification-style banner |

Positions

bottom (default), top, center, bottom-left, bottom-right

Floating Widget

A permanent button that stays visible after consent, letting users modify preferences:

new CookieCraft.CookieConsent({
  showWidget: true,                  // default: true
  widgetPosition: 'bottom-left',     // default: 'bottom-left'
  widgetStyle: 'compact',            // 'compact' or 'full'
});

Examples

// Full-width bar at bottom (classic)
new CookieCraft.CookieConsent({ layout: 'bar', position: 'bottom' }).init();

// Compact box in bottom-right (modern)
new CookieCraft.CookieConsent({ layout: 'box', position: 'bottom-right' }).init();

// Centered modal with overlay (maximum attention)
new CookieCraft.CookieConsent({
  layout: 'box',
  position: 'center',
  disablePageInteraction: true
}).init();

GTM Consent Mode v2

CookieCraft natively supports Google Consent Mode v2. Just enable it:

<!-- In HEAD, before GTM -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'analytics_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied'
  });
</script>

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){...})(window,document,'script','dataLayer','GTM-XXXX');</script>

<!-- In FOOTER, with CookieCraft -->
<script>
new CookieCraft.CookieConsent({
  gtmConsentMode: true,
  // ...
}).init();
</script>

CookieCraft automatically maps categories to GTM signals:

| Category | GTM Signals | |---|---| | marketing | ad_storage, ad_user_data, ad_personalization | | analytics | analytics_storage | | preferences | functionality_storage, personalization_storage |

Configuration

interface ConsentConfig {
  // Core
  mode?: 'opt-in' | 'opt-out';          // default: 'opt-in'
  autoShow?: boolean;                    // default: true
  revision?: number;                     // increment to re-ask consent

  // Categories
  categories?: Record<string, {
    enabled: boolean;
    readOnly: boolean;
    label: string;
    description: string;
  }>;

  // Appearance
  theme?: 'light' | 'dark' | 'auto';    // default: 'light'
  layout?: 'bar' | 'box' | 'floating';  // default: 'box'
  position?: string;                     // default: 'bottom-left'
  primaryColor?: string;                 // hex color
  backdropBlur?: boolean;
  animationStyle?: 'smooth' | 'minimal';

  // Widget
  showWidget?: boolean;                  // default: true
  widgetPosition?: string;               // default: 'bottom-left'
  widgetStyle?: 'compact' | 'full';      // default: 'compact'

  // Content
  translations?: Translation;

  // GTM
  gtmConsentMode?: boolean;              // default: false

  // Accessibility
  disablePageInteraction?: boolean;      // default: false

  // Callbacks
  onAccept?: (categories) => void;
  onChange?: (categories) => void;
  onReject?: () => void;
}

API

const cc = new CookieCraft.CookieConsent({ /* config */ });

cc.init();                // Initialize and show banner if needed
cc.show();                // Show banner manually
cc.hide();                // Hide banner
cc.showPreferences();     // Open preferences modal
cc.getConsent();          // Get current consent record
cc.reset();               // Clear consent and re-show banner
cc.destroy();             // Remove all UI elements

// Events
cc.on('consent:accept', (categories) => { /* ... */ });
cc.on('consent:reject', (categories) => { /* ... */ });
cc.on('consent:update', (categories) => { /* ... */ });
cc.on('preferences:show', () => { /* ... */ });
cc.on('script:activated', (script) => { /* ... */ });

All Events

| Event | Payload | Description | |---|---|---| | consent:init | — | Library initialized | | consent:show | — | Banner shown | | consent:accept | categories | User accepted all | | consent:reject | categories | User rejected non-essential | | consent:update | categories | Consent changed via preferences | | consent:load | record | Stored consent loaded | | preferences:show | — | Preferences modal opened | | preferences:hide | — | Preferences modal closed | | script:activated | element | Blocked script re-enabled |

Styling

Override any style with CSS variables:

:root {
  --cc-primary: #0066cc;
  --cc-bg: #ffffff;
  --cc-text: #1a1a1a;
  --cc-text-secondary: #666666;
  --cc-padding: 1.5rem;
  --cc-gap: 0.75rem;
  --cc-border-radius: 12px;
  --cc-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  --cc-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

Browser Support

Chrome, Edge, Firefox, Safari (last 2 versions), iOS Safari, Chrome Android.

Why CookieCraft?

| | CookieCraft | Cookiebot | OneTrust | |---|---|---|---| | Price | Free | From 12/mo | From 200/mo | | Size | ~15KB | ~100KB+ | ~150KB+ | | Dependencies | 0 | Multiple | Multiple | | Self-hosted | Yes | No | No | | GTM Consent Mode v2 | Yes | Yes | Yes | | Visual Configurator | Yes | Dashboard | Dashboard | | Open Source | MIT | No | No |

Development

npm install        # Install dependencies
npm run dev        # Watch mode
npm run build      # Production build
npm test           # Run tests
npm run lint       # Lint
npm run type-check # TypeScript check
npm run size       # Bundle size check

License

MIT