Openbare documentatie van de webcomponenten consent-dialog, consent-guard, consent-missing en consent-validator.
Hoofdcomponent voor de PrivacyKit-consent UI en orkestratie.
| Attribuut | 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. |
| google-consent-mode | boolean | unset | Verzendt Google Consent Mode v2-toestemmingssignalen op basis van de PrivacyKit-toestemmingskeuzes van de bezoeker. |
| 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-privacykit-badge | boolean | unset | Verbergt het PrivacyKit-badge dat onderaan de inhoud van het toestemmingsdialoogvenster wordt weergegeven. |
| 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. |
| dialog-position | left | right | left | Bepaalt aan welke kant van het scherm het dialoogvenster verschijnt. Alleen van toepassing op de modern en modest varianten — standard en panel zijn altijd gecentreerd. |
Voorbeeld
<consent-dialog theme="panel" variant="dark" expires-days="90"
version="1" locale="nl" hide-marketing hide-privacy-policy-link dismissible>
</consent-dialog>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-transparency | Transparantie van het dialoogoppervlak en de geneste kaarten/accordeons, als percentage. 0% (standaard) is volledig dekkend; de waarde wordt begrensd op maximaal 50%. |
| --pk-bg-color | Achtergrondkleur van de volledige dialoogshell. Gemengd met --pk-transparency om de uiteindelijke kleur te bepalen. |
| --pk-paper-color | Papierkleur voor kaarten, accordeons en panelen in de dialoog. Wordt ook gemengd met --pk-transparency. |
| --pk-text-color | Basistekstkleur voor koppen en bodytekst. |
| --pk-text-color-on-primary | Tekstkleur die wordt gebruikt op elementen met de primaire kleur als vulling, zoals volle knoppen. |
| --pk-primary-color | Primaire accentkleur voor CTA's, focus en links. |
| --pk-secondary-color | Secundair accent, vooral voor schakelaars. |
| --pk-focus-ring-color | Kleur van de focus-omlijning (outline) voor toetsenbordfocus. |
| --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-border-color | Randkleur voor bedieningselementen in de dialoog — kaarten, accordeons, knoppen en vergelijkbare elementen. |
| --pk-control-border-width | Randdikte voor bedieningselementen in de dialoog — kaarten, accordeons, knoppen en vergelijkbare elementen. |
| --pk-control-border-radius | Hoekradius voor knoppen, invoervelden en interactieve bedieningselementen. |
| --pk-dialog-border-color | Randkleur voor de dialoog zelf — de contour van het buitenste paneel en de scheidingslijnen tussen header en footer. |
| --pk-dialog-border-width | Randdikte voor de dialoog zelf — de contour van het buitenste paneel en de scheidingslijnen tussen header en footer. |
| --pk-dialog-border-radius | Hoekradius voor de buitenste container van de toestemmingsdialoog. |
| --pk-dialog-max-height | Maximale hoogte van de toestemmingsdialoog; wanneer de inhoud deze limiet overschrijdt, wordt de inhoud van de dialoog scrollbaar. |
| --pk-dialog-shadow | Schaduw toegepast op de toestemmingsdialoog. |
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-border-radius: 10px;
--pk-dialog-border-radius: 20px;
--pk-dialog-max-height: 50vh;
--pk-dialog-shadow: 10px 20px rgba(0, 0, 0, 0.5);
">
</consent-dialog>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-top | Optioneel logo of merkafbeelding weergegeven in de koptekst van het toestemmingsdialoogvenster. |
| dialog-logo-right | Optioneel logo of merkafbeelding weergegeven rechtsboven in het toestemmingsdialoogvenster. |
| 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
<consent-dialog theme="standard" variant="standard" locale="nl" version="1">
<img slot="dialog-logo-top" 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>
PrivacyKit past automatisch een passend privacyprofiel toe op basis van de gedetecteerde locatie van de bezoeker. Er is geen extra configuratie nodig.
Bezoekers in Europa krijgen het GDPR/ePrivacy-toestemmingsmodel te zien. Analytische, marketing- en andere niet-essentiële technologieën blijven geblokkeerd totdat de bezoeker toestemming heeft gegeven.
Bezoekers buiten Europa krijgen het CPRA-privacymodel te zien. Toestemming wordt automatisch verleend, waardoor de website kan functioneren zonder een initiële toestemmingsdialoog. Bezoekers kunnen de PrivacyKit-dialoog op elk moment openen om hun privacykeuzes te bekijken of in te trekken. Als de toestemming wordt ingetrokken, vraagt PrivacyKit om de pagina te vernieuwen zodat geblokkeerde technologieën niet langer worden uitgevoerd.
PrivacyKit bepaalt automatisch of de bezoeker zich in Europa bevindt. Er is geen configuratie nodig.
<consent-dialog> wordt geleverd met ingebouwde vertalingen voor Engels, Noors, Duits, Pools, Spaans, Frans, Italiaans, Nederlands, Zweeds, Deens en Fins — geen vertaalbestanden om zelf te laden of te onderhouden.
Standaard leest de dialoog de browsertaal van de bezoeker en toont automatisch de bijbehorende vertaling. Als de browser is ingesteld op een taal die PrivacyKit niet ondersteunt, valt deze terug op Engels.
Om een specifieke taal af te dwingen, ongeacht de browserinstellingen van de bezoeker, stel je het attribuut locale in — zie de tabel hierboven voor de volledige lijst met ondersteunde codes.
<consent-dialog locale="nl"></consent-dialog>Wanneer google-consent-mode is ingeschakeld, leest PrivacyKit de toestemmingskeuzes van de bezoeker en signaleert deze naar Google Tag Manager of gtag via het Google Consent Mode v2-protocol. Dit gebeurt automatisch bij het laden van de pagina en telkens wanneer de bezoeker zijn toestemming wijzigt. Er is geen extra configuratie nodig, behalve het toevoegen van het attribuut.
PrivacyKit koppelt zijn drie toestemmingscategorieën aan de zeven Consent Mode v2-velden van Google:
| GCM v2-veld | Gekoppeld aan | Waarde |
|---|---|---|
| analytics_storage | Analyse | granted / denied |
| ad_storage | Marketing | granted / denied |
| ad_user_data | Marketing | granted / denied |
| ad_personalization | Marketing | granted / denied |
| functionality_storage | Voorkeuren | granted / denied |
| personalization_storage | Voorkeuren | granted / denied |
| security_storage | — | Always granted |
security_storage staat altijd op granted, omdat het beveiligingsessentiële browseropslag dekt en niet onderhevig is aan optionele trackingtoestemming.
Bij het laden van de pagina zorgt PrivacyKit ervoor dat window.dataLayer en een gtag-functie bestaan, met het standaardfragment van Google, en behoudt het wat al op de pagina staat. Het zet een standaardwaarde in de wachtrij waarbij alles geweigerd is, daarna de huidige toestemming van de bezoeker, en zet bij elke wijziging van de toestemming een update in de wachtrij:
gtag('consent', 'update', {
analytics_storage: 'granted' | 'denied',
ad_storage: 'granted' | 'denied',
ad_user_data: 'granted' | 'denied',
ad_personalization: 'granted' | 'denied',
functionality_storage: 'granted' | 'denied',
personalization_storage: 'granted' | 'denied',
security_storage: 'granted'
});De dataLayer is een wachtrij in het geheugen van de pagina; er wordt niets opgeslagen. Google Tag Manager en gtag.js verwerken de opdrachten in de wachtrij op volgorde zodra ze laden, zodat de toestemmingsstatus geldt voordat een Google-tag wordt uitgevoerd, ook als Google later laadt.
Heeft je pagina een eigen Google-fragment, dan moet dat een bestaande dataLayer behouden (window.dataLayer = window.dataLayer || [], zoals de fragmenten van Google doen).
Debugtip: PrivacyKit logt zijn Google Consent Mode v2-activiteit naar de browserconsole, zodat je het gedrag rechtstreeks in DevTools kunt verifiëren:
[PrivacyKit] Google Consent Mode v2 enabled.
Eén keer getoond bij het laden van de pagina wanneer google-consent-mode is ingesteld. Tegelijk wordt de standaardwaarde waarbij alles geweigerd is in de wachtrij gezet.
[PrivacyKit] Google Consent Mode v2 update queued.
Er is een toestemmingsupdate in de dataLayer-wachtrij gezet, bij het laden van de pagina en bij elke wijziging van de toestemming. Google past die toe wanneer de tags laden.
openConsentDialog(): void
onConsentDialogClosed(callback: () => void): () => void
openPrivacyPolicyDialog(): voidToont kinderen pas wanneer de opgegeven consent-expressie waar is.
| Attribuut | Type | Standaard / Vereist | Beschrijving |
|---|---|---|---|
| consent | string | unset | Consent-expressie die moet slagen voordat er gerenderd wordt. |
| source | string | unset | Waar de toestemming wordt gelezen. Als dit niet is ingesteld, gebruikt de guard de toestemming uit de PrivacyKit-consentdialoog. "google-consent-mode" leest de toestemming die je bestaande consentbanner heeft verzameld via Google Consent Mode v2. Onbekende waarden houden de guard geblokkeerd. |
| 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 Consent Validator voor noodzakelijke resources die niet automatisch worden herkend door PrivacyKit. |
| preferences | Voorkeuren | |
| analytics | Analyse | |
| marketing | Marketing | |
| preferences+analytics | Voorkeuren EN Analyse | Voor scripts die beide soorten toestemming nodig hebben, bijv. HubSpot-tracking. |
| preferences|analytics | Voorkeuren OF Analyse | Voor containers die toestemming per tag controleren, bijv. Google Tag Manager. |
| preferences+marketing | Voorkeuren EN Marketing | Voor scripts die beide soorten toestemming nodig hebben, bijv. HubSpot-tracking. |
| preferences|marketing | Voorkeuren OF Marketing | Voor containers die toestemming per tag controleren, bijv. Google Tag Manager. |
| analytics+marketing | Analyse EN Marketing | Voor scripts die beide soorten toestemming nodig hebben, bijv. HubSpot-tracking. |
| analytics|marketing | Analyse OF Marketing | Voor containers die toestemming per tag controleren, bijv. Google Tag Manager. |
Voorbeeld 1 – Scripts beschermen
<consent-guard consent="analytics">
<script type="text/plain" data-src="https://static.hotjar.com/c/hotjar-XXXXXXX.js?sv=6" data-async></script>
</consent-guard>
Voorbeeld 2 – Ingesloten inhoud beschermen
<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 Consent Validator als hardcoded verschijnen.
Guards kunnen de toestemming handhaven die je bestaande banner verzamelt. Voeg source="google-consent-mode" toe aan <consent-guard>, en de guard leest de toestemming uit je banner in plaats van uit de PrivacyKit-consentdialoog. Scripts en ingesloten content in de guard laden pas als de bezoeker akkoord heeft gegeven.
window.dataLayer, bij elke paginalading en telkens als de keuze verandert.De toestemming uit je bestaande banner gebruiken
<!-- Je bestaande consentbanner, met Google Consent Mode v2 ingeschakeld. -->
<script src="https://cdn.your-consent-banner.com/banner.js"></script>
<!-- PrivacyKit -->
<script type="module" src="https://cdn.privacykit.eu/v1/privacykit.esm.js"></script>
<!-- Hotjar laadt pas nadat de bezoeker analytics accepteert in je banner -->
<consent-guard consent="analytics" source="google-consent-mode">
<script type="text/plain" data-src="https://static.hotjar.com/c/hotjar-XXXXXXX.js?sv=6" data-async></script>
</consent-guard>
<!-- Ingesloten content waarvoor marketingtoestemming nodig is -->
<consent-guard consent="marketing" source="google-consent-mode">
<iframe title="YouTube video" data-src="https://www.youtube.com/embed/abc123" width="560" height="315"></iframe>
</consent-guard>
Je kunt PrivacyKit op twee manieren met Google Tag Manager gebruiken: strikt, waarbij Tag Manager op toestemming wacht, of soepel, waarbij Tag Manager meteen laadt en de eigen toestemmingsinstellingen bepalen welke tags worden geactiveerd. Voeg in beide gevallen google-consent-mode toe aan <consent-dialog>, zodat de tags in Tag Manager weten wat de bezoeker heeft gekozen.
Er laadt niets uit Tag Manager en er wordt niets naar Google gestuurd totdat de bezoeker toestemming heeft gegeven. Een Duitse rechtbank (VG Hannover, 2025) heeft geoordeeld dat voor het laden van Google Tag Manager toestemming nodig is, en de strikte modus volgt die lezing. Stem de toestemming van de guard af op wat de container activeert: analytics of marketing als hij één soort tags activeert, of analytics|marketing als hij tags van beide soorten activeert, zodat hij laadt zodra de bezoeker een van beide accepteert. Vanaf dat moment regelt Tag Manager de toestemming per tag.
<consent-dialog google-consent-mode></consent-dialog>
<consent-guard consent="analytics|marketing">
<script type="text/plain" data-src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX" data-async></script>
</consent-guard>
Laad Tag Manager zoals gewoonlijk. De tags van Google volgen de Consent Mode-signalen van de dialoog. Andere tags in de container, zoals Meta of LinkedIn, hebben toestemmingsinstellingen in Tag Manager nodig. Consent Validator toont Tag Manager als niet beschermd door een guard. Dat is zo bedoeld: de Validator meldt alles wat niet in een guard staat.
Soepel is ook de opzet voor websites die bewust Consent Mode Advanced gebruiken. Als toestemming is geweigerd, sturen de tags van Google nog steeds gegevens zonder cookies, zoals het paginaadres en apparaatgegevens, zodat Google conversies kan modelleren. PrivacyKit ondersteunt deze opzet. Of die past bij je website, is een beslissing voor jou en je juridisch adviseur.
Toont fallback-inhoud wanneer een gekoppelde consent-guard de ervaring blokkeert.
| Attribuut | 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>
Consent Validator 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.
| Attribuut | Type | Standaard / Vereist | Beschrijving |
|---|---|---|---|
| debug | boolean | false | Schakelt het Consent Validator-paneel in bij het laden van de pagina. Alleen voor ontwikkelomgevingen. |
| delay | number | 5000 | Netwerkobservatievenster (in milliseconden) voordat de Consent Validator 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 Consent Validator wordt vastgezet. |
Voorbeeld
<consent-validator debug delay="5000" ignore-first-party-subdomains="true" fab-position="left"></consent-validator>
Consent Validator 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=validate aan de URL toe te voegen — dit activeert de validator alleen voor die browsersessie, zonder de bezoekervaring te beïnvloeden.
Programmatisch in-/uitschakelen:
window.PrivacyKit?.toggleConsentValidator();
Voorkom flikkeren vóórdat de webcomponenten geladen zijn. Zonder dit fragment kan HTML in slots of guards kort zichtbaar zijn wanneer:
consent-dialog kan kort flikkeren als je slotted elementen gebruikt en ze renderen voordat de componentdefinitie is geladen.consent-guard kan kort flikkeren als hij wordt gebruikt voor conditionele HTML en de inhoud rendert voordat de component activeert.consent-missing kan kort flikkeren als hij als fallback wordt gebruikt en hij rendert voordat de component activeert.Voeg styling toe in je eigen light DOM om flikkeren te voorkomen.
consent-dialog:not(:defined) [slot] {
display: none;
}
consent-guard:not([active]) {
display: none;
}
consent-missing:not([active]) {
display: none;
}