PrivacyKit Webkomponenter

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

Innholdsfortegnelse

<consent-dialog>

Hovedkomponenten for PrivacyKit-dialogen og orkestreringslogikken.

Egenskap	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.
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-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.

Eksempel

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

Samtykkeinnstillinger-knapp

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>

Tilpass innhold

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	Valgfritt logo-innhold som vises i dialogens toppseksjon.
dialog-logo-alt	Alternativ plassering for en merkevarelogo, vist øverst til høyre ved teksten i dialog-summary-part-1.
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" 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>

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-bg-color	Bakgrunnsfarge for hele dialogen.
--pk-paper-color	Papirfarge for kort, akkordeoner og paneler inne i dialogen.
--pk-text-color	Grunnfarge for overskrifter og brødtekst.
--pk-primary-color	Primær aksent for CTA-er, fokusringer og lenker.
--pk-text-color-on-primary	Tekstfarge brukt på elementer fylt med primærfargen, som for eksempel helfylte knapper.
--pk-secondary-color	Sekundær aksent, hovedsakelig for bryter/knott-tilstander.
--pk-focus-ring-color	Farge på fokusomriss (outline) for tastaturfokus.
--pk-border-color	Kantfarge for panelkonturer, tabeller og skillelinjer.
--pk-border-width	Kantbredde for panelkonturer, tabeller og skillelinjer.
--pk-font-family	Skrifttype for all tekst; faller tilbake til body-fonten.
--pk-spacing-unit	Avstandsenhet som styrer padding og gap.
--pk-control-radius	Hjørneradius for knapper, felt og interaktive kontroller.
--pk-dialog-radius	Hjørneradius for den ytre beholderen til samtykkedialogen.
--pk-dialog-shadow	Skygge som brukes på dialogen.
--pk-dialog-max-height	Maksimal høyde på samtykkedialogen; når innholdet overstiger denne grensen, ruller dialogens innhold.

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-radius: 10px;
  --pk-dialog-radius: 20px;
  --pk-dialog-shadow: 10px 20px rgba(0, 0, 0, 0.5);
  --pk-dialog-max-height: 50vh;
">
</consent-dialog>

Metoder

TypeScriptAPI-referanse

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

<consent-guard>

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

Egenskap	Type	Standard / Påkrevd	Beskrivelse
consent	string	unset	Samtykkeuttrykk som må være oppfylt før innhold rendres.

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 Compliance Monitor for nødvendige ressurser som ikke automatisk gjenkjennes av PrivacyKit.
preferences	Preferanser
analytics	Analyse
marketing	Markedsføring
preferences+analytics	Preferanser OG Analyse
preferences\|analytics	Preferanser ELLER Analyse
preferences+marketing	Preferanser OG Markedsføring
preferences\|marketing	Preferanser ELLER Markedsføring
analytics+marketing	Analyse OG Markedsføring
analytics\|marketing	Analyse ELLER Markedsføring

Eksempel 1 – Blokker/last skript

HTML
<consent-guard consent="marketing">
  <script type="text/plain" data-src="https://www.googletagmanager.com/gtm/js"></script>
</consent-guard>

Eksempel 2 – Blokker/last HTML-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 Compliance Monitor.

<consent-missing>

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

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

<compliance-monitor>

Compliance Monitor 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.

Egenskap	Type	Standard / Påkrevd	Beskrivelse
debug	boolean	false	Aktiverer Compliance Monitor-panelet ved sideinnlasting. Kun for utviklingsmiljøer.
delay	number	5000	Nettverksobservasjonsvindu (i millisekunder) før Compliance Monitor 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 Compliance Monitor-FAB-en festes til.

Eksempel

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

Compliance Monitor 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=monitor i URL-en — det aktiverer monitoren kun for den nettlesersøkten uten å påvirke besøkendes opplevelse.

Slå på programmatisk:

TypeScriptAPI-referanse

window.PrivacyKit?.toggleComplianceMonitor();