Krijg PrivacyKit binnen enkele minuten aan de praat met lichtgewicht webcomponenten die werken in frameworks én op statische websites.
Plaats het script in de <head> en voeg de toestemmingsdialoog op je pagina toe om te beginnen. PrivacyKit wordt als statische assets via een CDN geleverd — geen npm-installatie en geen afhankelijkheidsconflicten.
<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 theme="standard" variant="standard"></consent-dialog>
</body>
<html>PrivacyKit bevat standaard een proefperiode van 10 dagen, zodat je kunt integreren en testen voordat je een abonnement activeert. De activatiestatus is beschikbaar via de JavaScript-API, wordt gelogd in de browserconsole en kan ook worden gecontroleerd via de activatiestatus-opzoeking.
Begin met een ingebouwd thema en verfijn individuele design tokens, of pas de styling van de dialoog volledig aan zodat deze bij je merk past.
<consent-dialog variant="standard" theme="standard" style="
--pk-bg-color: #faf7f2;
--pk-paper-color: #f7eede;
--pk-text-color: #3a3530;
--pk-primary-color: #b08968;
--pk-secondary-color: #d6c2b2;
--pk-text-color-on-primary: #212121;
--pk-focus-ring-color: #866346;
--pk-border-color: #d6dbe4;
--pk-border-width: 3px;
--pk-font-family: 'Segoe UI', Tahoma, sans-serif;
--pk-spacing-unit: 0.6rem;
--pk-control-radius: 10px;
--pk-dialog-radius: 20px;
--pk-dialog-shadow: 0 10px 20px rgba(0, 0, 0, 50%);
--pk-dialog-max-height: min(70dvh, 500px);
">
</consent-dialog>
Consent Guards voorkomen dat scripts van derden en ingesloten content worden uitgevoerd totdat toestemming is gegeven. Gebruik <consent-missing> om gebruikers zo nodig te informeren over niet-beschikbare content.
<body>
<!-- Voeg consent-guard toe om te beschermen tegen scripts van derden -->
<consent-guard consent="analytics">
<script type="text/plain" data-src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"></script>
</consent-guard>
<!-- Voeg consent-guard toe om te beschermen tegen ingesloten content -->
<consent-guard id="123" consent="analytics+marketing">
<iframe data-src="https://www.youtube.com/embed/abc123"></iframe>
<consent-guard>
<consent-missing for="123">
<p>Accepteer cookies voor analyse en marketing om deze inhoud te bekijken.</p>
</consent-missing>
</body>
Belangrijk: Let op dat beheerde resources in het voorbeeld 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.
Voeg PrivacyKit Compliance Monitor toe om trackers te ontdekken, consentbescherming te valideren en onbeheerde activiteit op je hele website te detecteren.
<body>
<!-- Voeg compliance-monitor toe om de handhaving van toestemming continu te valideren -->
<compliance-monitor></compliance-monitor>
</body>Gebruik window.PrivacyKit om toestemming te lezen, toestemmingsuitdrukkingen te controleren, dialogen te openen en te luisteren naar wijzigingen in toestemming. Dit is handig wanneer je applicatie programmatische controle nodig heeft, bijvoorbeeld in React, Vue of gewone JavaScript.
const api = window.PrivacyKit;
api.onReady(() => {
const consent = window.PrivacyKit.readConsent();
const initialState = consent ? JSON.stringify(consent, null, 2) : "";
console.log(initialState);
});
api.onConsentChanged((consent) => {
const updatedState = consent ? JSON.stringify(consent, null, 2) : "";
console.log(updatedState);
});
function handleOpenConsentDialogBtnClick() {
api.openConsentDialog();
}
function handleOpenPrivacyPolicyDialogBtnClick() {
api.openPrivacyPolicyDialog();
}
function handleToggleComplianceMonitorBtnClick() {
api.toggleComplianceMonitor();
}
Verbeter de developer experience met autocomplete, typeveiligheid en native ondersteuning voor PrivacyKit-webcomponents.
In moderne tooling (Next.js / Vite / TypeScript 5+) moeten .d.ts-bestanden buiten src expliciet worden opgenomen om door de compiler te worden opgepikt.
{
"include": ["src", "types/**/*.d.ts"]
}
Framework-specifieke aanwijzingen voor het integreren van PrivacyKit custom elements.
<consent-dialog> werkt in Server Components — zet het direct in je layout.'use client'-component.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;
}