Kom i gang med PrivacyKit på minutter med lette webkomponenter som fungerer på tvers av rammeverk og statiske nettsteder.
Legg til skriptet i <head> og samtykkedialogen på siden din for å komme i gang. PrivacyKit distribueres som statiske ressurser via et CDN — ingen npm install og ingen avhengighetskonflikter.
<html>
<head>
<!-- Legg til PrivacyKit-webkomponentene: 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>
<!-- Legg til PrivacyKit JavaScript-API for programmatisk tilgang til samtykke (valgfritt) -->
<script type="module" src="https://cdn.privacykit.eu/v1/index.esm.js"></script>
</head>
<body>
<!-- Legg til consent-dialog -->
<consent-dialog theme="standard" variant="standard"></consent-dialog>
</body>
<html>PrivacyKit inkluderer en 10-dagers prøveperiode som standard, slik at du kan integrere og teste før du aktiverer et abonnement. Aktiveringsstatus er tilgjengelig via JavaScript-API-et, logges i nettleserkonsollen, og kan også sjekkes via oppslaget for aktiveringsstatus.
Start med et innebygd tema og finjuster individuelle designtokens, eller tilpass dialogens styling fullt ut slik at den matcher merkevaren din.
<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 hindrer tredjepartsskript og innebygd innhold i å kjøre til samtykke er gitt. Bruk <consent-missing> for å informere brukere om utilgjengelig innhold ved behov.
<body>
<!-- Legg til consent-guard(er) for å beskytte mot tredjepartsskript -->
<consent-guard consent="analytics">
<script type="text/plain" data-src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"></script>
</consent-guard>
<!-- Legg til consent-guard(er) for å beskytte mot innebygd innhold -->
<consent-guard id="123" consent="analytics+marketing">
<iframe data-src="https://www.youtube.com/embed/abc123"></iframe>
<consent-guard>
<consent-missing for="123">
<p>Vi trenger ditt samtykke til analyse- og markedsføringskapsler for å vise dette innholdet.</p>
</consent-missing>
</body>
Viktig: Legg merke til at håndterte ressurser i eksemplet bruker data-src i stedet for src, og type="text/plain" brukes for skript. PrivacyKit aktiverer håndtert innhold etter at samtykke er gitt — ellers kan ressurser laste umiddelbart og fremstå som hardkodet i Compliance Monitor.
Legg til PrivacyKit Compliance Monitor for å oppdage trackere, validere samtykkebeskyttelsen og avdekke uadministrert aktivitet på tvers av nettstedet ditt.
<body>
<!-- Legg til compliance-monitor for å kontinuerlig validere at samtykke håndheves -->
<compliance-monitor></compliance-monitor>
</body>Bruk window.PrivacyKit for å lese samtykke, sjekke samtykkeuttrykk, åpne dialoger og lytte etter endringer i samtykke. Dette er nyttig når applikasjonen din trenger programmatisk kontroll, for eksempel i React, Vue eller vanlig 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();
}
Forbedre utvikleropplevelsen med autofullføring, typesikkerhet og innebygd støtte for PrivacyKit web components.
I moderne verktøy (Next.js / Vite / TypeScript 5+), må .d.ts-filer utenfor src inkluderes eksplisitt for å bli plukket opp av kompilatoren.
{
"include": ["src", "types/**/*.d.ts"]
}
Rammeverksspesifikke oppsett for å integrere PrivacyKit sine custom elements.
<consent-dialog> fungerer i Server Components — legg den rett i layouten din.'use client'-komponent.Unngå flimmer før webkomponentene er ferdig lastet. Uten dette utdraget kan beskyttet HTML blinke kort når:
consent-dialog kan blinke kort hvis du bruker slottede elementer, og de rendres før komponentdefinisjonen er lastet.consent-guard kan blinke kort hvis den brukes for betinget HTML, og innholdet rendres før komponenten aktiveres.consent-missing kan blinke kort hvis den brukes som fallback, og den rendres før komponenten aktiveres.Legg til styling i ditt eget light DOM for å unngå flimmer.
consent-dialog:not(:defined) [slot] {
display: none;
}
consent-guard:not([active]) {
display: none;
}
consent-missing:not([active]) {
display: none;
}