Kom i gang med PrivacyKit på få minutter med letvægts-webkomponenter, der fungerer på tværs af frameworks og statiske websites.
Placer scriptet i <head> og tilføj samtykkedialogen på siden for at komme i gang. PrivacyKit distribueres som statiske assets via et CDN — ingen npm-installation og ingen afhængighedskonflikter.
<html>
<head>
<!-- Tilføj PrivacyKit-webkomponenterne: 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>
<!-- Tilføj PrivacyKit JavaScript-API til programmatisk adgang til samtykke (valgfrit) -->
<script type="module" src="https://cdn.privacykit.eu/v1/index.esm.js"></script>
</head>
<body>
<!-- Tilføj consent-dialog -->
<consent-dialog theme="standard" variant="standard"></consent-dialog>
</body>
<html>PrivacyKit inkluderer som standard en 10-dages prøveperiode, så du kan integrere og teste før du aktiverer et abonnement. Aktiveringsstatus er tilgængelig via JavaScript-API’et, logges i browserkonsollen og kan også tjekkes via opslag af aktiveringsstatus.
Start med et indbygget tema og finjustér individuelle design tokens, eller tilpas dialogens styling helt, så den matcher dit brand.
<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 forhindrer tredjepartsscripts og indlejret indhold i at blive udført, indtil samtykke er givet. Brug <consent-missing> til at informere brugere om utilgængeligt indhold efter behov.
<body>
<!-- Tilføj consent-guard for at beskytte mod tredjepartsscripts -->
<consent-guard consent="analytics">
<script type="text/plain" data-src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"></script>
</consent-guard>
<!-- Tilføj consent-guard for at beskytte mod indlejret indhold -->
<consent-guard id="123" consent="analytics+marketing">
<iframe data-src="https://www.youtube.com/embed/abc123"></iframe>
<consent-guard>
<consent-missing for="123">
<p>Acceptér analyse- og marketingcookies for at se dette indhold.</p>
</consent-missing>
</body>
Vigtigt: Bemærk, at håndterede ressourcer i eksemplet bruger data-src i stedet for src og type="text/plain" bruges for scripts. PrivacyKit aktiverer håndteret indhold, efter at samtykke er givet — ellers kan ressourcer indlæses med det samme og fremstå som hardkodet i Compliance Monitor.
Tilføj PrivacyKit Compliance Monitor for at opdage trackere, validere samtykkebeskyttelse og registrere uadministreret aktivitet på tværs af dit website.
<body>
<!-- Tilføj compliance-monitor for løbende at validere håndhævelse af samtykke -->
<compliance-monitor></compliance-monitor>
</body>Brug window.PrivacyKit til at læse samtykke, tjekke samtykkeudtryk, åbne dialoger og lytte efter ændringer i samtykke. Det er nyttigt, når din applikation har brug for programmatisk kontrol, f.eks. i React, Vue eller almindelig 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();
}
Forbedr udvikleroplevelsen med autocomplete, typesikkerhed og indbygget understøttelse af PrivacyKit web components.
I moderne tooling (Next.js / Vite / TypeScript 5+) skal .d.ts-filer uden for src eksplicit inkluderes, for at kompilatoren kan opfange dem.
{
"include": ["src", "types/**/*.d.ts"]
}
Framework-specifikke råd til at integrere PrivacyKit custom elements.
<consent-dialog> virker i Server Components — indsæt den direkte i dit layout.'use client'-komponent.Undgå flicker før webkomponenterne er færdigindlæste. Uden dette snippet kan slottet eller beskyttet HTML kort vises når:
consent-dialog kan blinke kort, hvis du bruger slottede elementer, og de renderes før komponentdefinitionen er indlæst.consent-guard kan blinke kort, hvis den bruges til betinget HTML, og indholdet renderes før komponenten aktiveres.consent-missing kan blinke kort, hvis den bruges som fallback, og den renderes før komponenten aktiveres.Tilføj styling i dit light DOM for at undgå blink.
consent-dialog:not(:defined) [slot] {
display: none;
}
consent-guard:not([active]) {
display: none;
}
consent-missing:not([active]) {
display: none;
}