Avvia PrivacyKit in pochi minuti con web component leggeri che funzionano sia con i framework che con i siti web statici.
Inserisci lo script nell'<head> e aggiungi il dialogo di consenso alla pagina per iniziare. PrivacyKit è distribuito come asset statici tramite un CDN — nessuna installazione npm e nessun conflitto di dipendenze.
<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 theme="standard" variant="standard"></consent-dialog>
</body>
<html>PrivacyKit include di default una prova di 10 giorni, così puoi integrare e testare prima di attivare un abbonamento. Lo stato di attivazione è disponibile tramite l’API JavaScript, viene registrato nella console del browser e può anche essere verificato tramite la verifica dello stato di attivazione.
Inizia con un tema integrato e ottimizza i singoli design token, oppure personalizza completamente lo stile del dialogo per adattarlo al tuo brand.
<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 impediscono l’esecuzione degli script di terze parti e dei contenuti incorporati finché non viene concesso il consenso. Usa <consent-missing> per informare gli utenti dei contenuti non disponibili quando necessario.
<body>
<!-- Aggiungi i consent-guard per proteggere dagli script di terze parti -->
<consent-guard consent="analytics">
<script type="text/plain" data-src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"></script>
</consent-guard>
<!-- Aggiungi i consent-guard per proteggere dai contenuti incorporati -->
<consent-guard id="123" consent="analytics+marketing">
<iframe data-src="https://www.youtube.com/embed/abc123"></iframe>
<consent-guard>
<consent-missing for="123">
<p>Accetta i cookie di analisi e marketing per vedere questo contenuto.</p>
</consent-missing>
</body>
Importante: Nota che le risorse gestite nell’esempio usano data-src invece di src, e type="text/plain" viene utilizzato per gli script. PrivacyKit attiva i contenuti gestiti dopo che il consenso è stato concesso — altrimenti le risorse possono caricarsi subito e risultare come hardcoded nel Compliance Monitor.
Aggiungi PrivacyKit Compliance Monitor per scoprire i tracker, convalidare la protezione del consenso e rilevare attività non gestita su tutto il tuo sito web.
<body>
<!-- Aggiungi compliance-monitor per validare continuamente l’applicazione del consenso -->
<compliance-monitor></compliance-monitor>
</body>Usa window.PrivacyKit per leggere il consenso, verificare le espressioni di consenso, aprire le finestre di dialogo e ascoltare i cambiamenti del consenso. È utile quando la tua applicazione necessita di controllo programmatico, ad esempio in React, Vue o JavaScript puro.
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();
}
Migliora l’esperienza di sviluppo con autocompletamento, sicurezza dei tipi e supporto nativo per i web component di PrivacyKit.
Negli strumenti moderni (Next.js / Vite / TypeScript 5+), i file .d.ts fuori da src devono essere inclusi esplicitamente affinché il compilatore li rilevi.
{
"include": ["src", "types/**/*.d.ts"]
}
Indicazioni specifiche per integrare i custom element di PrivacyKit.
<consent-dialog> funziona nei Server Components — inseriscilo direttamente nel tuo layout.'use client'.Evita sfarfallii prima che i web component abbiano finito di caricarsi. Senza questo snippet gli HTML slottati o protetti possono apparire per un attimo quando:
consent-dialog può lampeggiare brevemente se usi elementi slottati e si renderizzano prima che la definizione del componente sia caricata.consent-guard può lampeggiare brevemente se viene usato per HTML condizionale e il contenuto si renderizza prima che il componente si attivi.consent-missing può lampeggiare brevemente se viene usato come fallback e si renderizza prima che il componente si attivi.Aggiungi stili nel tuo light DOM per evitare gli sfarfallii.
consent-dialog:not(:defined) [slot] {
display: none;
}
consent-guard:not([active]) {
display: none;
}
consent-missing:not([active]) {
display: none;
}