Référence du snippet : configuration et personnalisation

aidisclose.js est le script embarqué qui lit votre manifeste ai-disclosure.json et affiche les divulgations exigées par la loi : une bannière d'interaction pour les chatbots, un avis de contenu persistant, des étiquettes visibles sur les médias marqués et des métadonnées de page lisibles par machine. Il est sans dépendance, pèse environ 8.2 KB compressé en gzip et respecte le niveau WCAG 2.1 AA.

Cette page constitue la référence complète de configuration et de personnalisation. Pour les étapes d'installation plateforme par plateforme (WordPress, Shopify, Webflow, gestionnaires de balises), consultez le guide d'installation. Vous pouvez aussi lire ce document au format markdown brut.

Vue d'ensemble

Une seule balise de script pilote l'ensemble. Au chargement, le snippet récupère votre manifeste, puis affiche uniquement ce que le manifeste déclare :

Bannière d'interaction, pour un système conversational : un avis indiquant que le visiteur s'adresse à une IA.
Avis de contenu, pour un système content-generation avec scope: site ou scope: page : une petite pastille persistante. Un clic ouvre une brève explication comportant le texte de l'avis, le nom de votre éditeur et la finalité du système issus du manifeste, ainsi qu'un lien vers le fichier manifeste ; le texte de l'avis renvoie à une explication en langage clair sur aidisclose.io. Le badge « made by humans » ouvre la même carte avec le nom de l'éditeur.
Étiquettes par élément, sur tout élément que vous marquez avec data-ai-content : un badge « IA » visible, ainsi qu'un attribut data-digital-source-type lisible par machine.
Métadonnées de page : un <link rel="ai-disclosure"> et un <meta name="ai-disclosure"> pointant vers votre manifeste.
Badge « Made by humans », lorsque le manifeste définit noAiDeclared.

Tout ce qui suit est facultatif. Sans configuration, le snippet lit votre /.well-known/ai-disclosure.json, s'affiche dans la langue du visiteur parmi 28 locales, suit la préférence claire ou sombre du système d'exploitation et se positionne au-dessus des barres de consentement aux cookies connues afin que les deux ne se chevauchent jamais.

Installation

Ajoutez la balise une seule fois, dans le modèle partagé de votre site, l'en-tête du thème ou le gestionnaire de balises, et elle sera présente sur chaque page. Elle peut se placer dans le <head> ou n'importe où avant </body> ; elle est différée, donc son emplacement ne change pas le comportement :

<script src="https://cdn.aidisclose.io/v1/aidisclose.js" defer></script>

Sans attribut, le snippet lit le manifeste à l'adresse https://YOURDOMAIN/.well-known/ai-disclosure.json. Si votre plateforme ne peut pas servir un fichier à la racine du domaine, hébergez le manifeste avec AIDisclose et faites pointer la balise vers celui-ci par clé :

<script src="https://cdn.aidisclose.io/v1/aidisclose.js" data-aidisclose="YOUR_SITE_KEY" defer></script>

Si le manifeste est inaccessible, le snippet consigne un avertissement dans la console et n'affiche aucun avis issu du manifeste, de sorte qu'un échec de récupération ne montre jamais un avis deviné. Les métadonnées de page, vos étiquettes [data-ai-content] et une bannière forcée avec data-banner="true" s'affichent toujours.

Configuration

Le snippet se configure de trois manières. Utilisez celle qui convient à votre plateforme.

1. Attributs sur la balise de script. La voie la plus simple, sans code supplémentaire :

<script src="https://cdn.aidisclose.io/v1/aidisclose.js"
        data-theme="light" data-lang="fr" defer></script>

2. Un objet de configuration global. Définissez window.AIDiscloseConfig avant l'exécution du script. Il expose l'ensemble complet des options, y compris les options de sélecteur qui n'ont pas de forme d'attribut :

<script>
  window.AIDiscloseConfig = {
    theme: 'light',
    mountSelector: '#ai-disclosure-slot',
    triggerSelector: '#chat-launcher',
  };
</script>
<script src="https://cdn.aidisclose.io/v1/aidisclose.js" defer></script>

3. Initialisation manuelle. Ajoutez data-manual pour différer le démarrage automatique, puis appelez AIDisclose.init() vous-même une fois votre application prête (utile dans les applications monopages) :

<script src="https://cdn.aidisclose.io/v1/aidisclose.js" data-manual defer></script>
<script>
  AIDisclose.init({ theme: 'dark', persistentChip: false });
</script>

Si plusieurs sources sont présentes, window.AIDiscloseConfig l'emporte : il remplace à la fois les attributs de la balise de script et tout objet passé à AIDisclose.init().

Référence des options

La surface des options est stable pour la ligne 1.x.

Option	Attribute	Values	Default	Effect
`theme`	`data-theme`	`light`, `dark`, `auto`	`auto`	Schéma de couleurs. `auto` suit la préférence du système d'exploitation du visiteur.
`siteKey`	`data-aidisclose`	chaîne de caractères	aucune	Charge le manifeste hébergé par AIDisclose pour cette clé au lieu du fichier well-known.
`manifestUrl`	`data-manifest-url`	URL	`/.well-known/ai-disclosure.json`	Lit le manifeste depuis une URL personnalisée.
`lang`	`data-lang`	code BCP-47	`<html lang>` de la page, sinon la langue du visiteur	Force une langue d'affichage.
`banner`	`data-banner`	`true`, `false`	auto	Force l'affichage ou le masquage de la bannière d'interaction. Laissée sans valeur, elle ne s'affiche que lorsque votre manifeste déclare un système conversationnel (chatbot).
`persistentChip`	—	`true`, `false`	`true`	Affiche ou supprime la mini-pastille réduite de la bannière d'interaction (la petite pastille vers laquelle elle se réduit).
`alwaysShow`	—	`true`, `false`	`false`	Réaffiche la bannière à chaque visite, en ignorant le rejet du visiteur (mémorisé dans le `localStorage` du navigateur).
`mountSelector`	—	sélecteur CSS	aucun	Affiche la bannière en ligne à l'intérieur de cet élément au lieu de la superposition fixe en bas de page.
`triggerSelector`	—	sélecteur CSS	aucun	N'affiche la bannière d'interaction qu'après un clic du visiteur sur cet élément, par exemple un lanceur de chat. Les pages sans élément correspondant n'affichent aucune bannière, de sorte qu'un chatbot présent sur certaines pages n'y est divulgué que sur celles-ci. Les lanceurs injectés après le chargement fonctionnent également. Un visiteur ayant déjà rejeté la bannière voit toujours la mini-pastille.
`adjacentSelector`	—	sélecteur CSS	aucun	Place une étiquette à côté d'un élément que vous ne pouvez pas marquer directement, par exemple un widget fermé ou une iframe.
`observe`	—	`true`, `false`	`true`	Surveille le DOM pour le contenu ajouté ultérieurement et l'étiquette. Réglez sur `false` sur les pages entièrement statiques.
`beaconUrl`	—	URL	aucune	Envoie une balise anonyme `{siteKey, flag}` lors d'événements notables. Aucun cookie, aucune donnée personnelle.

data-manual n'est pas une valeur d'option : sa présence sur la balise diffère le démarrage automatique afin que vous puissiez appeler AIDisclose.init() vous-même.

Thème et apparence

Réglez le schéma intégré avec theme (light, dark ou auto). Pour correspondre exactement à votre marque, redéfinissez les propriétés CSS personnalisées du snippet dans votre propre feuille de style. Elles sont définies sur .aid-banner, .aid-chip :

Variable	Controls
`--aid-bg`	Arrière-plan
`--aid-fg`	Texte
`--aid-line`	Bordure
`--aid-btn`	Bordure du bouton de rejet
`--aid-btnfg`	Texte du bouton de rejet
`--aid-hov`	Survol du bouton de rejet

.aid-banner, .aid-chip {
  --aid-bg: #0b1020;
  --aid-fg: #e8eaed;
  --aid-line: #2a2f36;
}

Le snippet n'embarque aucune règle !important et utilise des sélecteurs à faible spécificité, de sorte que votre CSS l'emporte. Les points d'accroche de classe sont .aid-banner, .aid-chip, .aid-badge, .aid-badge-inline, .aid-wrap, .aid-ai (avis de contenu) et .aid-hm (« made by humans »). Modifiez directement l'espacement, le rayon et l'ombre de ces éléments.

Par défaut, la bannière est une superposition fixe en bas de la fenêtre d'affichage. Réglez mountSelector pour l'afficher en ligne et de manière statique à l'intérieur d'un élément que vous contrôlez, afin qu'elle s'insère dans votre propre mise en page.

Textes personnalisés

La bannière et la pastille comportent d'origine un texte localisé exact en 28 langues. Pour remplacer le texte :

Par langue, dans le manifeste. Ajoutez disclosure.texts à un système, indexé par code de langue. Le snippet utilise votre texte pour la langue du visiteur correspondante :

{
  "disclosure": {
    "texts": { "en": "Some copy on this page was drafted with AI.", "fr": "Une partie du texte a été rédigée avec de l'IA." }
  }
}

Par élément. Ajoutez data-ai-label à un élément marqué pour définir l'étiquette de ce badge.

Lorsqu'un système définit editorialResponsibility.humanReview: true et que son contenu n'est pas entièrement généré ou manipulé par IA, l'avis indique automatiquement « assisté par IA, relu par un humain » dans la langue du visiteur, au lieu de « généré par IA ».

Marquage de vos contenus IA

Le snippet n'étiquette que ce que vous marquez. Ajoutez data-ai-content à tout élément généré par IA :

<img data-ai-content src="/img/generated.webp" alt="…">
<p data-ai-content>AI-drafted summary…</p>
<video data-ai-content src="/clip.mp4"></video>

Chaque élément marqué reçoit un badge « IA » visible et un attribut data-digital-source-type lisible par machine (avec la valeur par défaut trainedAlgorithmicMedia, compatible IPTC et schema.org). Ajoutez data-ai-label pour un texte d'étiquette personnalisé, ou définissez data-digital-source-type vous-même pour être plus précis.

Pour une IA que vous ne pouvez pas annoter directement, par exemple un widget de chat tiers dans une iframe fermée, utilisez adjacentSelector pour placer une étiquette à côté, ou triggerSelector pour faire apparaître la bannière d'interaction à l'ouverture du widget.

Un avis de génération de contenu peut couvrir l'ensemble du site (disclosure.scope: "site") ou des pages spécifiques (disclosure.scope: "page" avec une liste disclosure.pages de motifs de chemin, comme /blog/*). Une correspondance de portée page prime sur une portée site, et un système de portée page sans chemin correspondant n'affiche rien à cet endroit.

Applications monopages et frameworks

Le snippet surveille le DOM avec un MutationObserver et réévalue l'avis applicable lors des changements de route, de sorte que le contenu et les pages ajoutés après le chargement sont tout de même étiquetés. Dans une SPA :

Conservez observe à sa valeur par défaut (true) pour que le contenu rendu côté client soit détecté.
Si vous conditionnez l'initialisation à la disponibilité de l'application, ajoutez data-manual et appelez AIDisclose.init() après le montage de votre framework.
Les avis de portée page se mettent à jour automatiquement à mesure que la route change ; aucun appel par route n'est nécessaire.

Ne réglez observe: false que sur les pages entièrement statiques où rien n'est injecté après le chargement.

Content Security Policy

Si vous appliquez une Content Security Policy, autorisez le snippet explicitement.

Important

Une directive stricte script-src 'self' bloque silencieusement le snippet du CDN, et les divulgations ne s'affichent jamais. C'est la raison la plus fréquente pour laquelle un site correctement déclaré n'atteint pas le niveau 2.

script-src : ajoutez https://cdn.aidisclose.io, ou auto-hébergez aidisclose.js depuis votre propre origine et conservez 'self'.
style-src : le snippet injecte ses styles en ligne, donc 'unsafe-inline' suffit. Si vous n'autorisez pas les styles en ligne, il se replie sur le chargement de aidisclose.css depuis le répertoire du script, donc autorisez également https://cdn.aidisclose.io dans style-src (ou auto-hébergez ce fichier aux côtés du script).
connect-src : la récupération du manifeste est de même origine pour le fichier well-known et ne nécessite rien de plus. Si vous chargez le manifeste par clé, autorisez https://cdn.aidisclose.io.

Le manifeste est récupéré sans identifiants, servez-le donc publiquement : un point de terminaison exigeant des cookies ou une authentification ne les recevra pas.

Gestion des versions et intégrité

Le CDN sert trois canaux :

/v1/aidisclose.js suit la dernière version 1.x. Recommandé pour la plupart des sites.
/v1.0.0/aidisclose.js est une version figée et immuable que vous pouvez épingler, avec Subresource Integrity :

<script src="https://cdn.aidisclose.io/v1.0.0/aidisclose.js"
        integrity="sha384-…" crossorigin="anonymous" defer></script>

/latest/aidisclose.js suit toujours la version la plus récente, toutes versions majeures confondues.

Pour obtenir le hachage SRI à épingler, compilez le snippet : npm run build dans packages/snippet l'affiche (le code source est ouvert sur GitHub).

Construire votre propre interface de divulgation

Vous pouvez afficher votre propre interface de divulgation à la place de celle intégrée. Il n'existe pas d'unique interrupteur d'arrêt : data-banner="false" et persistentChip: false ne suppriment que la bannière d'interaction et sa pastille, tandis que les avis de contenu, les badges [data-ai-content] par élément et le badge « made by humans » continuent de s'afficher à partir de votre manifeste et de votre balisage. Une interface entièrement personnalisée suppose de ne pas s'appuyer sur ces éléments et d'afficher les vôtres.

Note

Le vérificateur AIDisclose contrôle le rendu en détectant le balisage du snippet de référence. Une divulgation entièrement construite à la main est valide, mais elle n'est pas détectée automatiquement, de sorte que le site reste au niveau 1 (Déclaré) plutôt qu'au niveau 2 (Affiché), à moins que votre balisage personnalisé ne reproduise ce que le vérificateur recherche. Si le niveau 2 compte pour vous, conservez le rendu intégré et restylez-le avec du CSS.

Accessibilité

L'interface affichée respecte le niveau WCAG 2.1 AA : contours :focus-visible visibles sur les commandes interactives, rôles et étiquettes corrects, contraste tenant en clair comme en sombre, et animations conditionnées par prefers-reduced-motion. Le snippet détecte aussi les barres de consentement aux cookies connues et se positionne au-dessus d'elles afin que les divulgations ne soient jamais masquées derrière une CMP. Sur les écrans très étroits, la bannière d'interaction s'ouvre sous forme de pastille compacte pour ne jamais recouvrir le contenu.

#Vue d'ensemble

#Installation

#Configuration

#Référence des options

#Thème et apparence

#Textes personnalisés

#Marquage de vos contenus IA

#Applications monopages et frameworks

#Content Security Policy

#Gestion des versions et intégrité

#Construire votre propre interface de divulgation

#Accessibilité