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.

Attribut

Attribut	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.
google-consent-mode	boolean	unset	Skickar Google Consent Mode v2-samtyckessignaler baserat på användarens PrivacyKit-samtyckesval.
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-privacykit-badge	boolean	unset	Döljer PrivacyKit-märket som visas längst ned i samtyckesdialogrutans innehåll.
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.
dialog-position	left \| right	left	Styr vilken sida av skärmen dialogen visas på. Gäller endast varianterna modern och modest — standard och panel är alltid centrerade.

Exempel

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

Lokalisering

<consent-dialog> levereras med inbyggda översättningar för engelska, norska, tyska, polska, spanska, franska, italienska, nederländska, svenska, danska och finska — inga översättningsfiler att ladda eller underhålla själv.

Automatisk identifiering

Som standard läser dialogen besökarens webbläsarspråk och visar automatiskt motsvarande översättning. Om webbläsaren är inställd på ett språk som PrivacyKit inte stöder, används engelska istället.

Åsidosätta språket

För att tvinga fram ett specifikt språk oavsett besökarens webbläsarinställningar, sätt attributet locale — se tabellen ovan för hela listan över språkkoder som stöds.

HTML
<consent-dialog locale="sv"></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-transparency	Transparens för dialogytan och dess nästlade kort/ackordioner, angivet i procent. 0 % (standard) är helt solid; värdet begränsas till max 50 %.
--pk-bg-color	Bakgrundsyta för hela dialogskalet. Blandas med --pk-transparency för att ge den slutliga färgen.
--pk-paper-color	Pappersyta för kort, ackordioner och paneler i dialogrutan. Blandas också med --pk-transparency.
--pk-text-color	Basfärg för rubriker och brödtext.
--pk-text-color-on-primary	Textfärg som används på element fyllda med primärfärgen, till exempel solida knappar.
--pk-primary-color	Primär accent för CTA:er, fokus och länkar.
--pk-secondary-color	Sekundär accent, främst för switchar.
--pk-focus-ring-color	Färg för fokusomriss (outline) vid tangentbordsfokus.
--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-border-color	Kantfärg för kontroller inuti dialogen — kort, ackordioner, knappar och liknande element.
--pk-control-border-width	Kantbredd för kontroller inuti dialogen — kort, ackordioner, knappar och liknande element.
--pk-control-border-radius	Hörnradius för knappar, fält och interaktiva kontroller.
--pk-dialog-border-color	Kantfärg för själva dialogens ram — konturen av den yttre panelen och avdelarlinjerna i header/footer.
--pk-dialog-border-width	Kantbredd för själva dialogens ram — konturen av den yttre panelen och avdelarlinjerna i header/footer.
--pk-dialog-border-radius	Hörnradius för den yttre behållaren i samtyckesdialogen.
--pk-dialog-max-height	Maxhöjd för samtyckesdialogen; när innehållet överskrider denna gräns blir dialogens innehåll rullbart.
--pk-dialog-shadow	Skugga för dialogrutan för samtyckeshantering.

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

Innehållsslots

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-top	Valfri logotyp eller varumärkesbild som visas i rubriken på samtyckesdialogen.
dialog-logo-right	Valfri logotyp eller varumärkesbild som visas längst upp till höger i samtyckesdialogen.
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-top" 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>

Flytande dialogknapp

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>

Google Consent Mode v2

När google-consent-mode är aktiverat läser PrivacyKit användarens samtyckesval och signalerar dem till Google Tag Manager eller gtag med hjälp av Google Consent Mode v2-protokollet. Detta sker automatiskt vid sidladdning och varje gång användaren ändrar sitt samtycke. Ingen ytterligare konfiguration krävs utöver att lägga till attributet.

Rekommenderad konfiguration

Att kombinera <consent-guard> runt din GTM-snutt med google-consent-mode på dialogen är ett tillämpningsfokuserat tillvägagångssätt: GTM kan inte laddas alls innan samtycke har getts, och Google Consent Mode v2-signaler skickas omedelbart när det sker. GTM är bara en container — den kan innehålla analystaggar, marknadsföringstaggar, eller båda, beroende på vad du har konfigurerat i den. Ställ in consent-uttrycket på <consent-guard> därefter: marketing om GTM endast utlöser marknadsförings-/annonstaggar, analytics om det bara handlar om analys, eller analytics+marketing om den utlöser båda.

HTML
<!-- Match the consent expression to what GTM actually fires: "analytics" or "marketing" -->
<consent-guard consent="analytics">
  <script type="text/plain" data-src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"></script>
</consent-guard>

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

Mappning av samtyckessignaler

PrivacyKit mappar sina tre samtyckeskategorier till Googles sju Consent Mode v2-fält:

GCM v2-fält	Mappat från	Värde
analytics_storage	Analys	granted / denied
ad_storage	Marknadsföring	granted / denied
ad_user_data	Marknadsföring	granted / denied
ad_personalization	Marknadsföring	granted / denied
functionality_storage	Inställningar	granted / denied
personalization_storage	Inställningar	granted / denied
security_storage	—	Always granted

security_storage är alltid granted, eftersom det täcker säkerhetskritisk webbläsarlagring och inte omfattas av valfritt spårningssamtycke.

Hur signaler skickas

PrivacyKit kontrollerar om window.gtag är tillgängligt (Google Tag Manager eller gtag.js laddat). Om så är fallet anropar den:

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'
});

Om gtag inte är tillgängligt men window.dataLayer är det, skickar PrivacyKit samtyckesuppdateringen direkt till dataLayer. Om ingetdera finns skickas ingen signal och inget köas.

När Google Tag Manager skyddas av <consent-guard> — det vill säga att den bara laddas efter att användaren har gett sitt samtycke — försöker PrivacyKit automatiskt skicka signalen igen efter att GTM har laddats klart.

Felsökningstips: PrivacyKit loggar sin Google Consent Mode v2-aktivitet till webbläsarkonsolen, så att du kan verifiera beteendet direkt i DevTools:

[PrivacyKit] Google Consent Mode v2 update emitted.
En samtyckessignal skickades till gtag eller dataLayer.
[PrivacyKit] Google Consent Mode v2 update skipped because no Google tag was detected.
Varken gtag eller dataLayer hittades i webbläsaren, så ingenting skickades.

Dialogmetoder

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.

Attribut

Attribut	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 – Skydda skript

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

Exempel 2 – Skydda inbäddat innehåll

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.

Attribut

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

Attribut

Attribut	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();

Bilagor

CSS-snuttrar

Undvik flimmer innan webkomponenterna är färdigladdade. Utan detta snipp kan HTML i slots eller guards blinka kort när:

consent-dialog kan blinka till kort om du använder slottade element och de renderas innan komponentdefinitionen har laddats.
consent-guard kan blinka till kort om den används för villkorlig HTML och innehållet renderas innan komponenten aktiveras.
consent-missing kan blinka till kort om den används som fallback och den renderas innan komponenten aktiveras.

Lägg till styling i ditt eget light DOM för att undvika flimmer.

NPM

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

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

consent-missing:not([active]) {
  display: none;
}
Om du använder slottat innehåll eller använder consent-guards med HTML, inkludera den här snippeten i ditt globala stylesheet eller en <style>-tagg som körs innan PrivacyKit web components renderas.