Quick Start

Get PrivacyKit running in minutes using lightweight web components that work across frameworks and static websites alike.

Add PrivacyKit to your site

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

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 programmatic consent access (optional) -->
    <script type="module" src="https://cdn.privacykit.eu/privacykit/index.esm.js"></script>
  </head>
  <body>
    <!-- Add consent-guard(s) to block/load 3rd party scripts -->
    <consent-guard consent="analytics+marketing">
      <script type="text/plain" data-src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"></script>
    </consent-guard>
    <!-- Add consent-dialog -->
    <consent-dialog theme="standard" 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.

PrivacyKit includes a 10-day trial by default, so you can integrate and test before activating a subscription. Activation status is available through the JavaScript API, logged in the browser console, and can also be checked using the activation status lookup.

Block embedded content until consent is granted

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

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

Access consent from JavaScript

Use window.PrivacyKit to read consent, check consent expressions, open dialogs, and listen for consent changes. This is useful when your application needs programmatic control, such as in React, Vue, or plain JavaScript.

JavaScript

const api = window.PrivacyKit;

api.onReady(() => {
  const consent = window.PrivacyKit.readConsent();
  const initialState = consent ? JSON.stringify(consent, null, 2) : "";
  console.log(initialState);
});

api.onConsentChanged((consent) => {
  const updatedState = consent ? JSON.stringify(consent, null, 2) : "";
  console.log(updatedState);
});

function handleOpenConsentDialogBtnClick() {
  api.openConsentDialog();
}

function handleOpenPrivacyPolicyDialogBtnClick() {
  api.openPrivacyPolicyDialog();
}

Framework notes

Framework-specific setup notes for integrating PrivacyKit custom elements.

React: custom element typings ship in the distributed definition file — privacykit.d.ts.
Vue 3: configure compilerOptions.isCustomElement for PrivacyKit tags.
Angular: add CUSTOM_ELEMENTS_SCHEMA where custom elements are used.
Svelte: no extra setup needed for runtime usage.

Next.js note

When PrivacyKit is loaded via script tags, call API methods from client components after the script finishes loading.

'use client';

import { useEffect } from 'react';

export default function Example() {
  useEffect(() => {
    const stop = window.PrivacyKit?.onConsentChanged(consent => {
      console.log(consent);
    });

    return () => {
      stop?.();
    };
  }, []);

  return null;
}

tsconfig.json

In modern tooling (Next.js / Vite / TypeScript 5+), .d.ts files outside src must be explicitly included to be picked up by the compiler.

{ 
  "include": ["src", "types/**/*.d.ts"] 
}

Style notes

Avoid flickering before the web components finish loading. Without this snippet the slotted or guarded HTML can flash briefly when:

consent-dialog can flash briefly if slotted elements are used and if they render before the component definition loads.
consent-guard can flash briefly if it's used for conditional HTML and it renders before the component activates.
consent-missing can flash briefly if consent-missing is used and it renders before the component activates.

Add styling in your light DOM to avoid flickering.

CSS
consent-dialog:not(:defined) [slot] {
  display: none;
}

consent-guard:not([active]) {
  display: none;
}

consent-missing:not([active]) {
  display: none;
}
If you use slotted content or you use consent-guards with HTML - include this snippet in your global stylesheet or a 