Kom igång med PrivacyKit på några minuter med lättviktiga webbkomponenter som fungerar i både ramverk och statiska webbplatser.
Lägg till PrivacyKit på din webbplats med CDN-scripts eller genom att installera NPM-paketet. Välj metoden som passar ditt projekt.
Lägg till skripten i din webbplats <head>. Fungerar med WordPress, Shopify, Wix och alla webbplatser där du kan lägga till HTML.
<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></consent-dialog>
</body>
<html>Börja med ett inbyggt tema och en layoutvariant, finjustera sedan enskilda design tokens, eller anpassa dialogen helt för att matcha ditt varumärke.
<consent-dialog theme="standard" variant="standard"></consent-dialog>Inbyggda teman baseras på design tokens. Skriv bara över de tokens du behöver för att skapa ett anpassat utseende, medan resten av det valda temat förblir intakt.
<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>Använd <consent-guard> för att styra när tredjepartsskript och inbäddat innehåll får laddas baserat på besökarens samtycke. Du kan slå in varje tracker i sin egen Consent Guard, eller gruppera flera trackers som kräver samma samtycke i en enda Consent Guard.
<!-- Lägg till consent-guard för att skydda tredjepartsskript -->
<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>
Ändra script-typen till text/plain och ersätt src med data-src för hanterade resurser. PrivacyKit återställer de ursprungliga attributen och laddar resursen automatiskt så snart det nödvändiga samtycket har getts.
Placering: Lägg till Consent Guards i dokumentets <body> när det är möjligt. Många CMS och webbplatsbyggare låter dig bara lägga till anpassade skript i <head> — om det gäller din plattform, placera Consent Guard med skriptet den innehåller längst ner i <head>-sektionen istället.
Slå in inbäddat innehåll, som <iframe>-element, direkt där det visas på sidan. Använd valfritt <consent-missing> för att visa alternativt innehåll tills det nödvändiga samtycket har getts.
<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>Acceptera analys- och marknadsföringscookies för att se detta innehåll.</p>
</consent-missing>
Lägg till PrivacyKit Compliance Monitor för att upptäcka spårare, validera samtyckeskydd och identifiera ohanterad aktivitet på din webbplats — och ge utvecklare och compliance-team tillgång till runtime-validering utan att påverka besökarupplevelsen.
<body>
<!-- Lägg till compliance-monitor för att kontinuerligt validera att samtycke efterlevs -->
<compliance-monitor></compliance-monitor>
</body>Se PrivacyKit i aktion med live-exempel i HTML och React.
Varje demo innehåller en Compliance Monitor för att inspektera tracker-körning i realtid, en Consent Test Panel för att simulera samtyckestillstånd och förstagångsbesökares beteende, samt interaktiva consent-guard-exempel — som validerar att skript och inbäddat innehåll blockeras eller tillåts korrekt baserat på det samtycke varje användare ger. Båda innehåller också en consent-dialog stilad med design-tokens. HTML-demon integreras via CDN script-tags som är kompatibla med alla SSR-upplägg.
PrivacyKit inkluderar som standard en 10-dagars provperiod, vilket gör att du kan integrera och testa plattformen innan du aktiverar en prenumeration.
När provperioden löper ut fortsätter PrivacyKit att fungera i begränsat läge istället för att inaktivera befintliga integrationer.
Aktiveringsstatus är tillgänglig via JavaScript-API:t, loggas i webbläsarkonsolen under initiering och kan även kontrolleras via aktiveringsstatusuppslaget.