Composants web de PrivacyKit

Documentation publique des web components consent-dialog, consent-guard, consent-missing et compliance-monitor.

Sommaire

<consent-dialog>

Composant principal de l'interface de consentement PrivacyKit et de la logique d'orchestration.

Propriété	Type	Valeur par défaut / Obligatoire	Description
variant	standard \| panel \| modern \| modest	standard	Variante visuelle du dialogue.
theme	standard \| dark \| teal \| slate \| light \| vibrant \| high-contrast	standard	Thème visuel du dialogue.
expires-days	number	180	Durée de vie du cookie en jours.
version	number	0	Version du schéma de consentement utilisée pour les relances.
locale	da \| de \| en \| es \| fi \| fr \| it \| nl \| no \| pl \| sv	dérivé du navigateur	Force une locale spécifique.
hide-summary-part-2	boolean	unset	Masque la section de résumé partie 2 (dialog-summary-part-2) de la boîte de dialogue.
hide-necessary	boolean	unset	Masque la catégorie Nécessaire.
hide-preferences	boolean	unset	Masque la catégorie Préférences.
hide-analytics	boolean	unset	Masque la catégorie Analytique.
hide-marketing	boolean	unset	Masque la catégorie Marketing.
hide-readmore	boolean	unset	Masque la section extensible « En savoir plus ».
hide-privacy-policy-link	boolean	unset	Masque entièrement le lien par défaut vers la politique de confidentialité. Utilisez `privacy-policy-url` pour conserver le lien visible et rediriger les utilisateurs vers votre propre page de politique.
privacy-policy-url	string	unset	URL vers laquelle les utilisateurs sont redirigés en cliquant sur le lien de politique de confidentialité. Lorsqu'il est défini, le lien ouvre cette URL au lieu du dialogue de politique de confidentialité intégré.
demo	boolean	unset	Mode démo : désactive l'ouverture automatique et limite certaines fonctions. Non conforme RGPD, à ne pas utiliser en production.
dismissible	boolean	false	Contrôle si le dialogue peut être fermé par le fond/Échap tant qu'aucune décision n'est prise.
show-fab	boolean	false	Active le bouton des préférences de consentement. N'a aucun effet visible tant qu'un cookie de consentement n'existe pas.
fab-position	left \| right	left	Fixe le bouton en bas à gauche ou en bas à droite de la fenêtre d’affichage.

Exemple

HTML
<consent-dialog theme="panel" variant="dark" expires-days="90" 
  version="1" locale="fr" hide-marketing hide-privacy-policy-link dismissible>
</consent-dialog>

Bouton des préférences de consentement

Lorsque show-fab est défini sur true, <consent-dialog> affiche un bouton d’action flottant (FAB) qui permet aux utilisateurs de rouvrir leurs choix de consentement après la soumission initiale. Utilisez fab-position pour le fixer en bas à gauche ou en bas à droite de la fenêtre d’affichage.

Règles de visibilité

Masqué jusqu’à ce que le consentement initial ait été soumis.
Masqué tant que la boîte de dialogue de consentement ou la boîte de dialogue de politique de confidentialité est ouverte.
Masqué si show-fab n’est pas défini ou est défini sur false.

HTML
<consent-dialog show-fab fab-position="left">
</consent-dialog>

Personnaliser le contenu

Injectez du contenu personnalisé dans des parties précises d’un composant grâce à des slots HTML nommés — pour garder un contrôle total sur le contenu et le style sans modifier le composant lui‑même.

Nom du slot	Description
dialog-logo	Contenu de logo facultatif affiché dans l’en-tête de la boîte de dialogue.
dialog-logo-alt	Emplacement alternatif pour un logo de marque, affiché en haut à droite du texte de dialog-summary-part-1.
dialog-title	Remplace le titre dans l’en-tête de la boîte de dialogue.
dialog-summary-part-1	Ajoute du texte personnalisé dans le premier paragraphe d’introduction sous le titre de la boîte de dialogue.
dialog-summary-part-2	Ajoute du texte personnalisé dans le second paragraphe introductif qui explique les choix de consentement.
necessary-content	Remplace la description de la catégorie Nécessaire.
preferences-content	Texte personnalisé dans l'accordéon Préférences.
analytics-content	Texte personnalisé dans l'accordéon Analytique.
marketing-content	Texte personnalisé dans l'accordéon Marketing.
read-more-title	Définit le titre de la section « En savoir plus ».
read-more-content	Contenu affiché lorsque « En savoir plus » est ouvert.
privacy-policy-content	Remplace le texte par défaut de la politique de confidentialité. Utilisez uniquement une formulation validée par votre propre service juridique, car PrivacyKit ne peut plus vérifier GDPR compliance une fois personnalisée.

Exemple

HTML
<consent-dialog theme="standard" variant="standard" locale="fr" version="1">
  <img slot="dialog-logo" width="100px" src="/logo.png" alt="Logo de l’entreprise" />
  <div slot="dialog-title" class="votre-classe">
    <h2>Nous utilisons des cookies</h2>
  </div>
  <span slot="marketing-content">
    <b>Nous ne collectons actuellement pas de cookies à des fins marketing.</b>
  </span>
</consent-dialog>

Design tokens

Les design tokens exposent un ensemble stable de variables CSS pour personnaliser couleurs, espacements, typographies et plus encore sans toucher à l'implémentation interne. Les thèmes intégrés s’appuient sur le même système de tokens, ce qui vous permet de surcharger des styles individuels ou de créer une apparence entièrement personnalisée.

Design tokens	Description
--pk-bg-color	Couleur d'arrière-plan du conteneur de dialogue.
--pk-paper-color	Couleur papier pour les cartes, accordéons et panneaux à l'intérieur de la boîte de dialogue.
--pk-text-color	Couleur de base appliquée aux titres et au texte.
--pk-primary-color	Accent principal pour les CTA, focus et liens.
--pk-text-color-on-primary	Couleur du texte utilisée sur les éléments remplis avec la couleur principale, comme les boutons pleins.
--pk-secondary-color	Accent secondaire, notamment pour les interrupteurs.
--pk-focus-ring-color	Couleur du contour de focus (outline) pour les états de focus au clavier.
--pk-border-color	Couleur de bordure utilisée pour les contours des panneaux, les tableaux et les séparateurs.
--pk-border-width	Largeur de bordure utilisée pour les contours des panneaux, les tableaux et les séparateurs.
--pk-font-family	Famille de polices utilisée pour tout le texte, avec repli sur la police du body.
--pk-spacing-unit	Unité d'espacement contrôlant les paddings et les intervalles.
--pk-control-radius	Rayon des angles pour les boutons, champs et contrôles interactifs.
--pk-dialog-radius	Rayon des angles du conteneur externe du dialogue de consentement.
--pk-dialog-shadow	Ombre appliquée à la boîte de dialogue de consentement.
--pk-dialog-max-height	Hauteur maximale de la boîte de dialogue de consentement ; lorsque le contenu dépasse cette limite, le corps de la boîte de dialogue devient défilable.

Exemple

<consent-dialog theme="light" style="
  --pk-bg-color: #faf7f2;
  --pk-paper-color: #f7eede;
  --pk-primary-color: #b08968;
  --pk-font-family: 'Segoe UI', Tahoma, sans-serif;
  --pk-control-radius: 10px;
  --pk-dialog-radius: 20px;
  --pk-dialog-shadow: 10px 20px rgba(0, 0, 0, 0.5);
  --pk-dialog-max-height: 50vh;
">
</consent-dialog>

Méthodes

TypeScriptRéférence de l'API

openConsentDialog(): void
onConsentDialogClosed(callback: () => void): () => void
openPrivacyPolicyDialog(): void

<consent-guard>

Affiche son contenu lorsque l'expression de consentement fournie est vérifiée.

Propriété	Type	Valeur par défaut / Obligatoire	Description
consent	string	unset	Expression de consentement à vérifier avant de rendre le contenu.

Expressions de consentement

Expression	Consentement requis	Description
	Toutes les catégories	Si l'attribut consent est omis, toutes les catégories doivent être acceptées pour que le guard s'active.
necessary	Aucun	Évite les faux positifs dans le Compliance Monitor pour les ressources nécessaires qui ne sont pas automatiquement reconnues par PrivacyKit.
preferences	Préférences
analytics	Analytique
marketing	Marketing
preferences+analytics	Préférences ET Analytique
preferences\|analytics	Préférences OU Analytique
preferences+marketing	Préférences ET Marketing
preferences\|marketing	Préférences OU Marketing
analytics+marketing	Analytique ET Marketing
analytics\|marketing	Analytique OU Marketing

Exemple 1 – Bloquer/charger des scripts

HTML
<consent-guard consent="marketing">
  <script type="text/plain" data-src="https://www.googletagmanager.com/gtm/js"></script>
</consent-guard>

Exemple 2 – Bloquer/charger du HTML

HTML
<consent-guard consent="analytics+marketing">
  <iframe
    title="YouTube video"
    data-src="https://www.youtube.com/embed/abc123"
    width="560"
    height="315"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
  </iframe>
</consent-guard>

Important : Notez que les ressources gérées dans les exemples 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.

<consent-missing>

Affiche un contenu de repli lorsqu'un consent-guard associé bloque l'expérience principale.

Propriété	Type	Valeur par défaut / Obligatoire	Description
for	string	obligatoire	Identifiant de l'élément <consent-guard> associé.

Exemple

<consent-guard id="analytics-guard" consent="analytics">
  <script type="text/plain" data-src="https://example.com/analytics.js"></script>
</consent-guard>

<consent-missing for="analytics-guard">
  Veuillez accepter les cookies d'analyse pour continuer.
</consent-missing>

<compliance-monitor>

Compliance Monitor surveille les requêtes sortantes et valide la couverture des gardes de consentement sur votre site en ligne, en détectant les traceurs non gérés et les régressions introduites par les modifications du site. Inactif par défaut, il reste invisible pour les visiteurs et peut être inclus en production sans risque.

Propriété	Type	Valeur par défaut / Obligatoire	Description
debug	boolean	false	Active le panneau Compliance Monitor au chargement de la page. Pour les environnements de développement uniquement.
delay	number	5000	Fenêtre d'observation réseau (en millisecondes) avant que Compliance Monitor commence à valider l'utilisation des endpoints et la couverture des gardes de consentement.
ignore-first-party-subdomains	boolean	true	Lorsque true, les requêtes vers des sous-domaines du domaine actuel sont ignorées silencieusement.
fab-position	left \| right	right	Détermine le côté du viewport auquel le FAB de Compliance Monitor est épinglé.

Exemple

HTML
<compliance-monitor debug delay="5000" ignore-first-party-subdomains="true" fab-position="left"></compliance-monitor>

Compliance Monitor reste caché aux visiteurs même lorsqu'il est inclus dans le bundle de production. La méthode recommandée pour l'activer sur un site en ligne est d'ajouter ?privacykit=monitor à l'URL — cela active le moniteur uniquement pour cette session de navigateur, sans affecter l'expérience des visiteurs.

Activer de manière programmatique :

TypeScriptRéférence de l'API

window.PrivacyKit?.toggleComplianceMonitor();