Ota PrivacyKit käyttöön minuuteissa kevyillä web-komponenteilla, jotka toimivat sekä eri frameworkeissa että staattisilla sivustoilla.
Lisää PrivacyKit sivustollesi CDN-skripteillä tai asentamalla NPM-paketti. Valitse menetelmä, joka sopii projektiisi.
Lisää skriptit verkkosivustosi <head>-osioon. Toimii WordPressin, Shopifyn, Wixin ja minkä tahansa verkkosivuston kanssa, jolle voit lisätä HTML:ää.
<html>
<head>
<!-- Lisää PrivacyKitin web-komponentit: consent-dialog, consent-guard, consent-missing, compliance-monitor -->
<script type="module" src="https://cdn.privacykit.eu/v1/privacykit.esm.js"></script>
<script nomodule src="https://cdn.privacykit.eu/v1/privacykit.js"></script>
<!-- Lisää PrivacyKitin JavaScript API ohjelmallista suostumuksen käyttöä varten (valinnainen) -->
<script type="module" src="https://cdn.privacykit.eu/v1/index.esm.js"></script>
</head>
<body>
<!-- Lisää consent-dialog -->
<consent-dialog></consent-dialog>
</body>
<html>Aloita sisäänrakennetusta teemasta ja asetteluvariantista, hienosäädä sitten yksittäisiä design tokeneita, tai mukauta dialogi täysin brändiisi sopivaksi.
<consent-dialog theme="standard" variant="standard"></consent-dialog>Sisäänrakennetut teemat perustuvat design tokeneihin. Korvaa vain ne tokenit, joita tarvitset mukautetun ulkoasun luomiseen, samalla kun valitun teeman loput pysyvät ennallaan.
<consent-dialog variant="standard" theme="standard" style="
--pk-transparency: 0%;
--pk-bg-color: #faf7f2;
--pk-paper-color: #f7eede;
--pk-text-color: #3a3530;
--pk-text-color-on-primary: #212121;
--pk-primary-color: #b08968;
--pk-secondary-color: #d6c2b2;
--pk-focus-ring-color: #866346;
--pk-font-family: 'Segoe UI', Tahoma, sans-serif;
--pk-spacing-unit: 0.6rem;
--pk-control-border-color: #d6dbe4;
--pk-control-border-width: 3px;
--pk-control-border-radius: 10px;
--pk-dialog-border-color: #d6dbe4;
--pk-dialog-border-width: 3px;
--pk-dialog-border-radius: 20px;
--pk-dialog-max-height: min(70dvh, 500px);
--pk-dialog-shadow: 0 10px 20px rgba(0, 0, 0, 50%);
">
</consent-dialog>Käytä <consent-guard>-elementtiä hallitaksesi, milloin kolmannen osapuolen skriptit ja upotettu sisältö voivat latautua kävijän suostumuksen perusteella. Voit sijoittaa jokaisen seurantaskriptin omaan Consent Guardiinsa, tai ryhmitellä useita samaa suostumusta vaativia seurantaskriptejä yhteen Consent Guardiin.
<!-- Lisää consent-guard(‑elementtejä) suojaamaan 3. osapuolen skriptejä -->
<consent-guard consent="analytics">
<script type="text/plain" data-src="https://example.com/analytics.js?id=XXXXXX"></script>
</consent-guard>
<consent-guard consent="marketing">
<script type="text/plain" data-src="https://example.com/marketing.js?id=XXXXXX"></script>
</consent-guard>
Vaihda script-tyyppi arvoon text/plain ja korvaa src attribuutilla data-src hallituille resursseille. PrivacyKit palauttaa alkuperäiset attribuutit ja lataa resurssin automaattisesti heti, kun vaadittu suostumus on annettu.
Sijoittelu: Lisää Consent Guards dokumentin <body>-osioon aina kun mahdollista. Monet CMS-järjestelmät ja sivustonrakennustyökalut sallivat mukautettujen skriptien lisäämisen vain <head>-osioon — jos tämä koskee alustaasi, sijoita Consent Guard sisältämänsä skriptin kanssa sen sijaan <head>-osion loppuun.
Kääri upotettu sisältö, kuten <iframe>-elementit, suoraan sinne, missä se näkyy sivulla. Käytä valinnaisesti <consent-missing>-elementtiä näyttääksesi vaihtoehtoisen sisällön, kunnes vaadittu suostumus on annettu.
<consent-guard id="yt-embed" consent="analytics+marketing">
<iframe data-src="https://www.youtube.com/embed/abc123"></iframe>
</consent-guard>
<consent-missing for="yt-embed">
<p>Hyväksy analytiikka- ja markkinointievästeet nähdäksesi tämän sisällön.</p>
</consent-missing>
Lisää PrivacyKit Compliance Monitor löytääksesi seurantaskriptejä, validoidaksesi suostumuksen suojauksen ja havaitaksesi hallitsemattoman toiminnan verkkosivustollasi — antaen kehittäjille ja compliance-tiimeille pääsyn runtime-validointiin ilman vaikutusta kävijäkokemukseen.
<body>
<!-- Lisää compliance-monitor, jotta suostumuksen toimeenpanoa voidaan validoida jatkuvasti -->
<compliance-monitor></compliance-monitor>
</body>Katso PrivacyKit toiminnassa elävien HTML- ja React-esimerkkien avulla.
Jokaisessa demossa on Compliance Monitor seurantatyökalujen suorituksen reaaliaikaiseen tarkastukseen, Consent Test Panel suostumustilojen ja ensikertalaisvieraiden käyttäytymisen simulointiin sekä interaktiivisia consent-guard-esimerkkejä — jotka varmistavat, että skriptit ja upotettu sisältö estetään tai sallitaan oikein jokaisen käyttäjän myöntämän suostumuksen perusteella. Molemmissa on myös design-tokens-tyylitelty consent-dialog. HTML-demo integroituu CDN script-tags -tunnisteiden kautta, jotka ovat yhteensopivia kaikkien SSR-asetusten kanssa.
PrivacyKit sisältää oletuksena 10 päivän kokeilujakson, jonka avulla voit integroida ja testata alustaa ennen tilauksen aktivointia.
Kokeilujakson päätyttyä PrivacyKit jatkaa toimintaansa rajoitetussa tilassa sen sijaan, että olemassa olevat integraatiot poistetaan käytöstä.
Aktivoinnin tila on saatavilla JavaScript-API:n kautta, kirjataan selaimen konsoliin alustuksen aikana ja sen voi myös tarkistaa aktivointitilanteen tarkistustyökalulla.