Public web component documentation for consent-dialog, consent-guard, and consent-missing.
Load PrivacyKit once globally before using any of the custom elements.
<script type="module" src="https://cdn.privacykit.eu/privacykit.esm.js"></script>Main entry component for the PrivacyKit consent UI and orchestration logic.
| Property | Type | Default / Required | Description |
|---|---|---|---|
| variant | standard | modern | modest | standard | Visual variant of the dialog. |
| expires-days | number | 180 | Cookie lifetime in days. |
| version | number | 0 | Consent schema version used for re-consent decisions. |
| locale | da | de | en | es | fi | fr | it | nl | no | pl | sv | browser-derived | Locale override. |
| hide-necessary | boolean | unset | Hides necessary consent section in the dialog. |
| hide-preferences | boolean | unset | Hides the preferences category. |
| hide-analytics | boolean | unset | Hides the analytics category. |
| hide-marketing | boolean | unset | Hides the marketing category. |
| hide-readmore | boolean | unset | Hides the expandable Read More section. |
| hide-privacy-policy-link | boolean | unset | Hides the default Privacy Policy link. Typically used when you supply your own policy link in the Read More section. |
| demo | boolean | unset | Demo mode: disables auto-open and limits certain features. Not GDPR compliant and must not be used in production. |
| dismissible | boolean | false | Controls whether dialog can be dismissed via backdrop/escape if no accept/reject consent has been given. |
openDialog(): Promise<void>
closeDialog(): Promise<void>
checkSubscriptionStatus(): Promise<void>Named slots let you inject custom markup into specific parts of a component using the slot attribute — giving you full control over content without modifying the component itself.
| Slot Name | Description |
|---|---|
| dialog-logo | Optional logo content shown to the left of the dialog title. |
| dialog-title | Overrides the title in the dialog header. |
| dialog-summary-part-1 | Injects custom text for the first intro paragraph below the hero title. |
| dialog-summary-part-2 | Injects custom text for the second intro paragraph that explains consent choices. |
| necessary-content | Replaces the default description for the Necessary category. |
| preferences-content | Custom text inside the Preferences category accordion body. |
| analytics-content | Custom text inside the Analytics category accordion body. |
| marketing-content | Custom text inside the Marketing category accordion body. |
| read-more-title | Sets the heading for the expandable “Read more” section at the bottom. |
| read-more-content | Supplies the body content shown when the “Read more” section expands. |
| privacy-policy-content | Replaces the default Privacy Policy copy. Use wording vetted by your own legal counsel, because PrivacyKit can’t verify GDPR compliance once you customize it. |
Example
<consent-dialog variant="standard" locale="en" version="1">
<img slot="dialog-logo" width="100px" src="/logo.png" alt="Company logo" />
<div slot="dialog-title" class="your-class">
<h2>Your privacy choices</h2>
</div>
<span slot="analytics-content">We use analytics to improve product quality.</span>
</consent-dialog>
Design tokens expose a stable set of CSS variables that let you customize appearance—colors, spacing, typography, and more—without touching the component's internal implementation.
| Design Tokens | Description |
|---|---|
| --pk-bg-color | Surface background for the entire dialog shell. |
| --pk-paper-color | Paper surface for cards, accordions, and panels inside the dialog. |
| --pk-text-color | Base text color applied to headings and body text. |
| --pk-primary-color | Primary accent used for CTAs, focus rings, and links. |
| --pk-secondary-color | Secondary accent, mainly used for the switch/thumb UI state. |
| --pk-border-color | Border color applied to panel outlines, tables, and divider strokes. |
| --pk-border-width | Border width applied to panel outlines, tables, and divider strokes. |
| --pk-font-family | Font stack for all textual elements; falls back to your body font token. |
| --pk-spacing-unit | Spacing scale unit that drives paddings/gaps between sections. |
| --pk-control-radius | Corner radius for buttons, inputs, and interactive controls. |
| --pk-dialog-radius | Corner radius for the outer consent dialog container. |
| --pk-dialog-shadow | Box shadow applied to the consent dialog overlay. |
Example
<consent-dialog variant="standard" style="
--pk-bg-color: #faf7f2;
--pk-paper-color: #f7eede;
--pk-primary-color: #b08968;
--pk-font-family: 'Segoe UI', Tahoma, sans-serif;
--pk-control-radius: 10px;
--pk-dialog-radius: 20px;
--pk-dialog-shadow: 10px 20px rgba(0, 0, 0, 0.5);
">
</consent-dialog>These snippets show the built-in CSS variable defaults for each dialog variant.
standard
--pk-bg-color: #ffffff;
--pk-paper-color: #f5f7fb;
--pk-text-color: #1f2937;
--pk-primary-color: #00297a;
--pk-secondary-color: #d9e3f5;
--pk-border-color: #d6dbe4;
--pk-border-width: 1px;
--pk-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--pk-spacing-unit: 8px;
--pk-control-radius: 8px;
--pk-dialog-radius: 10px;
--pk-dialog-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);modern
--pk-bg-color: #181b20;
--pk-paper-color: #22262c;
--pk-text-color: #e5e7eb;
--pk-primary-color: #4da3ff;
--pk-secondary-color: #2d3743;
--pk-border-color: #323844;
--pk-border-width: 1px;
--pk-font-family: Inter, 'Segoe UI', sans-serif;
--pk-spacing-unit: 8px;
--pk-control-radius: 14px;
--pk-dialog-radius: 18px;
--pk-dialog-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);modest
--pk-bg-color: #fbfaf8;
--pk-paper-color: #f3f1ee;
--pk-text-color: #3f3a36;
--pk-primary-color: #4f7a73;
--pk-secondary-color: #d6e3df;
--pk-border-color: #e7e2dc;
--pk-border-width: 1px;
--pk-font-family: ui-sans-serif, system-ui, sans-serif;
--pk-spacing-unit: 8px;
--pk-control-radius: 8px;
--pk-dialog-radius: 10px;
--pk-dialog-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);Conditionally renders children once the provided consent expression evaluates to true.
| Property | Type | Default / Required | Description |
|---|---|---|---|
| consent | string | all categories | Consent expression to evaluate before rendering children. |
Example 1 - Block/load scripts
<consent-guard consent="marketing">
<script type="text/plain" data-src="https://www.googletagmanager.com/gtm/js"></script>
</consent-guard>
Example 2 - Block/load HTML content
<consent-guard consent="analytics+marketing">
<iframe
title="YouTube video"
data-src="https://www.youtube.com/embed/abc123"
width="560"
height="315"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</consent-guard>
Render fallback content whenever an associated consent-guard blocks the primary experience.
| Property | Type | Default / Required | Description |
|---|---|---|---|
| for | string | required | Id of the related <consent-guard> element. |
<consent-guard id="analytics-guard" consent="analytics">
<script type="text/plain" data-src="https://example.com/analytics.js"></script>
</consent-guard>
<consent-missing for="analytics-guard">
Please accept analytics cookies to continue.
</consent-missing>
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;
}