CookieKit Component Reference

Public web component documentation for consent-dialog, consent-guard, and consent-missing.

Public Custom Elements

<consent-dialog>
<consent-guard>
<consent-missing>

<consent-dialog>

Main entry component for consent UI and behavior.

Attributes

Attribute	Type	Default	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 section in UI.
no-preferences	boolean	unset	Hides preferences section in UI.
no-analytics	boolean	unset	Hides analytics section in UI.
no-marketing	boolean	unset	Hides marketing section in UI.
debug	boolean	unset	Enables debug output.
demo	boolean	unset	Disables auto-open and uses demo subscription status.
open	boolean	false	Controls open state.

Methods

openDialog(): Promise<void>
closeDialog(): Promise<void>
checkSubscriptionStatus(): Promise<void>

Named Slots

dialog-title
dialog-content
necessary-content
analytics-content
marketing-content
preferences-content
read-more-title
read-more-content

Example

<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>

<consent-guard>

Conditionally renders content based on consent.

Attribute

Attribute	Type	Default	Description
consent	string	all categories	Consent expression to evaluate.

Expression rules:

Single category: analytics
AND expression: analytics+marketing
OR expression: analytics|marketing
Omitted value: all categories required

Example

<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>

Note: when using iframes, use data-src to avoid loading before consent.

<consent-missing>

Fallback content for blocked consent-guard content.

Attribute

Attribute	Type	Required	Description
for	string	yes	Id of the related <consent-guard>.

Example

<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>

Script Setup

<script type="module" src="https://cdn.cookiekit.eu/cookiekit.esm.js"></script>

Framework Notes

React: custom element typings are included in your distributed definition file.
Vue 3: configure compilerOptions.isCustomElement for CookieKit tags.
Angular: add CUSTOM_ELEMENTS_SCHEMA where custom elements are used.
Svelte: no extra setup needed for runtime usage.