PrivacyKit Web-komponentit

Julkinen web-komponenttidokumentaatio komponenteille consent-dialog, consent-guard, consent-missing ja compliance-monitor.

Sisällysluettelo

<consent-dialog>

PrivacyKitin suostumus-UI:n ja orkestrointilogiikan pääsisääntulokomponentti.

Ominaisuus	Tyyppi	Oletus / Pakollinen	Kuvaus
variant	standard \| panel \| modern \| modest	standard	Dialogin visuaalinen variantti.
theme	standard \| dark \| teal \| slate \| light \| vibrant \| high-contrast	standard	Dialogin visuaalinen teema.
expires-days	number	180	Evästeen elinikä päivinä.
version	number	0	Suostumusskeeman versio, jota käytetään uudelleensuostumuksen päätöksiin.
locale	da \| de \| en \| es \| fi \| fr \| it \| nl \| no \| pl \| sv	browser-derived	Kielen ohitus.
hide-summary-part-2	boolean	unset	Piilottaa valintaikkunan yhteenvedon osan 2 (dialog-summary-part-2).
hide-necessary	boolean	unset	Piilottaa Välttämätön-kategorian.
hide-preferences	boolean	unset	Piilottaa preferences-kategorian.
hide-analytics	boolean	unset	Piilottaa analytics-kategorian.
hide-marketing	boolean	unset	Piilottaa marketing-kategorian.
hide-readmore	boolean	unset	Piilottaa laajennettavan Lue lisää -osion.
hide-privacy-policy-link	boolean	unset	Piilottaa oletusarvoisen tietosuojakäytännön linkin kokonaan. Käytä `privacy-policy-url` sen sijaan pitääksesi linkin näkyvissä ja ohjataksesi käyttäjät omalle tietosuojakäytäntösivullesi.
privacy-policy-url	string	unset	URL, johon käyttäjät ohjataan klikatessaan tietosuojakäytäntölinkkiä. Kun asetettu, linkki avaa tämän URL:n sisäänrakennetun tietosuojadialogín sijaan.
demo	boolean	unset	Demotila: poistaa automaattisen avauksen käytöstä ja rajoittaa tiettyjä ominaisuuksia. Ei GDPR-yhteensopiva eikä sitä saa käyttää tuotannossa.
dismissible	boolean	false	Määrittää, voiko dialogin sulkea taustaa klikkaamalla/escape-näppäimellä, jos hyväksy/hylkää-suostumusta ei ole annettu.
show-fab	boolean	false	Ottaa käyttöön suostumusasetusten painikkeen. Ei näy, ennen kuin suostumuseväste on olemassa.
fab-position	left \| right	left	Kiinnittää painikkeen näkymän vasempaan alakulmaan tai oikeaan alakulmaan.

Esimerkki

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

Suostumusasetusten painike

Kun show-fab on asetettu arvoon true, <consent-dialog> näyttää kelluvan toimintopainikkeen (FAB), jonka avulla käyttäjät voivat avata suostumusvalintansa uudelleen alkuperäisen lähetyksen jälkeen. Käytä fab-position -asetusta kiinnittääksesi sen näkymän vasempaan alakulmaan tai oikeaan alakulmaan.

Näkyvyyssäännöt

Piilotettu, kunnes alkuperäinen suostumus on lähetetty.
Piilotettu, kun suostumusvalintaikkuna tai tietosuojakäytäntö-ikkuna on auki.
Piilotettu, jos show-fab ei ole asetettu tai se on asetettu arvoon false.

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

Mukauta sisältöä

Lisää mukautettua sisältöä komponentin tiettyihin kohtiin nimettyjen HTML-slottien avulla — saat täyden hallinnan sisällöstä ja tyyleistä muuttamatta itse komponenttia.

Slotin nimi	Kuvaus
dialog-logo	Valinnainen logosisältö, joka näytetään dialogin yläosassa.
dialog-logo-alt	Vaihtoehtoinen sijainti brändilogolle, joka näytetään dialog-summary-part-1-tekstin oikeassa yläkulmassa.
dialog-title	Korvaa otsikon dialogin yläosassa.
dialog-summary-part-1	Lisää oma teksti ensimmäiseen intro-kappaleeseen dialogin otsikon alle.
dialog-summary-part-2	Lisää oma teksti toiseen intro-kappaleeseen, joka selittää suostumusvalinnat.
necessary-content	Korvaa oletuskuvauksen Necessary-kategoriassa.
preferences-content	Oma teksti Preferences-kategorian accordion-sisällössä.
analytics-content	Oma teksti Analytics-kategorian accordion-sisällössä.
marketing-content	Oma teksti Marketing-kategorian accordion-sisällössä.
read-more-title	Asettaa laajennettavan “Lue lisää” -osion otsikon alareunassa.
read-more-content	Antaa rungon sisällön, joka näytetään, kun “Lue lisää” -osio avautuu.
privacy-policy-content	Korvaa oletusarvoisen tietosuojakäytännön tekstin. Käytä oman lakitiimisi hyväksymää sanamuotoa, koska PrivacyKit ei voi varmistaa GDPR-yhteensopivuutta, kun muokkaat sitä.

Esimerkki

HTML
<consent-dialog theme="standard" variant="standard" locale="fi" version="1">
  <img slot="dialog-logo" width="100px" src="/logo.png" alt="Yrityksen logo" />
  <div slot="dialog-title" class="your-class">
    <h2>Käytämme evästeitä</h2>
  </div>
  <span slot="marketing-content">
    <b>Emme tällä hetkellä kerää evästeitä markkinointitarkoituksiin.</b>
  </span>
</consent-dialog>

Design tokenit

Design tokenit tarjoavat vakaan joukon CSS-muuttujia, joilla voit muokata ulkoasua — värejä, välistyksiä, typografiaa ja muuta — koskematta komponentin sisäiseen toteutukseen. Sisäänrakennetut teemat perustuvat samaan token-järjestelmään, joten voit yliajaa yksittäisiä tyylejä tai luoda täysin mukautetun ulkoasun.

Design tokenit	Kuvaus
--pk-bg-color	Pintatausta koko dialogin rungolle.
--pk-paper-color	Paperipinta korteille, accordion-elementeille ja paneeleille dialogin sisällä.
--pk-text-color	Perustekstiväri otsikoille ja leipätekstille.
--pk-primary-color	Ensisijainen korostus CTAs-painikkeille, fokusrenkaille ja linkeille.
--pk-text-color-on-primary	Tekstiväri, jota käytetään ensisijaisella värillä täytetyissä elementeissä, kuten täysissä painikkeissa.
--pk-secondary-color	Toissijainen korostus, pääasiassa switch/thumb UI -tilaa varten.
--pk-focus-ring-color	Fokuskehyksen väri näppäimistöfokuksen tiloille.
--pk-border-color	Reunaväri paneelien ääriviivoille, taulukoille ja jakoviivoille.
--pk-border-width	Reunapaksuus paneelien ääriviivoille, taulukoille ja jakoviivoille.
--pk-font-family	Fonttipino kaikille tekstielementeille; käyttää oletuksena body-font tokeniasi.
--pk-spacing-unit	Välistysasteikon yksikkö, joka ohjaa paddings/gaps-arvoja osioiden välillä.
--pk-control-radius	Kulmasäde painikkeille, syötteille ja interaktiivisille kontrolleille.
--pk-dialog-radius	Kulmasäde ulommalle suostumusdialogin kontille.
--pk-dialog-shadow	Laatikkovarjo suostumusdialogin overlaylle.
--pk-dialog-max-height	Suostumusdialogin enimmäiskorkeus; kun sisältö ylittää tämän rajan, dialogin runko vierittyy.

Esimerkki

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

Metodit

TypeScriptAPI-viite

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

<consent-guard>

Renderöi lapset ehdollisesti, kun annettu suostumuslauseke arvioituu todeksi.

Ominaisuus	Tyyppi	Oletus / Pakollinen	Kuvaus
consent	string	unset	Suostumuslauseke, joka arvioidaan ennen kuin lapset renderöidään.

Suostumuslausekkeet

Lauseke	Vaadittu suostumus	Kuvaus
	Kaikki kategoriat	Jos consent-attribuutti puuttuu, kaikkien kategorioiden täytyy olla hyväksyttyjä, jotta guard aktivoituu.
necessary	Ei mitään	Estää virheelliset positiiviset Compliance Monitor -havainnot välttämättömille resursseille, joita PrivacyKit ei tunnista automaattisesti.
preferences	Asetukset
analytics	Analytiikka
marketing	Markkinointi
preferences+analytics	Asetukset JA Analytiikka
preferences\|analytics	Asetukset TAI Analytiikka
preferences+marketing	Asetukset JA Markkinointi
preferences\|marketing	Asetukset TAI Markkinointi
analytics+marketing	Analytiikka JA Markkinointi
analytics\|marketing	Analytiikka TAI Markkinointi

Esimerkki 1 – Estä/lataa skriptit

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

Esimerkki 2 – Estä/lataa HTML-sisältö

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>

Tärkeää: Huomaa, että esimerkkien hallitut resurssit käyttävät data-src -attribuuttia src-attribuutin sijaan ja type="text/plain" käytetään skripteille. PrivacyKit aktivoi hallitun sisällön vasta, kun suostumus on annettu — muuten resurssit voivat latautua heti ja näkyä Compliance Monitorissa kovakoodattuina.

<consent-missing>

Renderöi varasisältö aina, kun siihen liitetty consent-guard estää ensisijaisen kokemuksen.

Ominaisuus	Tyyppi	Oletus / Pakollinen	Kuvaus
for	string	pakollinen	Liittyvän <consent-guard>-elementin id.

Esimerkki

<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">
  Hyväksy analytiikkaevästeet jatkaaksesi.
</consent-missing>

<compliance-monitor>

Compliance Monitor seuraa lähteviä pyyntöjä ja validoi suostumusvartioinnin kattavuuden verkkosivustollasi, paljastaen hallitsemattomat seurantaohjelmat ja regressiot, joita verkkosivuston muutokset aiheuttavat. Oletuksena epäaktiivisena se pysyy näkymättömänä vierailijoille ja on turvallista sisällyttää tuotantoon.

Ominaisuus	Tyyppi	Oletus / Pakollinen	Kuvaus
debug	boolean	false	Ottaa Compliance Monitor -paneelin käyttöön sivun latauksen yhteydessä. Vain kehitysympäristöihin.
delay	number	5000	Verkon havaintoikkuna (millisekunteina) ennen kuin Compliance Monitor alkaa validoida päätepisteen käyttöä ja suostumusvartioinnin kattavuutta.
ignore-first-party-subdomains	boolean	true	Kun arvo on true, nykyisen verkkotunnuksen aliverkkotunnuksiin kohdistuvat pyynnöt ohitetaan hiljaisesti.
fab-position	left \| right	right	Määrittää, kummalle viewportin sivulle Compliance Monitorin FAB-painike kiinnitetään.

Esimerkki

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

Compliance Monitor pysyy piilossa vierailijoilta, vaikka se sisältyy tuotantopakettiin. Suositeltu tapa aktivoida se live-verkkosivustolla on lisätä ?privacykit=monitor URL-osoitteeseen — tämä aktivoi monitorin vain kyseiselle selainistunnolle vaikuttamatta vierailijakokemukseen.

Vaihda ohjelmallisesti:

TypeScriptAPI-viite

window.PrivacyKit?.toggleComplianceMonitor();