Get PrivacyKit running in minutes using lightweight web components that work across frameworks and static websites alike.
Add the script to your <head> and the consent dialog to your page to get started. PrivacyKit is distributed as static assets through a CDN with no npm install or dependency conflicts.
<html>
<head>
<!-- Add PrivacyKit web components: consent-dialog, consent-guard, consent-missing -->
<script type="module" src="https://cdn.privacykit.eu/v1/privacykit.esm.js"></script>
<script nomodule src="https://cdn.privacykit.eu/v1/privacykit.js"></script>
<!-- Add PrivacyKit JavaScript API for programmatic consent access (optional) -->
<script type="module" src="https://cdn.privacykit.eu/v1/index.esm.js"></script>
</head>
<body>
<!-- Add consent-dialog -->
<consent-dialog theme="standard" variant="standard"></consent-dialog>
</body>
<html>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.
Start with a built-in theme and fine-tune individual design tokens, or fully customize the dialog styling to match your brand.
<consent-dialog variant="standard" theme="standard" style="
--pk-bg-color: #faf7f2;
--pk-paper-color: #f7eede;
--pk-text-color: #3a3530;
--pk-primary-color: #b08968;
--pk-secondary-color: #d6c2b2;
--pk-text-color-on-primary: #212121;
--pk-focus-ring-color: #866346;
--pk-border-color: #d6dbe4;
--pk-border-width: 3px;
--pk-font-family: 'Segoe UI', Tahoma, sans-serif;
--pk-spacing-unit: 0.6rem;
--pk-control-radius: 10px;
--pk-dialog-radius: 20px;
--pk-dialog-shadow: 0 10px 20px rgba(0, 0, 0, 50%);
--pk-dialog-max-height: min(70dvh, 500px);
">
</consent-dialog>
Consent Guards protect execution of local JavaScript and HTML-snippets as well as third-party scripts until consent is granted. Use <consent-missing> to inform users of unavailable content as needed.
<body>
<!-- Add consent-guard(s) to block/load 3rd party scripts -->
<consent-guard consent="analytics">
<script type="text/plain" data-src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"></script>
</consent-guard>
<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>
Important: Notice that managed resources in the example uses data-src instead of src, and type="text/plain" is used for scripts. PrivacyKit activates managed content after consent is granted — otherwise resources may load immediately and appear as hardcoded in Compliance Monitor.
Add PrivacyKit Compliance Monitor to inspect tracker execution and detect activity that is not protected by consent-guard.
<body>
<!-- Add compliance-monitor to continuously validate consent enforcement -->
<compliance-monitor></compliance-monitor>
</body>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.
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();
}
function handleToggleComplianceMonitorBtnClick() {
api.toggleComplianceMonitor();
}
Improve developer experience with autocomplete, type safety, and native support for PrivacyKit web components.
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"]
}
Framework-specific setup notes for integrating PrivacyKit custom elements.
<consent-dialog> works in Server Components — drop it directly in your layout.'use client' component.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.
consent-dialog:not(:defined) [slot] {
display: none;
}
consent-guard:not([active]) {
display: none;
}
consent-missing:not([active]) {
display: none;
}