CookieKit
CookieKit for Product Teams

Ship trust-first cookie consent in minutes

CookieKit helps teams launch consent banners, block trackers until consent is given, and keep performance fast — with no account or setup required. Works with any stack.

Quick start

index.html
 
<html>
  <head>
    <!-- Add CookieKit web components: consent-dialog, consent-guard, consent-missing -->
    <script type="module" src="https://cdn.cookiekit.eu/cookiekit/cookiekit.esm.js"></script>
    <script nomodule src="https://cdn.cookiekit.eu/cookiekit/cookiekit.js"></script>
    <!-- Add CookieKit JavaScript API for frameworks like React and Vue (optional) -->
    <script type="module" src="https://cdn.cookiekit.eu/cookiekit/index.esm.js"></script>
    <!-- Add consent-guard(s) to block/load 3rd party scripts -->
    <consent-guard consent="marketing">
      <script type="text/plain" data-src="https://example.com/marketing-script.js"></script>
    </consent-guard>
  </head>
  <body>
    <!-- Add consent-dialog -->
    <consent-dialog variant="standard"></consent-dialog>
  </body>
<html>

Scripts inside consent-guard is set to text/plain and src parameter is prefixed with data-src, to ensure they are evaluted before they are loaded. Read the full Component Reference here.

Consent Dialog Variants

Customize Styling and Content

Style your consent dialog using design tokens and tailor content with flexible HTML slots.

<consent-dialog variant="standard" style="
  --ck-bg-color: #f8fffb;
  --ck-text-color: #1f2f25;
  --ck-primary-color: #0f766e;
  --ck-radius: 10px;
  --ck-font-family: 'Segoe UI', Tahoma, sans-serif;
  --ck-spacing-unit: 0.9rem;
">
  <span slot="dialog-title">Your privacy choices</span>
  <span slot="marketing-content">
    <b>We currently do not collect cookies for marketing purposes.</b>
  </span>
</consent-dialog>

Read the full Component Reference here.

Be compliant with Consent Guard

Guards protect exectution of 3rd party scripts as well as local JavaScript and HTML-snippets. Use <consent-missing> to inform users of missing content as needed.

page.html
 
<body>
  <consent-guard id="123" consent="analytics+marketing">
    <iframe data-src="https://www.youtube.com/embed/abc123"></iframe>
  <consent-guard>
  <consent-missing for="123">
    <p>We need your consent to Analytics and Marketing cookies to show you this content.</p>
  </consent-missing>
</body>

The consent parameter takes an expression which can be analytics, marketing or preferences, or a combination of these using plus-sign (+) or pipe (|). "analytics|marketing" means that scripts are loaded if user has given consent to one or the other.

Works with any stack (React, Vue, plain JS)

JavaScript API for frameworks like React and Vue, where rendering is handled outside the DOM. JavaScript API is provided via the global window.CookieKit object. The following function are supported:

const api = window.CookieKit;
 
api.onReady(callback: () => void): () => void
 
api.readConsent(): { 
  analytics: boolean; 
  marketing: boolean; 
  preferences: boolean; 
} | null
 
api.hasConsent(expression?: string): boolean
 
api.openConsentDialog(): void
 
api.onConsentDialogClosed(callback: () => void): () => void
 
api.onConsentChanged(callback: (consent: {
  analytics: boolean;
  marketing: boolean;
  preferences: boolean;
} | null) => void): () => void
 
api.getSubscriptionStatus(): {
  status: string | null;
  billingInterval: string | null;
  subscriptionEnd: string | null;
  trailingEnd: string | null;
} | null

TypeScript support included — add cookiekit.d.ts to your project for full autocomplete and type safety.

Read the full API Reference here.

Lets code!

A Vite React + TypeScript example with CookieKit integrated.

Built by European developers for EU markets

CookieKit works out of the box with no setup or account required. When you're ready, activate your subscription to keep everything running without limitations.

Customer reviews