Avvia PrivacyKit in pochi minuti con web component leggeri che funzionano sia con i framework che con i siti web statici.
Aggiungi PrivacyKit al tuo sito tramite script CDN o installando il pacchetto NPM. Scegli il metodo più adatto alla tua configurazione.
Aggiungi gli script al <head> del tuo sito web. Funziona con WordPress, Shopify, Wix e qualsiasi sito web che supporta HTML personalizzato.
<html>
<head>
<!-- Aggiungi i web component PrivacyKit: 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>
<!-- Aggiungi l’API JavaScript di PrivacyKit per l’accesso programmatico al consenso (opzionale) -->
<script type="module" src="https://cdn.privacykit.eu/v1/index.esm.js"></script>
</head>
<body>
<!-- Aggiungi consent-dialog -->
<consent-dialog></consent-dialog>
</body>
<html>Inizia con un tema integrato e una variante di layout, poi ottimizza i singoli design token oppure personalizza completamente il dialogo per adattarlo al tuo brand.
<consent-dialog theme="standard" variant="standard"></consent-dialog>I temi integrati si basano sui design token. Sovrascrivi solo i token di cui hai bisogno per creare un aspetto personalizzato, mantenendo intatto il resto del tema selezionato.
<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>Usa <consent-guard> per controllare quando gli script di terze parti e i contenuti incorporati possono caricarsi in base al consenso del visitatore. Puoi racchiudere ogni tracker nel proprio Consent Guard, oppure raggruppare più tracker che richiedono lo stesso consenso in un unico Consent Guard.
<!-- Aggiungi i consent-guard per proteggere gli script di terze parti -->
<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>
Cambia il tipo dello script in text/plain e sostituisci src con data-src per le risorse gestite. PrivacyKit ripristina gli attributi originali e carica la risorsa automaticamente non appena viene concesso il consenso richiesto.
Posizionamento: Aggiungi i Consent Guards nel <body> del documento quando possibile. Molti CMS e website builder permettono di inserire script personalizzati solo nell'<head> — se è il caso della tua piattaforma, posiziona il Consent Guard, con lo script che contiene, alla fine della sezione <head>.
Racchiudi i contenuti incorporati, come gli elementi <iframe>, direttamente dove appaiono nella pagina. Facoltativamente, usa <consent-missing> per mostrare contenuti alternativi finché non viene concesso il consenso richiesto.
<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>Accetta i cookie di analisi e marketing per vedere questo contenuto.</p>
</consent-missing>
Aggiungi PrivacyKit Compliance Monitor per scoprire i tracker, validare la protezione del consenso e rilevare attività non gestite sul tuo sito web — dando a sviluppatori e team di compliance accesso alla validazione runtime senza influire sull'esperienza dei visitatori.
<body>
<!-- Aggiungi compliance-monitor per validare continuamente l’applicazione del consenso -->
<compliance-monitor></compliance-monitor>
</body>Guarda PrivacyKit in azione con esempi live HTML e React.
Ogni demo include un Compliance Monitor per ispezionare l'esecuzione dei tracker in tempo reale, un pannello di test del consenso per simulare stati di consenso e il comportamento dei nuovi visitatori, ed esempi interattivi di consent-guard — che validano che script e contenuti incorporati vengano correttamente bloccati o consentiti in base al consenso fornito da ciascun utente. Entrambi includono anche un consent-dialog stilizzato con design-tokens. La demo HTML si integra tramite CDN script-tags compatibili con qualsiasi configurazione SSR.
PrivacyKit include di default un periodo di prova di 10 giorni, che consente di integrare e testare la piattaforma prima di attivare un abbonamento.
Dopo la scadenza del periodo di prova, PrivacyKit continua a funzionare in modalità limitata invece di disabilitare le integrazioni esistenti.
Lo stato di attivazione è disponibile tramite l’API JavaScript, registrato nella console del browser durante l’inizializzazione, e può essere verificato anche tramite la verifica dello stato di attivazione.