Public web component documentation for consent-dialog, consent-guard, consent-missing, and compliance-monitor.
Main entry component for the PrivacyKit consent UI and orchestration logic.
| Property | Type | Default / Required | Description |
|---|---|---|---|
| variant | standard | panel | modern | modest | standard | Visual variant of the dialog. |
| theme | standard | dark | teal | slate | light | vibrant | high-contrast | standard | Visual theme 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. |
Example
<consent-dialog theme="panel" variant="dark" expires-days="90"
version="1" locale="en" hide-marketing hide-privacy-policy-link dismissible>
</consent-dialog>Inject custom content into specific parts of a component using named HTML slots — giving you full control over content and styling without modifying the component itself.
| Slot Name | Description |
|---|---|
| dialog-logo | Optional logo content shown in the dialog header. |
| dialog-logo-alt | Alternative placement for a brand logo, shown at the top right of the dialog-summary-part-1 text. |
| dialog-title | Overrides the title in the dialog header. |
| dialog-summary-part-1 | Injects custom text for the first intro paragraph below the dialog 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 theme="standard" 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>We use cookies</h2>
</div>
<span slot="marketing-content">
<b>We currently do not collect cookies for marketing purposes.</b>
</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. Built-in themes are powered by the same token system, allowing you to override individual styles or create a completely custom appearance.
| 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-text-color-on-primary | Text color used on elements filled with the primary color, such as solid buttons. |
| --pk-secondary-color | Secondary accent, mainly used for the switch/thumb UI state. |
| --pk-focus-ring-color | Focus outline color used for keyboard focus states. |
| --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. |
| --pk-dialog-max-height | Maximum height of the consent dialog; when content exceeds this limit, the dialog body scrolls. |
Example
<consent-dialog theme="light" 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);
--pk-dialog-max-height: 50vh;
">
</consent-dialog>openConsentDialog(): void
onConsentDialogClosed(callback: () => void): () => void
openPrivacyPolicyDialog(): voidConditionally renders children once the provided consent expression evaluates to true.
| Property | Type | Default / Required | Description |
|---|---|---|---|
| consent | string | unset | Consent expression to evaluate before rendering children. When unset, all categories are required. |
| Expression | Consent Required | Description |
|---|---|---|
| All Categories | If the consent attribute is omitted, all categories must be accepted for the guard to activate. | |
| necessary | None | Prevents false positives in Compliance Monitor for necessary resources that are not automatically recognized by PrivacyKit. |
| preferences | Preferences | |
| analytics | Analytics | |
| marketing | Marketing | |
| preferences+analytics | Preferences AND Analytics | |
| preferences|analytics | Preferences OR Analytics | |
| preferences+marketing | Preferences AND Marketing | |
| preferences|marketing | Preferences OR Marketing | |
| analytics+marketing | Analytics AND Marketing | |
| analytics|marketing | Analytics OR Marketing |
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>
Important: Notice that managed resources in the examples use 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.
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. |
Example
<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>
Compliance Monitor observes outgoing requests and validates consent guard coverage on your live website, surfacing unmanaged trackers and regressions introduced by website changes. Inactive by default, it remains invisible to visitors and is safe to ship in production.
| Property | Type | Default / Required | Description |
|---|---|---|---|
| debug | boolean | false | Enables the Compliance Monitor panel on page load. For development environments only. |
| delay | number | 5000 | Network observation window (in milliseconds) before the Compliance Monitor begins validating endpoint usage and consent guard coverage. |
Example
<compliance-monitor debug delay="5000"></compliance-monitor>
Compliance Monitor remains hidden from visitors even when included in the production bundle. The recommended way to activate it on a live website is to append ?pk-monitor=true to the URL — it activates the monitor only for that browser session, leaving the visitor experience unaffected.
Toggle programmatically:
window.PrivacyKit?.toggleComplianceMonitor();