Public web component documentation for consent-dialog, consent-guard, and consent-missing.
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 | string | browser-derived | Locale override. Supported: en, no. |
| no-necessary | boolean | unset | Hides necessary consent section in the dialog. |
| no-preferences | boolean | unset | Hides the preferences category. |
| no-analytics | boolean | unset | Hides the analytics category. |
| no-marketing | boolean | unset | Hides the marketing category. |
| debug | boolean | unset | Enables verbose debug output in the console. |
| demo | boolean | unset | Disables auto-open and uses demo subscription status. |
| open | boolean | false | Controls the open state programmatically. |
openDialog(): Promise<void> closeDialog(): Promise<void> checkSubscriptionStatus(): Promise<void>
<consent-dialog variant="standard" locale="en" version="1">
<span slot="dialog-title">Your privacy choices</span>
<span slot="analytics-content">We use analytics to improve product quality.</span>
</consent-dialog>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. |
<consent-guard consent="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>When using iframes, prefer data-src to prevent loading before consent is granted.
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-category="analytics" src="https://example.com/analytics.js"></script>
</consent-guard>
<consent-missing for="analytics-guard">
Please accept analytics cookies to continue.
</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>