Ota PrivacyKit käyttöön minuuteissa kevyillä web-komponenteilla, jotka toimivat sekä eri frameworkeissa että staattisilla sivustoilla.
Lisää skripti <head>-osioon ja suostumusikkuna sivullesi aloittaaksesi. PrivacyKit toimitetaan staattisina resursseina CDN:n kautta — ei npm-asennusta eikä riippuvuuskonflikteja.
<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 theme="standard" variant="standard"></consent-dialog>
</body>
<html>PrivacyKit sisältää oletuksena 10 päivän kokeilujakson, joten voit integroida ja testata ennen tilauksen aktivointia. Aktivoinnin tila on saatavilla JavaScript-API:n kautta, se kirjautuu selaimen konsoliin ja sen voi tarkistaa myös aktivoinnin tilan tarkistuksella.
Aloita sisäänrakennetusta teemasta ja hienosäädä yksittäisiä design tokeneita, tai mukauta dialogin tyyli täysin brändiisi sopivaksi.
<consent-dialog variant="standard" theme="standard" style="
--pk-bg-color: #faf7f2;
--pk-paper-color: #f7eede;
--pk-text-color: #3a3530;
--pk-primary-color: #b08968;
--pk-secondary-color: #d6c2b2;
--pk-text-color-on-primary: #212121;
--pk-focus-ring-color: #866346;
--pk-border-color: #d6dbe4;
--pk-border-width: 3px;
--pk-font-family: 'Segoe UI', Tahoma, sans-serif;
--pk-spacing-unit: 0.6rem;
--pk-control-radius: 10px;
--pk-dialog-radius: 20px;
--pk-dialog-shadow: 0 10px 20px rgba(0, 0, 0, 50%);
--pk-dialog-max-height: min(70dvh, 500px);
">
</consent-dialog>
Consent Guards estävät kolmannen osapuolen skriptien ja upotetun sisällön suorittamisen, kunnes suostumus on annettu. Käytä <consent-missing> -elementtiä kertoaksesi käyttäjille tarvittaessa, että sisältö ei ole saatavilla.
<body>
<!-- Lisää consent-guard(‑elementtejä) suojaamaan 3. osapuolen skripteiltä -->
<consent-guard consent="analytics">
<script type="text/plain" data-src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"></script>
</consent-guard>
<!-- Lisää consent-guard(‑elementtejä) suojaamaan upotetulta sisällöltä -->
<consent-guard id="123" consent="analytics+marketing">
<iframe data-src="https://www.youtube.com/embed/abc123"></iframe>
<consent-guard>
<consent-missing for="123">
<p>Hyväksy analytiikka- ja markkinointievästeet nähdäksesi tämän sisällön.</p>
</consent-missing>
</body>
Tärkeää: Huomaa, että esimerkin 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.
Lisää PrivacyKit Compliance Monitor, jotta voit löytää trackereita, validoida suostumussuojauksen ja havaita hallitsematonta toimintaa koko verkkosivustollasi.
<body>
<!-- Lisää compliance-monitor, jotta suostumuksen toimeenpanoa voidaan validoida jatkuvasti -->
<compliance-monitor></compliance-monitor>
</body>Käytä window.PrivacyKit suostumuksen lukemiseen, suostumuslausekkeiden tarkistamiseen, dialogien avaamiseen ja suostumusmuutosten kuunteluun. Tämä on hyödyllistä, kun sovelluksesi tarvitsee ohjelmallista hallintaa, esimerkiksi Reactissa, Vuessa tai tavallisessa JavaScriptissä.
const api = window.PrivacyKit;
api.onReady(() => {
const consent = window.PrivacyKit.readConsent();
const initialState = consent ? JSON.stringify(consent, null, 2) : "";
console.log(initialState);
});
api.onConsentChanged((consent) => {
const updatedState = consent ? JSON.stringify(consent, null, 2) : "";
console.log(updatedState);
});
function handleOpenConsentDialogBtnClick() {
api.openConsentDialog();
}
function handleOpenPrivacyPolicyDialogBtnClick() {
api.openPrivacyPolicyDialog();
}
function handleToggleComplianceMonitorBtnClick() {
api.toggleComplianceMonitor();
}
Paranna kehittäjäkokemusta automaattitäydennyksellä, tyyppiturvalla ja PrivacyKitin web-komponenttien natiivilla tuella.
Modernissa työkalupinossa (Next.js / Vite / TypeScript 5+), .d.ts-tiedostot src-hakemiston ulkopuolella pitää erikseen lisätä include-listaan, jotta kääntäjä huomaa ne.
{
"include": ["src", "types/**/*.d.ts"]
}
Kehyskohtaiset asennushuomiot PrivacyKitin custom element -integraatioon.
<consent-dialog> toimii Server Components -komponenteissa — lisää se suoraan layoutiin.'use client' -komponentissa.Vältä välkkymistä ennen kuin web-komponentit ovat ladanneet. Ilman tätä pätkää sloteilla tai guardilla suojattu HTML voi näkyä hetken, kun:
consent-dialog voi välähtää, jos sloteilla lisättyjä elementtejä käytetään ja ne renderöityvät ennen kuin komponentin määrittely latautuu.consent-guard voi välähtää, jos sitä käytetään ehdolliseen HTML:ään ja se renderöityy ennen kuin komponentti aktivoituu.consent-missing voi välähtää, jos consent-missing renderöityy ennen kuin komponentti aktivoituu.Lisää tyylit light DOMiin välttääksesi välkkymisen.
consent-dialog:not(:defined) [slot] {
display: none;
}
consent-guard:not([active]) {
display: none;
}
consent-missing:not([active]) {
display: none;
}