PrivacyKit Webbkomponenter

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

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å besökarens 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>

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>

Automatiska integritetsprofiler

PrivacyKit tillämpar automatiskt en lämplig integritetsprofil baserat på besökarens identifierade plats. Ingen ytterligare konfiguration krävs.

Europa

Besökare som befinner sig i Europa visas GDPR/ePrivacy-samtyckesmodellen. Analys, marknadsföring och andra icke väsentliga tekniker förblir blockerade tills besökaren har gett sitt samtycke.

Utanför Europa

Besökare utanför Europa visas CPRA-integritetsmodellen. Samtycke ges automatiskt, vilket gör att webbplatsen kan fungera utan en inledande samtyckesdialog. Besökare kan när som helst öppna PrivacyKit-dialogen för att granska eller återkalla sina integritetsval. Om samtycket återkallas ber PrivacyKit om en sidomladdning för att säkerställa att blockerade tekniker inte längre körs.

Så bestäms platsen

PrivacyKit avgör automatiskt om besökaren befinner sig inom Europa. Ingen konfiguration krävs.

Flerspråksstöd

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

Google Consent Mode v2

När google-consent-mode är aktiverat läser PrivacyKit besökarens 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 besökaren ändrar sitt samtycke. Ingen ytterligare konfiguration krävs utöver att lägga till attributet.

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

När sidan laddas ser PrivacyKit till att window.dataLayer och en gtag-funktion finns, med Googles standardsnutt, och behåller dem som redan finns på sidan. Den köar ett standardvärde där allt är nekat, därefter besökarens nuvarande samtycke, och köar en uppdatering vid varje ändring av samtycket:

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 är en kö i sidans minne; ingenting sparas. Google Tag Manager och gtag.js bearbetar de köade kommandona i ordning när de laddas, så att samtyckesstatusen gäller innan någon Google-tagg körs, även när Google laddas senare.

Har din sida en egen Google-snutt måste den behålla en befintlig dataLayer (window.dataLayer = window.dataLayer || [], som Googles snuttar gör).

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 enabled.
Visas en gång när sidan laddas om google-consent-mode är satt. Samtidigt köas standardvärdet där allt är nekat.
[PrivacyKit] Google Consent Mode v2 update queued.
En samtyckesuppdatering köades i dataLayer, när sidan laddas och vid varje ändring av samtycket. Google tillämpar den när taggarna laddas.

Använder du Google Tag Manager? Se de två sätten

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.
source	string	unset	Var samtycket läses ifrån. När det inte är angivet använder guarden samtycke från PrivacyKits samtyckesdialog. "google-consent-mode" läser samtycket som din befintliga samtyckesbanner har samlat in, via Google Consent Mode v2. Okända värden håller guarden blockerad.

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 Consent Validator 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	För script som behöver båda typerna av samtycke, t.ex. HubSpot-spårning.
preferences\|analytics	Inställningar ELLER Analys	För containrar som kontrollerar samtycke per tagg, t.ex. Google Tag Manager.
preferences+marketing	Inställningar OCH Marknadsföring	För script som behöver båda typerna av samtycke, t.ex. HubSpot-spårning.
preferences\|marketing	Inställningar ELLER Marknadsföring	För containrar som kontrollerar samtycke per tagg, t.ex. Google Tag Manager.
analytics+marketing	Analys OCH Marknadsföring	För script som behöver båda typerna av samtycke, t.ex. HubSpot-spårning.
analytics\|marketing	Analys ELLER Marknadsföring	För containrar som kontrollerar samtycke per tagg, t.ex. Google Tag Manager.

Exempel 1 – Skydda 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>

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 Consent Validator.

Samtyckeskälla

En guard kan upprätthålla samtycket som din befintliga banner samlar in. Lägg till source="google-consent-mode" på <consent-guard>, så läser guarden samtycket från din banner i stället för från PrivacyKits samtyckesdialog. Script och inbäddat innehåll i guarden laddas först när besökaren har sagt ja.

Så fungerar det

Din banner skriver besökarens val som Google Consent Mode v2-signaler till window.dataLayer, vid varje sidladdning och varje gång valet ändras.
Guarden läser signalerna direkt. Den behöver inte Google Tag Manager, utan använder bara Tag Managers gränssnitt för att läsa besökarens samtycke.
När det nödvändiga samtycket har getts laddar guarden sina script och sitt inbäddade innehåll, precis som när PrivacyKits samtyckesdialog är källan.

Använd samtycket från din befintliga banner

HTML
<!-- Din befintliga samtyckesbanner, med Google Consent Mode v2 aktiverat. -->
<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 laddas först när besökaren godkänner analys i din banner -->
<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>

<!-- Inbäddat innehåll som kräver samtycke till marknadsfö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 är aktiverat i din samtyckesbanner. De flesta samtyckesplattformar stöder det, och många har det på som standard. Kontrollera inställningarna i din banner.
Om din banner laddas via Google Tag Manager, lägg inte Google Tag Manager i en guard, annars laddas bannern aldrig.

Google Tag Manager

Du kan använda PrivacyKit med Google Tag Manager på två sätt: strikt, där Tag Manager väntar på samtycke, eller flexibelt, där Tag Manager laddas direkt och dess egna samtyckesinställningar avgör vilka taggar som körs. I båda fallen lägger du till google-consent-mode på <consent-dialog>, så att taggarna i Tag Manager vet vad besökaren har valt.

Strikt: Tag Manager i en guard

Inget från Tag Manager laddas, och inget skickas till Google, förrän besökaren har samtyckt. En tysk domstol (VG Hannover, 2025) har slagit fast att det krävs samtycke för att ladda Google Tag Manager, och strikt läge följer den tolkningen. Ställ in guardens samtycke efter vad containern kör: analytics eller marketing om den kör en typ av taggar, eller analytics|marketing om den kör taggar av båda typerna, så att den laddas så snart besökaren godkänner någon av dem. Därefter hanterar Tag Manager samtycket för varje 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>

Flexibelt: Tag Manager utan guard

Ladda Tag Manager som vanligt. Googles taggar följer Consent Mode-signalerna från dialogen. Andra taggar i containern, till exempel Meta eller LinkedIn, behöver samtyckesinställningar i Tag Manager. Consent Validator visar Tag Manager som inte skyddad av en guard. Det är avsiktligt: Validatorn rapporterar allt som inte ligger i en guard.

Flexibelt är också uppsättningen för webbplatser som medvetet använder Consent Mode Advanced. När samtycke nekas skickar Googles taggar fortfarande data utan cookies, till exempel sidadressen och enhetsuppgifter, så att Google kan modellera konverteringar. PrivacyKit stöder den här uppsättningen. Om den passar din webbplats är ett beslut för dig och din juridiska rådgivare.

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

<consent-validator>

Consent Validator ö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 Consent Validator-panelen vid sidinläsning. Endast för utvecklingsmiljöer.
delay	number	5000	Nätverksobservationsfönster (i millisekunder) innan Consent Validator 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 Consent Validator-FAB:en fästs vid.

Exempel

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

Consent Validator 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=validate i URL:en — det aktiverar validatorn enbart för den webbläsarsessionen utan att påverka besökarupplevelsen.

Växla programmatiskt:

TypeScriptAPI-referens

window.PrivacyKit?.toggleConsentValidator();

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.