Krijg PrivacyKit binnen enkele minuten aan de praat met lichtgewicht webcomponenten die werken in frameworks én op statische websites.
Voeg PrivacyKit toe aan uw site via CDN-scripts of door het NPM-pakket te installeren. Kies de methode die bij uw project past.
Voeg de scripts toe aan de <head> van uw website. Werkt met WordPress, Shopify, Wix en elke website waarop u HTML kunt toevoegen.
<html>
<head>
<!-- Voeg de PrivacyKit-webcomponenten toe: consent-dialog, consent-guard, consent-missing, compliance-monitor -->
<script type="module" src="https://cdn.privacykit.eu/v1/privacykit.esm.js"></script>
<script nomodule src="https://cdn.privacykit.eu/v1/privacykit.js"></script>
<!-- Voeg de PrivacyKit JavaScript-API toe voor programmatische toegang tot toestemming (optioneel) -->
<script type="module" src="https://cdn.privacykit.eu/v1/index.esm.js"></script>
</head>
<body>
<!-- Voeg consent-dialog toe -->
<consent-dialog></consent-dialog>
</body>
<html>Begin met een ingebouwd thema en een lay-outvariant, verfijn vervolgens individuele design tokens, of pas de dialoog volledig aan zodat deze bij je merk past.
<consent-dialog theme="standard" variant="standard"></consent-dialog>Ingebouwde thema's zijn gebaseerd op design tokens. Overschrijf alleen de tokens die je nodig hebt om een aangepast uiterlijk te creëren, terwijl de rest van het geselecteerde thema intact blijft.
<consent-dialog variant="standard" theme="standard" style="
--pk-transparency: 0%;
--pk-bg-color: #faf7f2;
--pk-paper-color: #f7eede;
--pk-text-color: #3a3530;
--pk-text-color-on-primary: #212121;
--pk-primary-color: #b08968;
--pk-secondary-color: #d6c2b2;
--pk-focus-ring-color: #866346;
--pk-font-family: 'Segoe UI', Tahoma, sans-serif;
--pk-spacing-unit: 0.6rem;
--pk-control-border-color: #d6dbe4;
--pk-control-border-width: 3px;
--pk-control-border-radius: 10px;
--pk-dialog-border-color: #d6dbe4;
--pk-dialog-border-width: 3px;
--pk-dialog-border-radius: 20px;
--pk-dialog-max-height: min(70dvh, 500px);
--pk-dialog-shadow: 0 10px 20px rgba(0, 0, 0, 50%);
">
</consent-dialog>Gebruik <consent-guard> om te bepalen wanneer scripts van derden en ingesloten content mogen laden op basis van de toestemming van de bezoeker. Je kunt elke tracker in een eigen Consent Guard plaatsen, of meerdere trackers die dezelfde toestemming vereisen groeperen in één Consent Guard.
<!-- Voeg consent-guard toe om scripts van derden te beschermen -->
<consent-guard consent="analytics">
<script type="text/plain" data-src="https://example.com/analytics.js?id=XXXXXX"></script>
</consent-guard>
<consent-guard consent="marketing">
<script type="text/plain" data-src="https://example.com/marketing.js?id=XXXXXX"></script>
</consent-guard>
Wijzig het script-type naar text/plain en vervang src door data-src voor beheerde resources. PrivacyKit herstelt de oorspronkelijke attributen en laadt de resource automatisch zodra de vereiste toestemming is gegeven.
Plaatsing: Voeg Consent Guards waar mogelijk toe aan de <body> van het document. Veel CMS'en en website-bouwers laten je alleen aangepaste scripts toevoegen in de <head> — als dat voor jouw platform geldt, plaats de Consent Guard, met het script dat erin zit, aan het einde van de <head>-sectie.
Wikkel ingesloten content, zoals <iframe>-elementen, direct in waar deze op de pagina verschijnt. Gebruik optioneel <consent-missing> om alternatieve content te tonen totdat de vereiste toestemming is gegeven.
<consent-guard id="yt-embed" consent="analytics+marketing">
<iframe data-src="https://www.youtube.com/embed/abc123"></iframe>
</consent-guard>
<consent-missing for="yt-embed">
<p>Accepteer cookies voor analyse en marketing om deze inhoud te bekijken.</p>
</consent-missing>
Voeg PrivacyKit Compliance Monitor toe om trackers te ontdekken, toestemmingsbescherming te valideren en onbeheerde activiteit op je website te detecteren — en geef ontwikkelaars en compliance-teams toegang tot runtime-validatie zonder de bezoekerservaring te beïnvloeden.
<body>
<!-- Voeg compliance-monitor toe om de handhaving van toestemming continu te valideren -->
<compliance-monitor></compliance-monitor>
</body>Zie PrivacyKit in actie met live HTML- en React-voorbeelden.
Elke demo bevat een Compliance Monitor om tracker-uitvoering in realtime te inspecteren, een Consent Test Panel om toestemmingsstatussen en eerste-bezoekersgedrag te simuleren, en interactieve consent-guard-voorbeelden — die valideren dat scripts en ingesloten inhoud correct worden geblokkeerd of toegestaan op basis van de toestemming die elke gebruiker verleent. Beide bevatten ook een consent-dialog die is gestyled met design-tokens. De HTML-demo integreert via CDN script-tags die compatibel zijn met elke SSR-configuratie.
PrivacyKit bevat standaard een proefperiode van 10 dagen, zodat je het platform kunt integreren en testen voordat je een abonnement activeert.
Na het verlopen van de proefperiode blijft PrivacyKit in een beperkte modus werken in plaats van bestaande integraties te deactiveren.
De activatiestatus is beschikbaar via de JavaScript-API, wordt gelogd in de browserconsole tijdens initialisatie en kan ook worden gecontroleerd via het activatiestatus-opzoekprogramma.