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.
Placez le script dans votre <head> et ajoutez le dialogue de consentement à la page pour démarrer. PrivacyKit est distribué sous forme de ressources statiques via un CDN — sans installation npm ni conflits de dépendances.
<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 theme="standard" variant="standard"></consent-dialog>
</body>
<html>PrivacyKit inclut par défaut un essai de 10 jours, afin que vous puissiez intégrer et tester avant d’activer un abonnement. Le statut d’activation est accessible via l’API JavaScript, journalisé dans la console du navigateur, et peut aussi être vérifié via la vérification du statut d’activation.
Commencez avec un thème intégré et ajustez finement des design tokens individuels, ou personnalisez entièrement le style du dialogue pour qu’il corresponde à votre marque.
<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 empêchent les scripts tiers et le contenu intégré de s’exécuter tant que le consentement n’a pas été accordé. Utilisez <consent-missing> pour informer les utilisateurs du contenu indisponible si nécessaire.
<body>
<!-- Ajoutez un ou plusieurs consent-guard pour protéger contre les scripts tiers -->
<consent-guard consent="analytics">
<script type="text/plain" data-src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX"></script>
</consent-guard>
<!-- Ajoutez un ou plusieurs consent-guard pour protéger contre le contenu intégré -->
<consent-guard id="123" consent="analytics+marketing">
<iframe data-src="https://www.youtube.com/embed/abc123"></iframe>
<consent-guard>
<consent-missing for="123">
<p>Veuillez accepter les cookies d'analyse et de marketing pour voir ce contenu.</p>
</consent-missing>
</body>
Important : Notez que les ressources gérées dans l’exemple utilisent data-src à la place de src, et type="text/plain" est utilisé pour les scripts. PrivacyKit active le contenu géré après que le consentement a été accordé — sinon, des ressources peuvent se charger immédiatement et apparaître comme codées en dur dans Compliance Monitor.
Ajoutez PrivacyKit Compliance Monitor pour découvrir des trackers, valider la protection du consentement et détecter l’activité non gérée sur l’ensemble de votre site web.
<body>
<!-- Ajoutez compliance-monitor pour valider en continu l’application du consentement -->
<compliance-monitor></compliance-monitor>
</body>Utilisez window.PrivacyKit pour lire le consentement, vérifier des expressions de consentement, ouvrir des boîtes de dialogue et écouter les changements de consentement. C’est utile lorsque votre application a besoin d’un contrôle programmatique, par exemple avec React, Vue ou du JavaScript simple.
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();
}
Améliorez l’expérience développeur avec l’autocomplétion, la sécurité de types et la prise en charge native des web components PrivacyKit.
Avec les outils modernes (Next.js / Vite / TypeScript 5+), les fichiers .d.ts situés en dehors de src doivent être inclus explicitement pour être pris en compte par le compilateur.
{
"include": ["src", "types/**/*.d.ts"]
}
Recommandations spécifiques pour intégrer les custom elements PrivacyKit.
<consent-dialog> fonctionne dans les Server Components — placez-le directement dans votre layout.'use client'.Évitez les clignotements avant le chargement complet des web components. Sans cet extrait, le HTML slotté ou protégé peut apparaître brièvement lorsque :
consent-dialog peut clignoter brièvement si vous utilisez des éléments slottés et qu'ils sont rendus avant le chargement de la définition du composant.consent-guard peut clignoter brièvement s'il est utilisé pour du HTML conditionnel et que le contenu est rendu avant que le composant ne s'active.consent-missing peut clignoter brièvement s'il est utilisé comme contenu de repli et qu'il est rendu avant que le composant ne s'active.Ajoutez des styles dans votre light DOM pour éviter ces clignotements.
consent-dialog:not(:defined) [slot] {
display: none;
}
consent-guard:not([active]) {
display: none;
}
consent-missing:not([active]) {
display: none;
}