PrivacyKit Webcomponenten

Openbare documentatie van de webcomponenten consent-dialog, consent-guard, consent-missing en compliance-monitor.

Inhoudsopgave

<consent-dialog>

Hoofdcomponent voor de PrivacyKit-consent UI en orkestratie.

Eigenschap	Type	Standaard / Vereist	Beschrijving
variant	standard \| panel \| modern \| modest	standard	Visuele variant van de dialoog.
theme	standard \| dark \| teal \| slate \| light \| vibrant \| high-contrast	standard	Visueel thema van de dialoog.
expires-days	number	180	Levensduur van de cookie in dagen.
version	number	0	Versie van het consent-schema voor hernieuwde toestemming.
locale	da \| de \| en \| es \| fi \| fr \| it \| nl \| no \| pl \| sv	browser-afgeleid	Overschrijft de taalinstelling.
hide-summary-part-2	boolean	unset	Verbergt het tweede samenvattingsgedeelte (dialog-summary-part-2) in de dialoog.
hide-necessary	boolean	unset	Verbergt de categorie Noodzakelijk.
hide-preferences	boolean	unset	Verbergt de categorie Voorkeuren.
hide-analytics	boolean	unset	Verbergt de categorie Analyse.
hide-marketing	boolean	unset	Verbergt de categorie Marketing.
hide-readmore	boolean	unset	Verbergt de uitklapbare Lees meer-sectie.
hide-privacy-policy-link	boolean	unset	Verbergt de standaardlink naar het privacybeleid volledig. Gebruik `privacy-policy-url` om de link zichtbaar te houden en gebruikers door te verwijzen naar je eigen privacypagina.
privacy-policy-url	string	unset	URL waarnaar gebruikers worden doorgestuurd wanneer ze op de privacybeleidlink klikken. Indien ingesteld, opent de link deze URL in plaats van het ingebouwde privacydialoogvenster.
demo	boolean	unset	Demo-modus: schakelt automatisch openen uit en beperkt functies. Niet AVG-conform; niet gebruiken in productie.
dismissible	boolean	false	Bepaalt of de dialoog via backdrop/Escape kan sluiten zolang de gebruiker geen keuze heeft gemaakt.
show-fab	boolean	false	Schakelt de knop voor toestemmingsvoorkeuren in. Heeft geen zichtbaar effect totdat er een consent-cookie bestaat.
fab-position	left \| right	left	Zet de knop vast linksonder of rechtsonder in de viewport.

Voorbeeld

HTML
<consent-dialog theme="panel" variant="dark" expires-days="90" 
  version="1" locale="nl" hide-marketing hide-privacy-policy-link dismissible>
</consent-dialog>

Knop voor toestemmingsvoorkeuren

Wanneer show-fab op true staat, toont <consent-dialog> een floating action button (FAB) waarmee gebruikers hun toestemmingskeuzes opnieuw kunnen openen na de eerste verzending. Gebruik fab-position om deze linksonder of rechtsonder in de viewport vast te zetten.

Zichtbaarheidsregels

Verborgen totdat de initiële toestemming is ingediend.
Verborgen terwijl het toestemmingsdialoogvenster of het privacybeleid-dialoogvenster geopend is.
Verborgen als show-fab niet is ingesteld of is ingesteld op false.

HTML
<consent-dialog show-fab fab-position="left">
</consent-dialog>

Inhoud aanpassen

Voeg aangepaste content toe aan specifieke delen van een component met benoemde HTML-slots — zo heb je volledige controle over content en styling zonder de component zelf aan te passen.

Slotnaam	Beschrijving
dialog-logo	Optionele logo-inhoud die wordt weergegeven in de kop van de dialoog.
dialog-logo-alt	Alternatieve plek voor een merklogo, weergegeven rechtsboven bij de tekst van dialog-summary-part-1.
dialog-title	Vervangt de titel in de kop van de dialoog.
dialog-summary-part-1	Voegt aangepaste tekst toe aan de eerste introductieparagraaf onder de dialoogtitel.
dialog-summary-part-2	Voegt aangepaste tekst toe aan de tweede introductieparagraaf die de toestemmingskeuzes uitlegt.
necessary-content	Vervangt de beschrijving van de categorie Noodzakelijk.
preferences-content	Eigen tekst in de accordion Voorkeuren.
analytics-content	Eigen tekst in de accordion Analyse.
marketing-content	Eigen tekst in de accordion Marketing.
read-more-title	Stelt de titel in van de sectie "Meer lezen".
read-more-content	Inhoud die verschijnt wanneer "Meer lezen" wordt geopend.
privacy-policy-content	Vervangt de standaardtekst van het privacybeleid. Gebruik alleen door je eigen juridisch adviseur goedgekeurde tekst, want PrivacyKit kan de AVG-naleving niet controleren zodra je het aanpast.

Voorbeeld

HTML
<consent-dialog theme="standard" variant="standard" locale="nl" version="1">
  <img slot="dialog-logo" width="100px" src="/logo.png" alt="Bedrijfslogo" />
  <div slot="dialog-title" class="jouw-class">
    <h2>Wij gebruiken cookies</h2>
  </div>
  <span slot="marketing-content">
    <b>We verzamelen momenteel geen cookies voor marketingdoeleinden.</b>
  </span>
</consent-dialog>

Design tokens

Design tokens bieden stabiele CSS-variabelen voor kleur, spacing, typografie en meer zonder de interne implementatie te wijzigen. Ingebouwde thema’s worden aangedreven door hetzelfde token-systeem, waardoor je individuele stijlen kunt overschrijven of een volledig aangepaste uitstraling kunt creëren.

Design tokens	Beschrijving
--pk-bg-color	Achtergrondkleur van de volledige dialoog.
--pk-paper-color	Papierkleur voor kaarten, accordeons en panelen in de dialoog.
--pk-text-color	Basistekstkleur voor koppen en bodytekst.
--pk-primary-color	Primaire accentkleur voor CTA's, focus en links.
--pk-text-color-on-primary	Tekstkleur die wordt gebruikt op elementen met de primaire kleur als vulling, zoals volle knoppen.
--pk-secondary-color	Secundair accent, vooral voor schakelaars.
--pk-focus-ring-color	Kleur van de focus-omlijning (outline) voor toetsenbordfocus.
--pk-border-color	Randkleur voor paneelcontouren, tabellen en scheidingslinjer.
--pk-border-width	Randdikte voor paneelcontouren, tabellen en scheidingslijnen.
--pk-font-family	Fontstack voor alle tekst; valt terug op de body-font.
--pk-spacing-unit	Spatie-eenheid die padding en gaps stuurt.
--pk-control-radius	Hoekradius voor knoppen, invoervelden en interactieve bedieningselementen.
--pk-dialog-radius	Hoekradius voor de buitenste container van de toestemmingsdialoog.
--pk-dialog-shadow	Schaduw toegepast op de toestemmingsdialoog.
--pk-dialog-max-height	Maximale hoogte van de toestemmingsdialoog; wanneer de inhoud deze limiet overschrijdt, wordt de inhoud van de dialoog scrollbaar.

Voorbeeld

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

Methodes

TypeScriptAPI-referentie

openConsentDialog(): void
onConsentDialogClosed(callback: () => void): () => void
openPrivacyPolicyDialog(): void

<consent-guard>

Toont kinderen pas wanneer de opgegeven consent-expressie waar is.

Eigenschap	Type	Standaard / Vereist	Beschrijving
consent	string	unset	Consent-expressie die moet slagen voordat er gerenderd wordt.

Toestemmingsexpressies

Expressie	Vereiste toestemming	Omschrijving
	Alle categorieën	Als het consent-attribuut ontbreekt, moeten alle categorieën worden geaccepteerd voordat de guard activeert.
necessary	Geen	Voorkomt fout-positieven in de Compliance Monitor voor noodzakelijke resources die niet automatisch worden herkend door PrivacyKit.
preferences	Voorkeuren
analytics	Analyse
marketing	Marketing
preferences+analytics	Voorkeuren EN Analyse
preferences\|analytics	Voorkeuren OF Analyse
preferences+marketing	Voorkeuren EN Marketing
preferences\|marketing	Voorkeuren OF Marketing
analytics+marketing	Analyse EN Marketing
analytics\|marketing	Analyse OF Marketing

Voorbeeld 1 - Scripts blokkeren/laden

HTML
<consent-guard consent="marketing">
  <script type="text/plain" data-src="https://www.googletagmanager.com/gtm/js"></script>
</consent-guard>

Voorbeeld 2 - HTML blokkeren/laden

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

Belangrijk: Let op dat beheerde resources in de voorbeelden data-src gebruiken in plaats van src, en type="text/plain" wordt gebruikt voor scripts. PrivacyKit activeert beheerde content pas nadat toestemming is gegeven — anders kunnen resources direct laden en in Compliance Monitor als hardcoded verschijnen.

<consent-missing>

Toont fallback-inhoud wanneer een gekoppelde consent-guard de ervaring blokkeert.

Eigenschap	Type	Standaard / Vereist	Beschrijving
for	string	vereist	Id van het gerelateerde <consent-guard>-element.

Voorbeeld

<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">
  Accepteer analytische cookies om verder te gaan.
</consent-missing>

<compliance-monitor>

Compliance Monitor bewaakt uitgaande verzoeken en valideert de consent guard-dekking op uw live website, en brengt onbeheerde trackers en regressies aan het licht die zijn veroorzaakt door websitewijzigingen. Standaard inactief blijft het onzichtbaar voor bezoekers en is het veilig om in productie op te nemen.

Eigenschap	Type	Standaard / Vereist	Beschrijving
debug	boolean	false	Schakelt het Compliance Monitor-paneel in bij het laden van de pagina. Alleen voor ontwikkelomgevingen.
delay	number	5000	Netwerkobservatievenster (in milliseconden) voordat de Compliance Monitor begint met het valideren van eindpuntgebruik en consent guard-dekking.
ignore-first-party-subdomains	boolean	true	Wanneer true, worden verzoeken naar subdomeinen van het huidige domein stilzwijgend genegeerd.
fab-position	left \| right	right	Bepaalt aan welke kant van de viewport de FAB van Compliance Monitor wordt vastgezet.

Voorbeeld

HTML
<compliance-monitor debug delay="5000" ignore-first-party-subdomains="true" fab-position="left"></compliance-monitor>

Compliance Monitor blijft verborgen voor bezoekers, zelfs wanneer het is opgenomen in de productiebundel. De aanbevolen manier om het op een live website te activeren is door ?privacykit=monitor aan de URL toe te voegen — dit activeert de monitor alleen voor die browsersessie, zonder de bezoekervaring te beïnvloeden.

Programmatisch in-/uitschakelen:

TypeScriptAPI-referentie

window.PrivacyKit?.toggleComplianceMonitor();