PrivacyKit Webkomponenter

Offentlig dokumentation af webkomponenterne consent-dialog, consent-guard, consent-missing og compliance-monitor.

Indholdsfortegnelse

<consent-dialog>

Hovedkomponenten for PrivacyKit-samtykke UI og orkestrering.

Egenskab	Type	Standard / Påkrævet	Beskrivelse
variant	standard \| panel \| modern \| modest	standard	Visuel variant af dialogen.
theme	standard \| dark \| teal \| slate \| light \| vibrant \| high-contrast	standard	Visuelt tema for dialogen.
expires-days	number	180	Levetid for cookien (dage).
version	number	0	Version af samtykkeskemaet til re-samtykke.
locale	da \| de \| en \| es \| fi \| fr \| it \| nl \| no \| pl \| sv	fra browser	Tving en bestemt locale.
hide-summary-part-2	boolean	unset	Skjuler dialogens opsummering del 2 (dialog-summary-part-2).
hide-necessary	boolean	unset	Skjuler kategorien Nødvendig.
hide-preferences	boolean	unset	Skjul kategorien Præferencer.
hide-analytics	boolean	unset	Skjul kategorien Analyse.
hide-marketing	boolean	unset	Skjul kategorien Markedsføring.
hide-readmore	boolean	unset	Skjuler den udvidelige "Læs mere"-sektion.
hide-privacy-policy-link	boolean	unset	Skjuler standardlinket til privatlivspolitikken fuldstændigt. Brug `privacy-policy-url` i stedet for at holde linket synligt og omdirigere brugerne til din egen privatlivspolitikside.
privacy-policy-url	string	unset	URL som brugerne omdirigeres til, når de klikker på privatlivspolitiklinket. Når angivet, åbner linket denne URL i stedet for den indbyggede privatlivsdialog.
demo	boolean	unset	Demo-tilstand: deaktiverer automatisk åbning og begrænser funktioner. Ikke GDPR-kompatibel.
dismissible	boolean	false	Bestemmer om dialogen kan lukkes via backdrop/Escape, hvis der ikke er taget stilling.
show-fab	boolean	false	Aktiverer knappen til samtykkeindstillinger. Har ingen synlig effekt før en samtykkecookie findes.
fab-position	left \| right	left	Fastgør knappen nederst til venstre eller nederst til højre i viewporten.

Eksempel

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

Knap til samtykkeindstillinger

Når show-fab er sat til true, viser <consent-dialog> en floating action button (FAB), der lader brugere genåbne deres samtykkevalg efter første indsendelse. Brug fab-position til at fastgøre den nederst til venstre eller nederst til højre i viewporten.

Synlighedsregler

Skjult indtil det første samtykke er indsendt.
Skjult mens samtykkedialogen eller privatlivspolitik-dialogen er åben.
Skjult hvis show-fab ikke er sat eller er sat til false.

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

Tilpas indhold

Indsæt brugerdefineret indhold i specifikke dele af en komponent ved hjælp af navngivne HTML-slots — så får du fuld kontrol over indhold og styling uden at ændre selve komponenten.

Slotnavn	Beskrivelse
dialog-logo	Valgfrit logoinhold, der vises i dialogens header.
dialog-logo-alt	Alternativ placering til et brandlogo, som vises øverst til højre ved teksten i dialog-summary-part-1.
dialog-title	Erstatter titlen i dialogens header.
dialog-summary-part-1	Tilføjer brugerdefineret tekst til det første introafsnit under dialogtitlen.
dialog-summary-part-2	Tilføjer brugerdefineret tekst til det andet introafsnit, der forklarer samtykkevalg.
necessary-content	Erstatter beskrivelsen i kategorien Nødvendig.
preferences-content	Eget indhold i accordionen Præferencer.
analytics-content	Eget indhold i accordionen Analyse.
marketing-content	Eget indhold i accordionen Markedsføring.
read-more-title	Angiver titlen for sektionen "Læs mere".
read-more-content	Indhold, der vises når "Læs mere" åbnes.
privacy-policy-content	Erstatter standardteksten for privatlivspolitikken. Brug kun tekst godkendt af jeres egen juridiske rådgiver, da PrivacyKit ikke kan bekræfte GDPR-overholdelse efter tilpasning.

Eksempel

HTML
<consent-dialog theme="standard" variant="standard" locale="da" version="1">
  <img slot="dialog-logo" width="100px" src="/logo.png" alt="Virksomhedslogo" />
  <div slot="dialog-title" class="din-klasse">
    <h2>Vi bruger cookies</h2>
  </div>
  <span slot="marketing-content">
    <b>Vi indsamler i øjeblikket ikke cookies til markedsføring.</b>
  </span>
</consent-dialog>

Design tokens

Design tokens eksponerer stabile CSS-variabler til farver, spacing, typografi m.m., uden at du rører implementationen. Indbyggede temaer er drevet af det samme token-system, så du kan overskrive enkelte stilarter eller skabe et helt tilpasset udtryk.

Design tokens	Beskrivelse
--pk-bg-color	Baggrundsfarve for hele dialogen.
--pk-paper-color	Papirfarve til kort, akkordeoner og paneler inde i dialogen.
--pk-text-color	Basisfarve til overskrifter og tekst.
--pk-primary-color	Primær accent til CTA'er, fokus og links.
--pk-text-color-on-primary	Tekstfarve, der bruges på elementer udfyldt med primærfarven, f.eks. solide knapper.
--pk-secondary-color	Sekundær accent, især til switches.
--pk-focus-ring-color	Farve på fokusomrids (outline) ved tastaturfokus.
--pk-border-color	Kantfarve til panelkonturer, tabeller og skillelinjer.
--pk-border-width	Kantbredde til panelkonturer, tabeller og skillelinjer.
--pk-font-family	Skrifttype for al tekst; falder tilbage til body-font.
--pk-spacing-unit	Afstandsenhed der styrer padding og gap.
--pk-control-radius	Hjørneradius for knapper, inputfelter og interaktive kontroller.
--pk-dialog-radius	Hjørneradius for den ydre beholder til samtykkedialogen.
--pk-dialog-shadow	Skyggeeffekt for samtykkedialogen.
--pk-dialog-max-height	Maksimal højde på samtykkedialogen; når indholdet overstiger denne grænse, ruller dialogens brødtekst.

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

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

<consent-guard>

Renderer sit indhold, når det angivne samtykkeudtryk evalueres til sand.

Egenskab	Type	Standard / Påkrævet	Beskrivelse
consent	string	unset	Samtykkeudtryk, der skal være sandt før rendering.

Samtykkebetingelser

Udtryk	Påkrævet samtykke	Beskrivelse
	Alle kategorier	Hvis consent-attributten udelades, skal alle kategorier accepteres, for at guard'en aktiveres.
necessary	Ingen	Forhindrer falske positive resultater i Compliance Monitor for nødvendige ressourcer, der ikke automatisk genkendes af PrivacyKit.
preferences	Præferencer
analytics	Analyse
marketing	Marketing
preferences+analytics	Præferencer OG Analyse
preferences\|analytics	Præferencer ELLER Analyse
preferences+marketing	Præferencer OG Marketing
preferences\|marketing	Præferencer ELLER Marketing
analytics+marketing	Analyse OG Marketing
analytics\|marketing	Analyse ELLER Marketing

Eksempel 1 – Blokér/indlæs scripts

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

Eksempel 2 – Blokér/indlæs HTML

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>

Vigtigt: Bemærk, at håndterede ressourcer i eksemplerne bruger data-src i stedet for src og type="text/plain" bruges for scripts. PrivacyKit aktiverer håndteret indhold, efter at samtykke er givet — ellers kan ressourcer indlæses med det samme og fremstå som hardkodet i Compliance Monitor.

<consent-missing>

Vis fallback-indhold, når en tilknyttet consent-guard blokerer.

Egenskab	Type	Standard / Påkrævet	Beskrivelse
for	string	påkrævet	ID for det relaterede <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">
  Acceptér analyse-cookies for at fortsætte.
</consent-missing>

<compliance-monitor>

Compliance Monitor overvåger udgående anmodninger og validerer consent guard-dækning på dit websted og afslører uhåndterede trackers og regressioner introduceret af webstedsændringer. Inaktiv som standard forbliver den usynlig for besøgende og er sikker at inkludere i produktion.

Egenskab	Type	Standard / Påkrævet	Beskrivelse
debug	boolean	false	Aktiverer Compliance Monitor-panelet ved sideindlæsning. Kun til udviklingsmiljøer.
delay	number	5000	Netværksobservationsvindue (i millisekunder) inden Compliance Monitor begynder at validere slutpunktforbrug og consent guard-dækning.
ignore-first-party-subdomains	boolean	true	Når den er true, ignoreres forespørgsler til subdomæner af det nuværende domæne i stilhed.
fab-position	left \| right	right	Styrer hvilken side af viewporten Compliance Monitor-FAB'en fastgøres til.

Eksempel

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

Compliance Monitor forbliver skjult for besøgende, selv når den er inkluderet i produktionsbundtet. Den anbefalede måde at aktivere den på et live websted er at tilføje ?privacykit=monitor til URL'en — det aktiverer monitoren kun for den pågældende browsersession uden at påvirke besøgsoplevelsen.

Slå til programmatisk:

TypeScriptAPI-reference

window.PrivacyKit?.toggleComplianceMonitor();