Pon PrivacyKit en marcha en minutos con web components ligeros que funcionan tanto en frameworks como en sitios web estáticos.
Añade PrivacyKit a tu sitio usando scripts CDN o instalando el paquete NPM. Elige el método que mejor se adapte a tu proyecto.
Añade los scripts al <head> de tu sitio web. Funciona con WordPress, Shopify, Wix y cualquier sitio web donde puedas añadir HTML.
<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></consent-dialog>
</body>
<html>Empieza con un tema integrado y una variante de diseño, luego ajusta tokens de diseño individuales o personaliza por completo el diálogo para que coincida con tu marca.
<consent-dialog theme="standard" variant="standard"></consent-dialog>Los temas integrados se basan en tokens de diseño. Sobrescribe solo los tokens que necesites para crear una apariencia personalizada, manteniendo intacto el resto del tema seleccionado.
<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>Utiliza <consent-guard> para controlar cuándo pueden cargarse los scripts de terceros y el contenido incrustado según el consentimiento del visitante. Puedes envolver cada rastreador en su propio Consent Guard, o agrupar varios rastreadores que requieran el mismo consentimiento en un único Consent Guard.
<!-- Añade consent-guard para proteger scripts de terceros -->
<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 el tipo del script a text/plain y sustituye src por data-src en los recursos gestionados. PrivacyKit restaura los atributos originales y carga el recurso automáticamente en cuanto se otorga el consentimiento necesario.
Ubicación: Añade los Consent Guards al <body> del documento siempre que sea posible. Muchos CMS y creadores de sitios web solo permiten inyectar scripts personalizados en el <head> — si ese es el caso de tu plataforma, coloca el Consent Guard junto con el script que contiene al final de la sección <head>.
Envuelve el contenido incrustado, como los elementos <iframe>, justo donde aparece en la página. Opcionalmente, utiliza <consent-missing> para mostrar contenido alternativo hasta que se otorgue el consentimiento necesario.
<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>Acepta las cookies de análisis y marketing para ver este contenido.</p>
</consent-missing>
Añade PrivacyKit Compliance Monitor para descubrir rastreadores, validar la protección del consentimiento y detectar actividad no gestionada en tu sitio web — dando a desarrolladores y equipos de cumplimiento acceso a la validación en tiempo de ejecución sin afectar la experiencia del visitante.
<body>
<!-- Añade compliance-monitor para validar continuamente compliance del consentimiento -->
<compliance-monitor></compliance-monitor>
</body>Vea PrivacyKit en acción con ejemplos en vivo de HTML y React.
Cada demo incluye un Compliance Monitor para inspeccionar la ejecución de rastreadores en tiempo real, un panel de prueba de consentimiento para simular estados de consentimiento y el comportamiento de primeros visitantes, y ejemplos interactivos de consent-guard — que validan que los scripts y el contenido integrado se bloquean o permiten correctamente según el consentimiento que cada usuario otorga. Ambos también incluyen un consent-dialog estilizado con design-tokens. El demo HTML se integra a través de CDN script-tags compatibles con cualquier configuración SSR.
PrivacyKit incluye por defecto un período de prueba de 10 días, lo que te permite integrar y probar la plataforma antes de activar una suscripción.
Una vez expirado el período de prueba, PrivacyKit continúa funcionando en modo limitado en lugar de desactivar las integraciones existentes.
El estado de activación está disponible a través de la API de JavaScript, se registra en la consola del navegador durante la inicialización y también se puede comprobar mediante la consulta de estado de activación.