Kom igång med PrivacyKit på några minuter med lättviktiga webbkomponenter som fungerar i både ramverk och statiska webbplatser.
Placera skriptet i <head> och lägg till samtyckesdialogen på sidan för att komma igång. PrivacyKit distribueras som statiska resurser via ett CDN — ingen npm-installation och inga beroendekonflikter.
<html>
<head>
<!-- Lägg till PrivacyKit-webbkomponenterna: 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>
<!-- Lägg till PrivacyKit JavaScript-API för programmatisk åtkomst till samtycke (valfritt) -->
<script type="module" src="https://cdn.privacykit.eu/v1/index.esm.js"></script>
</head>
<body>
<!-- Lägg till consent-dialog -->
<consent-dialog theme="standard" variant="standard"></consent-dialog>
</body>
<html>PrivacyKit inkluderar som standard en 10-dagars provperiod, så att du kan integrera och testa innan du aktiverar en prenumeration. Aktiveringsstatus är tillgänglig via JavaScript-API:t, loggas i webbläsarkonsolen och kan även kontrolleras via sökning av aktiveringsstatus.
Börja med ett inbyggt tema och finjustera enskilda design tokens, eller anpassa dialogens styling helt för att matcha ditt varumärke.
<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 förhindrar att tredjepartsskript och inbäddat innehåll körs tills samtycke har getts. Använd <consent-missing> för att informera användare om otillgängligt innehåll vid behov.
<body>
<!-- Lägg till consent-guard för att skydda mot tredjepartsskript -->
<consent-guard consent="analytics">
<script type="text/plain" data-src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"></script>
</consent-guard>
<!-- Lägg till consent-guard för att skydda mot inbäddat innehåll -->
<consent-guard id="123" consent="analytics+marketing">
<iframe data-src="https://www.youtube.com/embed/abc123"></iframe>
<consent-guard>
<consent-missing for="123">
<p>Acceptera analys- och marknadsföringscookies för att se detta innehåll.</p>
</consent-missing>
</body>
Viktigt: Observera att hanterade resurser i exemplet använder data-src i stället för src, och type="text/plain" används för script. PrivacyKit aktiverar hanterat innehåll först efter att samtycke har getts — annars kan resurser laddas direkt och framstå som hårdkodade i Compliance Monitor.
Lägg till PrivacyKit Compliance Monitor för att upptäcka trackers, validera samtyckesskydd och upptäcka ohanterad aktivitet över hela din webbplats.
<body>
<!-- Lägg till compliance-monitor för att kontinuerligt validera att samtycke efterlevs -->
<compliance-monitor></compliance-monitor>
</body>Använd window.PrivacyKit för att läsa samtycke, kontrollera samtyckesuttryck, öppna dialoger och lyssna efter samtyckesändringar. Detta är användbart när din applikation behöver programmatisk kontroll, till exempel 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();
}
Förbättra utvecklarupplevelsen med autokomplettering, typsäkerhet och inbyggt stöd för PrivacyKit web components.
I moderna verktyg (Next.js / Vite / TypeScript 5+) måste .d.ts-filer utanför src uttryckligen inkluderas för att kompilatorn ska plocka upp dem.
{
"include": ["src", "types/**/*.d.ts"]
}
Riktlinjer för hur PrivacyKit integreras i olika ramverk.
<consent-dialog> fungerar i Server Components — lägg den direkt i din layout.'use client'-komponent.Undvik flimmer innan webkomponenterna är färdigladdade. Utan detta snipp kan HTML i slots eller guards blinka kort när:
consent-dialog kan blinka till kort om du använder slottade element och de renderas innan komponentdefinitionen har laddats.consent-guard kan blinka till kort om den används för villkorlig HTML och innehållet renderas innan komponenten aktiveras.consent-missing kan blinka till kort om den används som fallback och den renderas innan komponenten aktiveras.Lägg till styling i ditt eget light DOM för att undvika flimmer.
consent-dialog:not(:defined) [slot] {
display: none;
}
consent-guard:not([active]) {
display: none;
}
consent-missing:not([active]) {
display: none;
}