Mettez PrivacyKit en route en quelques minutes grâce à des composants web légers qui fonctionnent aussi bien avec les frameworks que sur des sites statiques.
Ajoutez PrivacyKit à votre site via des scripts CDN ou en installant le package NPM. Choisissez la méthode adaptée à votre projet.
Ajoutez les scripts dans le <head> de votre site web. Fonctionne avec WordPress, Shopify, Wix et tout site web permettant d'ajouter du HTML.
<html>
<head>
<!-- Ajoutez les web components 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>
<!-- Ajoutez l’API JavaScript de PrivacyKit pour accéder au consentement de manière programmatique (optionnel) -->
<script type="module" src="https://cdn.privacykit.eu/v1/index.esm.js"></script>
</head>
<body>
<!-- Ajoutez consent-dialog -->
<consent-dialog></consent-dialog>
</body>
<html>Commencez avec un thème intégré et une variante de mise en page, puis ajustez finement des design tokens individuels ou personnalisez entièrement le dialogue pour qu'il corresponde à votre marque.
<consent-dialog theme="standard" variant="standard"></consent-dialog>Les thèmes intégrés reposent sur des design tokens. Ne remplacez que les tokens dont vous avez besoin pour créer une apparence personnalisée, tout en conservant le reste du thème sélectionné intact.
<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>Utilisez <consent-guard> pour contrôler quand les scripts tiers et le contenu intégré peuvent se charger en fonction du consentement des visiteurs. Vous pouvez envelopper chaque traceur dans son propre Consent Guard, ou regrouper plusieurs traceurs nécessitant le même consentement dans un seul Consent Guard.
<!-- Ajoutez un ou plusieurs consent-guard pour protéger les scripts tiers -->
<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>
Changez le type du script en text/plain et remplacez src par data-src pour les ressources gérées. PrivacyKit restaure les attributs d'origine et charge la ressource automatiquement une fois le consentement requis accordé.
Emplacement : Ajoutez les Consent Guards dans le <body> du document autant que possible. De nombreux CMS et créateurs de sites web ne permettent d'injecter des scripts personnalisés que dans le <head> — si c'est le cas de votre plateforme, placez le Consent Guard, avec le script qu'il contient, à la fin de la section <head>.
Enveloppez le contenu intégré, comme les éléments <iframe>, directement là où il apparaît dans la page. Utilisez éventuellement <consent-missing> pour afficher un contenu alternatif jusqu'à ce que le consentement requis soit accordé.
<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>Veuillez accepter les cookies d'analyse et de marketing pour voir ce contenu.</p>
</consent-missing>
Ajoutez PrivacyKit Compliance Monitor pour découvrir les traceurs, valider la protection du consentement et détecter toute activité non gérée sur votre site web — en donnant aux développeurs et aux équipes de conformité un accès à la validation en temps réel sans affecter l'expérience des visiteurs.
<body>
<!-- Ajoutez compliance-monitor pour valider en continu l’application du consentement -->
<compliance-monitor></compliance-monitor>
</body>Découvrez PrivacyKit en action avec des exemples HTML et React en direct.
Chaque démo inclut un Compliance Monitor pour inspecter l'exécution des trackers en temps réel, un panneau de test de consentement pour simuler les états de consentement et le comportement des nouveaux visiteurs, ainsi que des exemples interactifs de consent-guard — validant que les scripts et le contenu intégré sont correctement bloqués ou autorisés selon le consentement accordé par chaque utilisateur. Les deux comportent également un consent-dialog stylisé avec des design-tokens. La démo HTML s'intègre via des CDN script-tags compatibles avec toute configuration SSR.
PrivacyKit inclut par défaut une période d’essai de 10 jours, vous permettant d’intégrer et de tester la plateforme avant d’activer un abonnement.
Une fois la période d’essai expirée, PrivacyKit continue de fonctionner en mode limité plutôt que de désactiver les intégrations existantes.
Le statut d’activation est disponible via l’API JavaScript, journalisé dans la console du navigateur lors de l’initialisation, et peut également être vérifié via la vérification du statut d’activation.