PrivacyKit
PrivacyKit for Product Teams

Ship GDPR- and ePrivacy-compliant consent in minutes

PrivacyKit helps teams launch consent banners, block tracking until users give consent, and keep performance fast — with no account or setup required. Works with any stack.

Quick start

index.html
 
<html>
  <head>
    <!-- Add PrivacyKit web components: consent-dialog, consent-guard, consent-missing -->
    <script type="module" src="https://cdn.privacykit.eu/privacykit/privacykit.esm.js"></script>
    <script nomodule src="https://cdn.privacykit.eu/privacykit/privacykit.js"></script>
    <!-- Add PrivacyKit JavaScript API for frameworks like React and Vue (optional) -->
    <script type="module" src="https://cdn.privacykit.eu/privacykit/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="
  --pk-bg-color: #f8fffb;
  --pk-text-color: #1f2f25;
  --pk-primary-color: #0f766e;
  --pk-radius: 10px;
  --pk-font-family: 'Segoe UI', Tahoma, sans-serif;
  --pk-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.PrivacyKit object. The following function are supported:

const api = window.PrivacyKit;
 
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 privacykit.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 PrivacyKit integrated.

Built by European developers for EU markets

PrivacyKit works out of the box with no setup or account required. A trial is included — activate your subscription to keep everything running without limitations.

Customer reviews