Get PrivacyKit running in minutes using lightweight web components that work across frameworks and static websites alike.
Add PrivacyKit to your site using CDN scripts or by installing the NPM package. Choose the method that fits your project setup.
Add the scripts to your website <head>. Works with WordPress, Shopify, Wix, and any website that supports custom HTML.
<html>
<head>
<!-- Add PrivacyKit web components: consent-dialog, consent-guard, consent-missing, compliance-monitor -->
<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>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>Most tracking technologies were built to collect data, not to support visitor consent. Consent Guards prevent third-party scripts and embedded content from executing until consent is granted. Use <consent-missing> to inform visitors of unavailable content as needed.
<body>
<!-- Add consent-guard(s) to manage 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>
<!-- Add consent-guard(s) to manage embedded content -->
<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 discover trackers, validate consent protection, and detect unmanaged activity across your website — giving developers and compliance teams access to runtime compliance validation without affecting the visitor experience.
<body>
<!-- Add compliance-monitor to continuously validate consent enforcement -->
<compliance-monitor></compliance-monitor>
</body>See PrivacyKit in action with live HTML and React examples.
Each demo includes a Compliance Monitor to inspect tracker execution in real time, a Consent Test Panel to simulate consent states and first-time visitor behavior, and interactive consent-guard examples — validating that scripts and embedded content are correctly blocked or allowed based on the consent each user grants. Both also feature a consent-dialog styled with design tokens. The HTML demo integrates via CDN script tags compatible with any SSR setup.
PrivacyKit includes a 10-day trial by default, allowing you to integrate and test the platform before activating a subscription.
After the trial period expires, PrivacyKit continues to operate in a limited mode rather than disabling existing integrations.
Activation status is available through the JavaScript API, logged in the browser console during initialization, and can also be checked using the activation status lookup.