Hurtig start

Kom i gang med PrivacyKit på få minutter med letvægts-webkomponenter, der fungerer på tværs af frameworks og statiske websites.

Indholdsfortegnelse


Tilføj PrivacyKit til dit website

Tilføj PrivacyKit til dit site med CDN-scripts eller ved at installere NPM-pakken. Vælg den metode, der passer til dit projekt.

Tilføj CDN-scripts

Tilføj scripts til din hjemmesides <head>. Virker med WordPress, Shopify, Wix og alle hjemmesider, hvor du kan tilføje HTML.

HTML
<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></consent-dialog>
  </body>
<html>

Tilpas styling

Start med et indbygget tema og en layoutvariant, finjustér derefter individuelle design tokens, eller tilpas dialogen helt, så den matcher dit brand.

HTML
<consent-dialog theme="standard" variant="standard"></consent-dialog>
Finjustér med design tokens

Indbyggede temaer er baseret på design tokens. Overskriv kun de tokens, du har brug for, for at skabe et tilpasset udseende, mens resten af det valgte tema forbliver intakt.

HTML
<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>

Tilføj Consent Guards

Brug <consent-guard> til at styre, hvornår tredjepartsscripts og indlejret indhold må indlæses baseret på den besøgendes samtykke. Du kan pakke hver tracker ind i sin egen Consent Guard, eller gruppere flere trackere, der kræver samme samtykke, i én Consent Guard.

HTML
<!-- Tilføj consent-guard for at beskytte tredjepartsscripts -->
<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>

Skift script-typen til text/plain, og erstat src med data-src for håndterede ressourcer. PrivacyKit gendanner de oprindelige attributter og indlæser ressourcen automatisk, når det nødvendige samtykke er givet.

Placering: Tilføj Consent Guards til dokumentets <body>, når det er muligt. Mange CMS'er og hjemmesidebyggere lader dig kun tilføje tilpassede scripts i <head> — hvis det gælder din platform, så placer Consent Guard'en sammen med det script, den indeholder, i slutningen af <head>-sektionen i stedet.

Tilføj Consent Guards til indlejret indhold

Pak indlejret indhold, såsom <iframe>-elementer, direkte ind, hvor det vises på siden. Brug eventuelt <consent-missing> til at vise alternativt indhold, indtil det nødvendige samtykke er givet.

HTML
<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>Acceptér analyse- og marketingcookies for at se dette indhold.</p>
</consent-missing>

Tilføj Compliance Monitor

Tilføj PrivacyKit Compliance Monitor for at opdage sporere, validere samtykkebeskyttelse og afdække uadministreret aktivitet på dit websted — og giv udviklere og compliance-teams adgang til runtime-validering uden at påvirke besøgendes oplevelse.

HTML
<body>
  <!-- Tilføj compliance-monitor for løbende at validere håndhævelse af samtykke -->
  <compliance-monitor></compliance-monitor>
</body>

Demo-websteder

Se PrivacyKit i aktion med live-eksempler i HTML og React.

Hver demo inkluderer en Compliance Monitor til inspektion af tracker-udførelse i realtid, et Consent Test Panel til simulering af samtykkestatus og adfærd hos førstegangsbesøgende, samt interaktive consent-guard-eksempler — der validerer, at scripts og integreret indhold korrekt blokeres eller tillades baseret på det samtykke, som den enkelte bruger giver. Begge indeholder også en consent-dialog stilet med design-tokens. HTML-demoen integreres via CDN script-tags, der er kompatible med alle SSR-opsætninger.


Aktiveringsstatus

PrivacyKit inkluderer som standard en 10-dages prøveperiode, der giver dig mulighed for at integrere og teste platformen, inden du aktiverer et abonnement.

Når prøveperioden udløber, fortsætter PrivacyKit med at fungere i begrænset tilstand i stedet for at deaktivere eksisterende integrationer.

Aktiveringsstatus er tilgængelig via JavaScript-API’et, logges i browserkonsollen under initialisering og kan også kontrolleres ved hjælp af aktiveringsstatusopslaget.