PrivacyKit
PrivacyKit for Product Teams

Ship GDPR- and ePrivacy-compliant consent in minutes

PrivacyKit enables consent banners, blocks tracking until users give consent, and keeps performance fast — with minimal setup and no account required. Works across subdomains. Works with any stack.

Consent Dialog Variants

Production-ready dialog layouts that stay up to date and require no maintenance.

Quick Start

Add the script to your <head> and the consent dialog to your page to get started. No npm install. No dependency conflicts.

HTMLComponent Reference
<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.

Customize Styling and Content

Style your consent dialog using design tokens and tailor content with flexible HTML slots using styles from your own light DOM.

HTMLComponent Reference
<consent-dialog variant="standard" style="
  --pk-bg-color: #faf7f2;
  --pk-paper-color: #f7eede;
  --pk-text-color: #3a3530;
  --pk-primary-color: #b08968;
  --pk-secondary-color: #d6c2b2;
  --pk-border-color: #d6dbe4;
  --pk-font-family: 'Segoe UI', Tahoma, sans-serif;
  --pk-spacing-unit: 0.6rem;
  --pk-control-radius: 10px;
  --pk-dialog-radius: 20px;
  --pk-dialog-shadow: 10px 20px rgba(0, 0, 0, 0.5);
">
  <div slot="dialog-title">
    <h2 class="your-class">We use cookies</h2>
  </div>
  <span slot="marketing-content">
    <b>We currently do not collect cookies for marketing purposes.</b>
  </span>
</consent-dialog>

Enforce consent 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.

HTMLComponent Reference
<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>Please accept analytics cookies and marketing cookies to view 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. TypeScript support included — add privacykit.d.ts to your project for autocomplete and type safety.

TypeScriptAPI Reference
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
JavaScript API is provided via the global window.PrivacyKit object.

Less code. More compliance.

See PrivacyKit in action in a live Vite + React + TypeScript demo.

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.

Partner with PrivacyKit. Mid-size to large companies can apply to become a PrivacyKit partner. Approved partners will have their brand logo featured and receive a free subscription for the first year. This is a limited offer. Contact support@privacykit.eu to apply.

Customer reviews