PrivacyKit Webkomponenter

Offentlig dokumentasjon av webkomponentene consent-dialog, consent-guard, consent-missing og consent-validator.

Innholdsfortegnelse

<consent-dialog>

Hovedkomponenten for PrivacyKit-dialogen og orkestreringslogikken.

Attributter

Attributt	Type	Standard / Påkrevd	Beskrivelse
variant	standard \| panel \| modern \| modest	standard	Visuell variant av dialogen.
theme	standard \| dark \| teal \| slate \| light \| vibrant \| high-contrast	standard	Visuelt tema for dialogen.
expires-days	number	180	Levetid for cookie i dager.
version	number	0	Versjon av samtykkeschema som brukes for re-samtykke.
google-consent-mode	boolean	unset	Sender Google Consent Mode v2-samtykkesignaler basert på den besøkendes PrivacyKit-samtykkevalg.
locale	da \| de \| en \| es \| fi \| fr \| it \| nl \| no \| pl \| sv	fra nettleser	Overstyrer språk.
hide-summary-part-2	boolean	unset	Skjuler oppsummering del 2 (dialog-summary-part-2) i dialogen.
hide-necessary	boolean	unset	Skjuler kategorien Nødvendig.
hide-preferences	boolean	unset	Skjuler kategorien Preferanser.
hide-analytics	boolean	unset	Skjuler kategorien Analyse.
hide-marketing	boolean	unset	Skjuler kategorien Markedsføring.
hide-readmore	boolean	unset	Skjuler den utvidbare Les mer-seksjonen.
hide-privacykit-badge	boolean	unset	Skjuler PrivacyKit-merket som vises nederst i samtykkedialogboksen.
hide-privacy-policy-link	boolean	unset	Skjuler standardlenken til personvernerklæringen fullstendig. Bruk `privacy-policy-url` i stedet for å beholde lenken synlig og omdirigere brukerne til din egen personvernerklæringsside.
privacy-policy-url	string	unset	URL som brukere omdirigeres til når de klikker på lenken til personvernerklæringen. Når angitt, åpnes denne URL-en i stedet for den innebygde personverndialogen.
demo	boolean	unset	Demo-modus: deaktiverer auto-open og begrenser funksjoner. Ikke GDPR-kompatibel og må ikke brukes i produksjon.
dismissible	boolean	false	Styrer om dialogen kan lukkes via bakgrunn/escape når bruker ikke har tatt stilling.
show-fab	boolean	false	Aktiverer samtykkeinnstillinger-knappen. Har ingen synlig effekt før et samtykkecookie finnes.
fab-position	left \| right	left	Fester knappen nederst til venstre eller nederst til høyre i visningsvinduet.
dialog-position	left \| right	left	Styrer hvilken side av skjermen dialogen vises på. Gjelder kun for modern- og modest-variantene — standard og panel er alltid sentrert.

Eksempel

HTML
<consent-dialog theme="panel" variant="dark" expires-days="90" 
  version="1" locale="no" hide-marketing hide-privacy-policy-link dismissible>
</consent-dialog>

Designtokens

Designtokens gir et stabilt sett CSS-variabler slik at du kan tilpasse farger, mellomrom og typografi uten å endre implementasjonen. Innebygde temaer drives av det samme token-systemet, slik at du kan overstyre individuelle stiler eller lage et helt tilpasset utseende.

Designtokens	Beskrivelse
--pk-transparency	Gjennomsiktighet for dialogflaten og dens nestede kort/akkordeoner, oppgitt som prosent. 0 % (standard) er helt solid, og verdien klippes til maks 50 %.
--pk-bg-color	Bakgrunnsflate for hele dialogskallet. Blandes med --pk-transparency for å gi den endelige fargen.
--pk-paper-color	Papirflate for kort, akkordeoner og paneler inne i dialogen. Blandes også med --pk-transparency.
--pk-text-color	Grunnfarge for overskrifter og brødtekst.
--pk-text-color-on-primary	Tekstfarge brukt på elementer fylt med primærfargen, som for eksempel helfylte knapper.
--pk-primary-color	Primær aksent for CTA-er, fokusringer og lenker.
--pk-secondary-color	Sekundær aksent, hovedsakelig for bryter/knott-tilstander.
--pk-focus-ring-color	Farge på fokusomriss (outline) for tastaturfokus.
--pk-font-family	Skrifttype for all tekst; faller tilbake til body-fonten.
--pk-spacing-unit	Avstandsenhet som styrer padding og gap.
--pk-control-border-color	Kantfarge for kontroller inne i dialogen — kort, akkordeoner, knapper og lignende elementer.
--pk-control-border-width	Kantbredde for kontroller inne i dialogen — kort, akkordeoner, knapper og lignende elementer.
--pk-control-border-radius	Hjørneradius for knapper, felt og interaktive kontroller.
--pk-dialog-border-color	Kantfarge for selve dialogens ramme — konturen av det ytre panelet og skillelinjene i header/footer.
--pk-dialog-border-width	Kantbredde for selve dialogens ramme — konturen av det ytre panelet og skillelinjene i header/footer.
--pk-dialog-border-radius	Hjørneradius for den ytre beholderen til samtykkedialogen.
--pk-dialog-max-height	Maksimal høyde på samtykkedialogen; når innholdet overstiger denne grensen, ruller dialogens innhold.
--pk-dialog-shadow	Skygge som brukes på dialogen.

Eksempel

<consent-dialog theme="light" style="
  --pk-bg-color: #faf7f2;
  --pk-paper-color: #f7eede;
  --pk-primary-color: #b08968;
  --pk-font-family: 'Segoe UI', Tahoma, sans-serif;
  --pk-control-border-radius: 10px;
  --pk-dialog-border-radius: 20px;
  --pk-dialog-max-height: 50vh;
  --pk-dialog-shadow: 10px 20px rgba(0, 0, 0, 0.5);
">
</consent-dialog>

Innhold-slots

Sett inn egendefinert innhold i bestemte deler av en komponent ved å bruke navngitte HTML-slots — da får du full kontroll over innhold og styling uten å endre selve komponenten.

Slot-navn	Beskrivelse
dialog-logo-top	Valgfritt logo- eller merkebilde vist i toppteksten til samtykkedialogboksen.
dialog-logo-right	Valgfritt logo- eller merkebilde vist øverst til høyre i samtykkedialogboksen.
dialog-title	Overstyrer tittelen i dialogens toppseksjon.
dialog-summary-part-1	Legger inn egendefinert tekst i det første introavsnittet under dialogtittelen.
dialog-summary-part-2	Legger inn egendefinert tekst i det andre introavsnittet som forklarer samtykkevalgene.
necessary-content	Egendefinert tekst for kategorien Nødvendig.
preferences-content	Egendefinert tekst i akkordeonen for Preferanser.
analytics-content	Egendefinert tekst i akkordeonen for Analyse.
marketing-content	Egendefinert tekst i akkordeonen for Markedsføring.
read-more-title	Setter overskriften til delen "Les mer".
read-more-content	Innhold som vises når "Les mer" åpnes.
privacy-policy-content	Erstatter standardteksten for personvernerklæringen. Bruk kun formuleringer godkjent av egen juridisk rådgiver, siden PrivacyKit ikke kan verifisere GDPR compliance etter at du tilpasser innholdet.

Eksempel

HTML
<consent-dialog theme="standard" variant="standard" locale="no" version="1">
  <img slot="dialog-logo-top" width="100px" src="/logo.png" alt="Firmalogo" />
  <div slot="dialog-title" class="din-klasse">
    <h2>Vi bruker informasjonskapsler</h2>
  </div>
  <span slot="marketing-content">
    <b>Vi samler for øyeblikket ikke inn informasjonskapsler for markedsføringsformål.</b>
  </span>
</consent-dialog>

Flytende dialogknapp

Når show-fab er satt til true, viser <consent-dialog> en floating action button (FAB) som lar brukere re-åpne samtykkevalgene etter at de har sendt inn sitt første samtykke. Bruk fab-position for å feste den nederst til venstre eller nederst til høyre i visningsvinduet.

Synlighetsregler

Skjult til initialt samtykke er sendt inn.
Skjult mens samtykkedialogen eller personvernerklæringsdialogen er åpen.
Skjult hvis show-fab ikke er satt eller er satt til false.

HTML
<consent-dialog show-fab fab-position="left">
</consent-dialog>

Automatiske personvernprofiler

PrivacyKit bruker automatisk en passende personvernprofil basert på den besøkendes registrerte plassering. Ingen ytterligere konfigurasjon er nødvendig.

Europa

Besøkende som befinner seg i Europa, presenteres for GDPR/ePrivacy-samtykkemodellen. Analyse, markedsføring og andre ikke-essensielle teknologier forblir blokkert til den besøkende har gitt samtykke.

Utenfor Europa

Besøkende utenfor Europa presenteres for CPRA-personvernmodellen. Samtykke gis automatisk, slik at nettstedet kan fungere uten en innledende samtykkedialog. Besøkende kan når som helst åpne PrivacyKit-dialogen for å gjennomgå eller trekke tilbake sine personvernvalg. Hvis samtykket trekkes tilbake, ber PrivacyKit om en sideoppdatering for å sikre at blokkerte teknologier ikke lenger kjører.

Slik fastslås plasseringen

PrivacyKit fastslår automatisk om den besøkende befinner seg i Europa. Ingen konfigurasjon er nødvendig.

Flerspråklig støtte

<consent-dialog> leveres med innebygde oversettelser for engelsk, norsk, tysk, polsk, spansk, fransk, italiensk, nederlandsk, svensk, dansk og finsk — ingen oversettelsesfiler å laste inn eller vedlikeholde selv.

Automatisk gjenkjenning

Som standard leser dialogen besøkendes nettleserspråk og viser den tilhørende oversettelsen automatisk. Hvis nettleseren er satt til et språk PrivacyKit ikke støtter, faller den tilbake til engelsk.

Overstyre språket

For å tvinge frem et bestemt språk uavhengig av den besøkendes nettleserinnstillinger, sett attributtet locale — se tabellen ovenfor for hele listen over støttede koder.

HTML
<consent-dialog locale="no"></consent-dialog>

Google Consent Mode v2

Når google-consent-mode er aktivert, leser PrivacyKit den besøkendes samtykkevalg og signaliserer dem til Google Tag Manager eller gtag ved hjelp av Google Consent Mode v2-protokollen. Dette skjer automatisk ved sidelasting og hver gang den besøkende endrer samtykket sitt. Ingen ytterligere konfigurasjon er nødvendig utover å legge til attributtet.

Samtykkesignal-mapping

PrivacyKit kobler sine tre samtykkekategorier til Googles syv Consent Mode v2-felt:

GCM v2-felt	Koblet fra	Verdi
analytics_storage	Analyse	granted / denied
ad_storage	Markedsføring	granted / denied
ad_user_data	Markedsføring	granted / denied
ad_personalization	Markedsføring	granted / denied
functionality_storage	Preferanser	granted / denied
personalization_storage	Preferanser	granted / denied
security_storage	—	Always granted

security_storage er alltid granted, siden det dekker sikkerhetskritisk nettleserlagring og ikke er underlagt valgfritt sporingssamtykke.

Hvordan signaler sendes

Ved sidelasting sørger PrivacyKit for at window.dataLayer og en gtag-funksjon finnes, med Googles standardsnutt, og beholder dem som allerede ligger på siden. Den legger en standardverdi der alt er avslått i køen, deretter den besøkendes nåværende samtykke, og legger en oppdatering i køen ved hver endring av samtykke:

JavaScript
gtag('consent', 'update', {
  analytics_storage: 'granted' | 'denied',
  ad_storage: 'granted' | 'denied',
  ad_user_data: 'granted' | 'denied',
  ad_personalization: 'granted' | 'denied',
  functionality_storage: 'granted' | 'denied',
  personalization_storage: 'granted' | 'denied',
  security_storage: 'granted'
});

dataLayer er en kø i minnet på siden; ingenting lagres. Google Tag Manager og gtag.js behandler kommandoene i køen i rekkefølge når de lastes, slik at samtykkestatusen er på plass før noen Google-tagg kjører, også når Google lastes senere.

Har siden din sin egen Google-snutt, må den beholde en eksisterende dataLayer (window.dataLayer = window.dataLayer || [], slik Googles snutter gjør).

Feilsøkingstips: PrivacyKit logger sin Google Consent Mode v2-aktivitet til nettleserkonsollen, slik at du kan bekrefte oppførselen direkte i DevTools:

[PrivacyKit] Google Consent Mode v2 enabled.
Vises én gang ved sidelasting når google-consent-mode er satt. Standardverdien der alt er avslått legges i køen samtidig.
[PrivacyKit] Google Consent Mode v2 update queued.
En samtykkeoppdatering ble lagt i dataLayer-køen, ved sidelasting og ved hver endring av samtykke. Google tar den i bruk når taggene lastes.

Bruker du Google Tag Manager? Se de to måtene

Dialogmetoder

TypeScriptAPI-referanse

openConsentDialog(): void
onConsentDialogClosed(callback: () => void): () => void
openPrivacyPolicyDialog(): void

<consent-guard>

Viser innhold først når det angitte samtykkeuttrykket evalueres til sann.

Attributter

Attributt	Type	Standard / Påkrevd	Beskrivelse
consent	string	unset	Samtykkeuttrykk som må være oppfylt før innhold rendres.
source	string	unset	Hvor samtykket leses fra. Når den ikke er satt, bruker guarden samtykke fra PrivacyKit-samtykkedialogen. "google-consent-mode" leser samtykket som det eksisterende samtykkebanneret ditt har samlet inn, via Google Consent Mode v2. Ukjente verdier holder guarden blokkert.

Samtykkeuttrykk

Uttrykk	Påkrevd samtykke	Beskrivelse
	Alle kategorier	Hvis consent-attributten utelates, må alle kategorier godkjennes for at guard-en skal aktiveres.
necessary	Ingen	Forhindrer falske positiver i Consent Validator for nødvendige ressurser som ikke automatisk gjenkjennes av PrivacyKit.
preferences	Preferanser
analytics	Analyse
marketing	Markedsføring
preferences+analytics	Preferanser OG Analyse	For script som trenger begge typer samtykke, f.eks. HubSpot-sporing.
preferences\|analytics	Preferanser ELLER Analyse	For containere som sjekker samtykke per tagg, f.eks. Google Tag Manager.
preferences+marketing	Preferanser OG Markedsføring	For script som trenger begge typer samtykke, f.eks. HubSpot-sporing.
preferences\|marketing	Preferanser ELLER Markedsføring	For containere som sjekker samtykke per tagg, f.eks. Google Tag Manager.
analytics+marketing	Analyse OG Markedsføring	For script som trenger begge typer samtykke, f.eks. HubSpot-sporing.
analytics\|marketing	Analyse ELLER Markedsføring	For containere som sjekker samtykke per tagg, f.eks. Google Tag Manager.

Eksempel 1 – Beskytt skript

HTML
<consent-guard consent="analytics">
  <script type="text/plain" data-src="https://static.hotjar.com/c/hotjar-XXXXXXX.js?sv=6" data-async></script>
</consent-guard>

Eksempel 2 – Beskytt innebygd innhold

HTML
<consent-guard consent="analytics+marketing">
  <iframe
    title="YouTube video"
    data-src="https://www.youtube.com/embed/abc123"
    width="560"
    height="315"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</consent-guard>

Viktig: Legg merke til at håndterte ressurser i eksemplene 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 Consent Validator.

Samtykkekilde

En guard kan håndheve samtykket som det eksisterende banneret ditt samler inn. Legg til source="google-consent-mode" på <consent-guard>, så leser guarden samtykket fra banneret ditt i stedet for fra PrivacyKit-samtykkedialogen. Script og innebygd innhold i guarden lastes først når den besøkende har sagt ja.

Slik fungerer det

Banneret ditt skriver den besøkendes valg som Google Consent Mode v2-signaler til window.dataLayer, ved hver sidelasting og hver gang valget endres.
Guarden leser disse signalene direkte. Den trenger ikke Google Tag Manager, men bruker bare Tag Managers grensesnitt til å lese den besøkendes samtykke.
Når det nødvendige samtykket er gitt, laster guarden script og innebygd innhold, akkurat som når PrivacyKit-samtykkedialogen er kilden.

Bruk samtykket fra ditt eksisterende banner

HTML
<!-- Ditt eksisterende samtykkebanner, med Google Consent Mode v2 slått på. -->
<script src="https://cdn.your-consent-banner.com/banner.js"></script>

<!-- PrivacyKit -->
<script type="module" src="https://cdn.privacykit.eu/v1/privacykit.esm.js"></script>

<!-- Hotjar lastes først når den besøkende godtar analyse i banneret ditt -->
<consent-guard consent="analytics" source="google-consent-mode">
  <script type="text/plain" data-src="https://static.hotjar.com/c/hotjar-XXXXXXX.js?sv=6" data-async></script>
</consent-guard>

<!-- Innebygd innhold som krever samtykke til markedsføring -->
<consent-guard consent="marketing" source="google-consent-mode">
  <iframe title="YouTube video" data-src="https://www.youtube.com/embed/abc123" width="560" height="315"></iframe>
</consent-guard>

Krav

Google Consent Mode v2 er slått på i samtykkebanneret ditt. De fleste samtykkeplattformer støtter det, og mange har det på som standard. Sjekk innstillingene i banneret ditt.
Hvis banneret ditt lastes via Google Tag Manager, ikke legg Google Tag Manager i en guard, ellers lastes banneret aldri.

Google Tag Manager

Du kan bruke PrivacyKit med Google Tag Manager på to måter: streng, der Tag Manager venter på samtykke, eller fleksibel, der Tag Manager lastes med en gang og egne samtykkeinnstillinger avgjør hvilke tagger som utløses. I begge tilfeller legger du til google-consent-mode på <consent-dialog>, slik at taggene i Tag Manager vet hva den besøkende har valgt.

Streng: Tag Manager i en guard

Ingenting fra Tag Manager lastes, og ingenting sendes til Google, før den besøkende har samtykket. En tysk domstol (VG Hannover, 2025) har slått fast at lasting av Google Tag Manager krever samtykke, og streng modus følger den tolkningen. Sett samtykket på guarden etter hva containeren utløser: analytics eller marketing hvis den utløser én type tagger, eller analytics|marketing hvis den utløser tagger av begge typer, slik at den lastes så snart den besøkende godtar én av dem. Deretter håndterer Tag Manager samtykket for hver tagg.

HTML
<consent-dialog google-consent-mode></consent-dialog>

<consent-guard consent="analytics|marketing">
  <script type="text/plain" data-src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX" data-async></script>
</consent-guard>

Fleksibel: Tag Manager uten guard

Last Tag Manager som vanlig. Googles tagger følger Consent Mode-signalene fra dialogen. Andre tagger i containeren, som Meta eller LinkedIn, trenger samtykkeinnstillinger i Tag Manager. Consent Validator viser Tag Manager som ikke beskyttet av en guard. Det er tilsiktet: Validatoren rapporterer alt som ikke ligger i en guard.

Fleksibel er også oppsettet for nettsteder som bruker Consent Mode Advanced med vilje. Når samtykke er avslått, sender Googles tagger fortsatt data uten informasjonskapsler, som sideadressen og enhetsdetaljer, slik at Google kan modellere konverteringer. PrivacyKit støtter dette oppsettet. Om det passer for nettstedet ditt, er en beslutning for deg og din juridiske rådgiver.

<consent-missing>

Vis fallback-innhold når en tilhørende consent-guard blokkerer hovedinnholdet.

Attributter

Attributt	Type	Standard / Påkrevd	Beskrivelse
for	string	påkrevd	ID til tilhørende <consent-guard>-element.

Eksempel

<consent-guard id="analytics-guard" consent="analytics">
  <script type="text/plain" data-src="https://example.com/analytics.js"></script>
</consent-guard>

<consent-missing for="analytics-guard">
  Vennligst godta analyse-cookies for å fortsette.
</consent-missing>

<consent-validator>

Consent Validator overvåker utgående forespørsler og validerer samtykke-dekning på nettstedet ditt, og avdekker uhåndterte trackers og regresjoner som skyldes nettstedsendringer. Inaktiv som standard forblir den usynlig for besøkende og er trygg å inkludere i produksjon.

Attributter

Attributt	Type	Standard / Påkrevd	Beskrivelse
debug	boolean	false	Aktiverer Consent Validator-panelet ved sideinnlasting. Kun for utviklingsmiljøer.
delay	number	5000	Nettverksobservasjonsvindu (i millisekunder) før Consent Validator begynner å validere endepunktbruk og samtykke-dekning.
ignore-first-party-subdomains	boolean	true	Når den er true, ignoreres forespørsler til subdomener av nåværende domene i stillhet.
fab-position	left \| right	right	Styrer hvilken side av viewporten Consent Validator-FAB-en festes til.

Eksempel

HTML
<consent-validator debug delay="5000" ignore-first-party-subdomains="true" fab-position="left"></consent-validator>

Consent Validator forblir skjult for besøkende selv når den er inkludert i produksjonspakken. Den anbefalte måten å aktivere den på et nettsted i produksjon er å legge til ?privacykit=validate i URL-en — det aktiverer validatoren kun for den nettlesersøkten uten å påvirke besøkendes opplevelse.

Slå på programmatisk:

TypeScriptAPI-referanse

window.PrivacyKit?.toggleConsentValidator();

Tillegg

CSS-snutter

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.

NPM

CSS
consent-dialog:not(:defined) [slot] {
  display: none;
}

consent-guard:not([active]) {
  display: none;
}

consent-missing:not([active]) {
  display: none;
}
Hvis du bruker slottet innhold eller bruker consent-guards med HTML, inkluder dette utdraget i ditt globale stilark eller en <style>-tagg som kjøres før PrivacyKit web components rendres.