PrivacyKit Webbkomponenter

Offentlig dokumentation för webkomponenterna consent-dialog, consent-guard, consent-missing och compliance-monitor.

Innehåll

<consent-dialog>

Huvudkomponenten för PrivacyKit:s samtyckes-UI och orkestrering.

Egenskap	Typ	Standard / Krävs	Beskrivning
variant	standard \| panel \| modern \| modest	standard	Visuell variant av dialogen.
theme	standard \| dark \| teal \| slate \| light \| vibrant \| high-contrast	standard	Visuellt tema för dialogen.
expires-days	number	180	Livslängd för cookien i dagar.
version	number	0	Samtyckesversion för omgörningsregler.
locale	da \| de \| en \| es \| fi \| fr \| it \| nl \| no \| pl \| sv	från webbläsaren	Åsidosätter språket.
hide-summary-part-2	boolean	unset	Döljer sammanfattningssektion del 2 (dialog-summary-part-2) i dialogen.
hide-necessary	boolean	unset	Döljer kategorin Nödvändigt.
hide-preferences	boolean	unset	Döljer kategorin Preferenser.
hide-analytics	boolean	unset	Döljer kategorin Analys.
hide-marketing	boolean	unset	Döljer kategorin Marknadsföring.
hide-readmore	boolean	unset	Döljer den expanderbara Läs mer-sektionen.
hide-privacy-policy-link	boolean	unset	Döljer standardlänken till integritetspolicyn helt. Använd `privacy-policy-url` istället för att hålla länken synlig och omdirigera användarna till din egen integritetssida.
privacy-policy-url	string	unset	URL dit användare omdirigeras när de klickar på integritetspolicylänken. När den är angiven öppnar länken denna URL istället för den inbyggda integritetsdialogen.
demo	boolean	unset	Demoläge: stänger av auto-open och begränsar funktioner. Inte GDPR-kompatibelt, använd inte i produktion.
dismissible	boolean	false	Styr om dialogen kan stängas via bakgrund/Escape innan beslut fattats.
show-fab	boolean	false	Aktiverar knappen för samtyckesinställningar. Har ingen synlig effekt förrän en samtyckescookie finns.
fab-position	left \| right	left	Fäster knappen längst ned till vänster eller längst ned till höger i vyn.

Exempel

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

Knapp för samtyckesinställningar

När show-fab är satt till true visar <consent-dialog> en floating action button (FAB) som låter användare öppna sina samtyckesval igen efter den första inskickningen. Använd fab-position för att fästa den längst ned till vänster eller längst ned till höger i vyn.

Synlighetsregler

Dold tills det första samtycket har skickats in.
Dold medan samtyckesdialogen eller dialogen för integritetspolicyn är öppen.
Dold om show-fab inte är satt eller är satt till false.

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

Anpassa innehåll

Infoga eget innehåll i specifika delar av en komponent med hjälp av namngivna HTML-slots — så får du full kontroll över innehåll och styling utan att ändra komponenten.

Slotnamn	Beskrivning
dialog-logo	Valfritt logoinnehåll som visas i dialogens sidhuvud.
dialog-logo-alt	Alternativ placering för en varumärkeslogotyp, som visas uppe till höger vid texten i dialog-summary-part-1.
dialog-title	Ersätter titeln i dialogens sidhuvud.
dialog-summary-part-1	Lägger in eget innehåll i det första introduktionsstycket under dialogtiteln.
dialog-summary-part-2	Lägger in eget innehåll i det andra introduktionsstycket som förklarar samtyckesvalen.
necessary-content	Ersätter beskrivningen för Nödvändigt.
preferences-content	Eget innehåll i accordionen Preferenser.
analytics-content	Eget innehåll i accordionen Analys.
marketing-content	Eget innehåll i accordionen Marknadsföring.
read-more-title	Sätter rubriken för sektionen "Läs mer".
read-more-content	Innehåll som visas när "Läs mer" öppnas.
privacy-policy-content	Ersätter standardtexten för integritetspolicyn. Använd bara formuleringar som er egen juridiska rådgivare har godkänt, eftersom PrivacyKit inte kan verifiera GDPR-efterlevnad när du anpassar innehållet.

Exempel

HTML
<consent-dialog theme="standard" variant="standard" locale="sv" version="1">
  <img slot="dialog-logo" width="100px" src="/logo.png" alt="Företagslogotyp" />
  <div slot="dialog-title" class="din-klass">
    <h2>Vi använder cookies</h2>
  </div>
  <span slot="marketing-content">
    <b>Vi samlar för närvarande inte in cookies för marknadsföring.</b>
  </span>
</consent-dialog>

Design tokens

Design tokens exponerar stabila CSS-variabler så att du kan anpassa färger, spacing och typografi utan att röra implementationen. Inbyggda teman drivs av samma tokensystem, vilket gör att du kan åsidosätta enskilda stilar eller skapa ett helt anpassat utseende.

Design tokens	Beskrivning
--pk-bg-color	Bakgrundsfärg för hela dialogen.
--pk-paper-color	Pappersfärg för kort, ackordioner och paneler i dialogrutan.
--pk-text-color	Basfärg för rubriker och brödtext.
--pk-primary-color	Primär accent för CTA:er, fokus och länkar.
--pk-text-color-on-primary	Textfärg som används på element fyllda med primärfärgen, till exempel solida knappar.
--pk-secondary-color	Sekundär accent, främst för switchar.
--pk-focus-ring-color	Färg för fokusomriss (outline) vid tangentbordsfokus.
--pk-border-color	Kantfärg för panelkonturer, tabeller och avdelare.
--pk-border-width	Kantbredd för panelkonturer, tabeller och avdelare.
--pk-font-family	Teckensnittsfamilj för all text; faller tillbaka på body-font.
--pk-spacing-unit	Avståndsenhet som styr padding och gap.
--pk-control-radius	Hörnradius för knappar, fält och interaktiva kontroller.
--pk-dialog-radius	Hörnradius för den yttre behållaren i samtyckesdialogen.
--pk-dialog-shadow	Skugga för dialogrutan för samtyckeshantering.
--pk-dialog-max-height	Maxhöjd för samtyckesdialogen; när innehållet överskrider denna gräns blir dialogens innehåll rullbart.

Exempel

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

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

<consent-guard>

Renderar sitt innehåll först när den angivna samtyckesuttrycket är sant.

Egenskap	Typ	Standard / Krävs	Beskrivning
consent	string	unset	Samtyckesuttryck som måste uppfyllas innan innehållet renderas.

Samtyckesuttryck

Uttryck	Krävt samtycke	Beskrivning
	Alla kategorier	Om consent-attributet utelämnas måste alla kategorier godkännas för att guard ska aktiveras.
necessary	Ingen	Förhindrar falska positiva i Compliance Monitor för nödvändiga resurser som inte automatiskt känns igen av PrivacyKit.
preferences	Inställningar
analytics	Analys
marketing	Marknadsföring
preferences+analytics	Inställningar OCH Analys
preferences\|analytics	Inställningar ELLER Analys
preferences+marketing	Inställningar OCH Marknadsföring
preferences\|marketing	Inställningar ELLER Marknadsföring
analytics+marketing	Analys OCH Marknadsföring
analytics\|marketing	Analys ELLER Marknadsföring

Exempel 1 – Blockera/ladda skript

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

Exempel 2 – Blockera/ladda 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>

Viktigt: Observera att hanterade resurser i exemplen använder data-src i stället för src, och type="text/plain" används för script. PrivacyKit aktiverar hanterat innehåll först efter att samtycke har getts — annars kan resurser laddas direkt och framstå som hårdkodade i Compliance Monitor.

<consent-missing>

Visar reservinnehåll när en kopplad consent-guard blockerar huvudupplevelsen.

Egenskap	Typ	Standard / Krävs	Beskrivning
for	string	krävs	ID för det associerade <consent-guard>-elementet.

Exempel

<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">
  Acceptera analyscookies för att fortsätta.
</consent-missing>

<compliance-monitor>

Compliance Monitor övervakar utgående förfrågningar och validerar consent guard-täckning på din webbplats och identifierar ohanterade trackers och regressioner orsakade av webbplatsändringar. Inaktiv som standard förblir den osynlig för besökare och är säker att inkludera i produktion.

Egenskap	Typ	Standard / Krävs	Beskrivning
debug	boolean	false	Aktiverar Compliance Monitor-panelen vid sidinläsning. Endast för utvecklingsmiljöer.
delay	number	5000	Nätverksobservationsfönster (i millisekunder) innan Compliance Monitor börjar validera slutpunktsanvändning och consent guard-täckning.
ignore-first-party-subdomains	boolean	true	När den är true ignoreras förfrågningar till subdomäner för den nuvarande domänen i tysthet.
fab-position	left \| right	right	Styr vilken sida av viewporten som Compliance Monitor-FAB:en fästs vid.

Exempel

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

Compliance Monitor förblir dold för besökare även när den ingår i produktionsbundeln. Det rekommenderade sättet att aktivera den på en live-webbplats är att lägga till ?privacykit=monitor i URL:en — det aktiverar monitorn enbart för den webbläsarsessionen utan att påverka besökarupplevelsen.

Växla programmatiskt:

TypeScriptAPI-referens

window.PrivacyKit?.toggleComplianceMonitor();