Pon PrivacyKit en marcha en minutos con web components ligeros que funcionan tanto en frameworks como en sitios web estáticos.
Coloca el script en el <head> y añade el cuadro de consentimiento a tu página para empezar. PrivacyKit se distribuye como recursos estáticos a través de una CDN: sin instalación npm ni conflictos de dependencias.
<html>
<head>
<!-- Añade los web components de 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>
<!-- Añade la API JavaScript de PrivacyKit para acceder al consentimiento de forma programática (opcional) -->
<script type="module" src="https://cdn.privacykit.eu/v1/index.esm.js"></script>
</head>
<body>
<!-- Añade consent-dialog -->
<consent-dialog theme="standard" variant="standard"></consent-dialog>
</body>
<html>PrivacyKit incluye por defecto una prueba de 10 días, para que puedas integrar y probar antes de activar una suscripción. El estado de activación está disponible a través de la API de JavaScript, se registra en la consola del navegador y también se puede comprobar mediante la consulta del estado de activación.
Empieza con un tema integrado y ajusta tokens de diseño individuales, o personaliza por completo el estilo del diálogo para que coincida con tu marca.
<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 impiden que los scripts de terceros y el contenido incrustado se ejecuten hasta que se otorgue el consentimiento. Usa <consent-missing> para informar a los usuarios sobre contenido no disponible cuando sea necesario.
<body>
<!-- Añade consent-guard para proteger contra scripts de terceros -->
<consent-guard consent="analytics">
<script type="text/plain" data-src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"></script>
</consent-guard>
<!-- Añade consent-guard para proteger contra contenido incrustado -->
<consent-guard id="123" consent="analytics+marketing">
<iframe data-src="https://www.youtube.com/embed/abc123"></iframe>
<consent-guard>
<consent-missing for="123">
<p>Acepta las cookies de análisis y marketing para ver este contenido.</p>
</consent-missing>
</body>
Importante: Ten en cuenta que los recursos gestionados del ejemplo usan data-src en lugar de src, y type="text/plain" se utiliza para scripts. PrivacyKit activa el contenido gestionado después de que se otorgue el consentimiento — de lo contrario, los recursos pueden cargarse inmediatamente y aparecer como hardcodeados en Compliance Monitor.
Añade PrivacyKit Compliance Monitor para descubrir rastreadores, validar la protección del consentimiento y detectar actividad no gestionada en todo tu sitio web.
<body>
<!-- Añade compliance-monitor para validar continuamente compliance del consentimiento -->
<compliance-monitor></compliance-monitor>
</body>Usa window.PrivacyKit para leer el consentimiento, comprobar expresiones de consentimiento, abrir diálogos y escuchar cambios de consentimiento. Esto es útil cuando tu aplicación necesita control programático, por ejemplo en 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();
}
Mejora la experiencia de desarrollo con autocompletado, seguridad de tipos y soporte nativo para los web components de PrivacyKit.
En las herramientas modernas (Next.js / Vite / TypeScript 5+), los archivos .d.ts fuera de src deben incluirse explícitamente para que el compilador los detecte.
{
"include": ["src", "types/**/*.d.ts"]
}
Instrucciones específicas para integrar los custom elements de PrivacyKit.
<consent-dialog> funciona en Server Components — colócalo directamente en tu layout.'use client'.Evita parpadeos antes de que los web components terminen de cargar. Sin este fragmento, el HTML en slots o guardado puede mostrarse brevemente cuando:
consent-dialog puede parpadear brevemente si usas elementos con slot y se renderizan antes de que cargue la definición del componente.consent-guard puede parpadear brevemente si se usa para HTML condicional y el contenido se renderiza antes de que el componente se active.consent-missing puede parpadear brevemente si se usa como fallback y se renderiza antes de que el componente se active.Añade estilos en tu propio light DOM para evitar parpadeos.
consent-dialog:not(:defined) [slot] {
display: none;
}
consent-guard:not([active]) {
display: none;
}
consent-missing:not([active]) {
display: none;
}