Referentie voor de snippet: configureren en aanpassen

aidisclose.js is het on-site script dat uw ai-disclosure.json-manifest leest en de wettelijk vereiste meldingen weergeeft: een interactiebanner voor chatbots, een blijvende contentmelding, zichtbare labels op gemarkeerde media en machineleesbare paginametadata. Het script heeft geen afhankelijkheden, is ongeveer 8.2 KB gzipped en voldoet aan WCAG 2.1 AA.

Deze pagina is de volledige referentie voor configuratie en aanpassing. Voor installatiestappen per platform (WordPress, Shopify, Webflow, tagbeheerders) raadpleegt u de installatiehandleiding. U kunt dit document ook lezen als ruwe markdown.

Overzicht

Eén script-tag regelt alles. Bij het laden haalt de snippet uw manifest op en geeft vervolgens alleen weer wat het manifest declareert:

Interactiebanner, voor een conversational systeem: een melding dat de bezoeker met een AI praat.
Contentmelding, voor een content-generation systeem met scope: site of scope: page: een kleine blijvende chip. Bij het aanklikken opent een korte uitleg met de meldingstekst, uw uitgeversnaam en het doel van het systeem uit het manifest, en een link naar het manifestbestand; de meldingstekst linkt naar een uitleg in gewone taal op aidisclose.io. De badge "gemaakt door mensen" opent dezelfde kaart met de uitgeversnaam.
Labels per element, op elk element dat u markeert met data-ai-content: een zichtbare "AI"-badge, plus een machineleesbaar data-digital-source-type.
Paginametadata: een <link rel="ai-disclosure"> en <meta name="ai-disclosure"> die naar uw manifest verwijzen.
Badge "gemaakt door mensen", wanneer het manifest noAiDeclared instelt.

Alles hieronder is optioneel. Zonder configuratie leest de snippet uw /.well-known/ai-disclosure.json, geeft weer in de taal van de bezoeker over 28 talen, volgt de licht- of donkervoorkeur van het besturingssysteem en stapelt boven bekende cookie-toestemmingsbalken zodat de twee elkaar nooit overlappen.

Installeren

Voeg de tag één keer toe, in het gedeelde sjabloon van uw site, de themaheader of uw tagbeheerder, en hij wordt met elke pagina meegeleverd. Hij kan in de <head> staan of ergens vóór </body>; hij is deferred, dus de plaatsing verandert het gedrag niet:

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

Zonder attributen leest de snippet het manifest op https://YOURDOMAIN/.well-known/ai-disclosure.json. Als uw platform geen bestand in de domeinwortel kan aanbieden, host het manifest dan bij AIDisclose en laat de tag ernaar verwijzen via een sleutel:

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

Als het manifest niet bereikbaar is, logt de snippet een consolewaarschuwing en geeft geen manifestgestuurde meldingen weer, zodat een mislukte fetch nooit een geraden melding toont. Paginametadata, uw [data-ai-content]-labels en een banner die met data-banner="true" geforceerd is, worden nog steeds weergegeven.

Configuratie

Er zijn drie manieren om de snippet te configureren. Gebruik degene die bij uw platform past.

1. Attributen op de script-tag. De eenvoudigste weg, zonder extra code:

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

2. Een globaal configuratieobject. Definieer window.AIDiscloseConfig voordat het script draait. Het biedt de volledige set opties, inclusief de selector-opties die geen attribuutvorm hebben:

<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. Handmatige initialisatie. Voeg data-manual toe om de automatische start uit te stellen en roep AIDisclose.init() dan zelf aan zodra uw app klaar is (handig in single-page apps):

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

Als er meer dan één bron aanwezig is, wint window.AIDiscloseConfig: het overschrijft zowel de attributen van de script-tag als elk object dat aan AIDisclose.init() wordt doorgegeven.

Optiereferentie

Het optieaanbod is stabiel voor de 1.x-lijn.

Option	Attribute	Values	Default	Effect
`theme`	`data-theme`	`light`, `dark`, `auto`	`auto`	Kleurenschema. `auto` volgt de OS-voorkeur van de bezoeker.
`siteKey`	`data-aidisclose`	tekenreeks	geen	Laad het door AIDisclose gehoste manifest voor deze sleutel in plaats van het well-known-bestand.
`manifestUrl`	`data-manifest-url`	URL	`/.well-known/ai-disclosure.json`	Lees het manifest vanaf een aangepaste URL.
`lang`	`data-lang`	BCP-47-code	pagina `<html lang>`, anders de taal van de bezoeker	Forceer een weergavetaal.
`banner`	`data-banner`	`true`, `false`	auto	Forceer de interactiebanner aan of uit. Wanneer niet ingesteld, verschijnt hij alleen wanneer uw manifest een conversationeel (chatbot)systeem declareert.
`persistentChip`	—	`true`, `false`	`true`	Toon of onderdruk de ingeklapte mini-chip van de interactiebanner (de kleine pil waarin hij wordt geminimaliseerd).
`alwaysShow`	—	`true`, `false`	`false`	Toon de banner opnieuw bij elk bezoek en negeer dat de bezoeker hem heeft weggeklikt (onthouden in de `localStorage` van de browser).
`mountSelector`	—	CSS-selector	geen	Geef de banner inline weer binnen dit element in plaats van de vaste onderoverlay.
`triggerSelector`	—	CSS-selector	geen	Toon de interactiebanner pas nadat de bezoeker op dit element klikt, zoals een chatstarter. Pagina's zonder overeenkomend element tonen geen banner, zodat een chatbot die op sommige pagina's bestaat, alleen daar wordt gemeld. Starters die na het laden worden ingevoegd, werken nog steeds. Een bezoeker die de banner eerder heeft weggeklikt, ziet nog steeds de mini-chip.
`adjacentSelector`	—	CSS-selector	geen	Plaats een label naast een element dat u niet rechtstreeks kunt markeren, zoals een gesloten widget of een iframe.
`observe`	—	`true`, `false`	`true`	Bewaak de DOM op content die later wordt toegevoegd en label die. Zet op `false` op volledig statische pagina's.
`beaconUrl`	—	URL	geen	Verstuur een anonieme `{siteKey, flag}`-beacon bij noemenswaardige gebeurtenissen. Geen cookies, geen persoonsgegevens.

data-manual is geen optiewaarde: de aanwezigheid ervan op de tag stelt de automatische start uit zodat u zelf AIDisclose.init() kunt aanroepen.

Thema en uiterlijk

Stel het ingebouwde schema in met theme (light, dark of auto). Om exact bij uw merk te passen, overschrijft u de CSS-custom-properties van de snippet in uw eigen stylesheet. Ze zijn gedefinieerd op .aid-banner, .aid-chip:

Variable	Controls
`--aid-bg`	Achtergrond
`--aid-fg`	Tekst
`--aid-line`	Rand
`--aid-btn`	Rand van de sluitknop
`--aid-btnfg`	Tekst van de sluitknop
`--aid-hov`	Hover van de sluitknop

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

De snippet levert geen !important-regels en gebruikt selectors met lage specificiteit, zodat uw CSS wint. De class-hooks zijn .aid-banner, .aid-chip, .aid-badge, .aid-badge-inline, .aid-wrap, .aid-ai (contentmelding) en .aid-hm ("gemaakt door mensen"). Pas afstand, radius en schaduw hierop rechtstreeks aan.

Standaard is de banner een vaste overlay onderaan de viewport. Stel mountSelector in om hem inline en statisch weer te geven binnen een element dat u beheert, zodat hij binnen uw eigen lay-out valt.

Eigen bewoording

De banner en chip bevatten standaard nauwkeurige gelokaliseerde tekst in 28 talen. Om de bewoording te overschrijven:

Per taal, in het manifest. Voeg disclosure.texts toe aan een systeem, gecodeerd op taalcode. De snippet gebruikt uw tekst voor de overeenkomende taal van de bezoeker:

{
  "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." }
  }
}

Per element. Voeg data-ai-label toe aan een gemarkeerd element om het label van die badge in te stellen.

Wanneer een systeem editorialResponsibility.humanReview: true instelt en de content niet volledig door AI is gegenereerd of gemanipuleerd, luidt de melding automatisch "AI-ondersteund, door mensen gecontroleerd" in de taal van de bezoeker, in plaats van "AI-gegenereerd".

Uw AI-content markeren

De snippet labelt alleen wat u markeert. Voeg data-ai-content toe aan elk door AI gegenereerd element:

<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>

Elk gemarkeerd element krijgt een zichtbare "AI"-badge en een machineleesbaar data-digital-source-type (standaard trainedAlgorithmicMedia, een met IPTC en schema.org compatibele waarde). Voeg data-ai-label toe voor eigen labeltekst, of stel data-digital-source-type zelf in om specifieker te zijn.

Voor AI die u niet rechtstreeks kunt annoteren, zoals een chatwidget van derden in een gesloten iframe, gebruikt u adjacentSelector om een label ernaast te plaatsen, of triggerSelector om de interactiebanner te tonen wanneer de widget opent.

Een contentgeneratiemelding kan de hele site dekken (disclosure.scope: "site") of specifieke pagina's (disclosure.scope: "page" met een disclosure.pages-lijst van pad-globs, zoals /blog/*). Een overeenkomst op paginaniveau heeft voorrang op een op siteniveau, en een systeem op paginaniveau zonder overeenkomend pad geeft daar niets weer.

Single-page apps en frameworks

De snippet bewaakt de DOM met een MutationObserver en herevalueert de toepasselijke melding bij routewijzigingen, zodat content en pagina's die na het laden worden toegevoegd, alsnog worden gelabeld. In een SPA:

Houd observe op de standaardwaarde (true) zodat client-gerenderde content wordt opgevangen.
Als u de initialisatie afhankelijk maakt van de gereedheid van de app, voeg dan data-manual toe en roep AIDisclose.init() aan nadat uw framework is gemount.
Meldingen op paginaniveau worden automatisch bijgewerkt naarmate de route verandert; er is geen aanroep per route nodig.

Zet observe: false alleen op volledig statische pagina's waar na het laden niets wordt geïnjecteerd.

Content Security Policy

Als u een Content Security Policy afdwingt, sta de snippet dan expliciet toe.

Belangrijk

Een strikte script-src 'self' blokkeert de CDN-snippet stilzwijgend, en de meldingen worden nooit weergegeven. Dit is de meest voorkomende reden waarom een correct gedeclareerde site niveau 2 niet bereikt.

script-src: voeg https://cdn.aidisclose.io toe, of host aidisclose.js zelf vanaf uw eigen origin en houd 'self' aan.
style-src: de snippet injecteert zijn stijlen inline, dus 'unsafe-inline' volstaat. Als u geen inline stijlen toestaat, valt hij terug op het laden van aidisclose.css vanuit de map van het script, sta dus ook https://cdn.aidisclose.io toe in style-src (of host dat bestand zelf naast het script).
connect-src: de fetch van het manifest is same-origin voor het well-known-bestand en vereist niets extra's. Als u het manifest via een sleutel laadt, sta dan https://cdn.aidisclose.io toe.

Het manifest wordt zonder credentials opgehaald, bied het dus openbaar aan: een endpoint dat cookies of authenticatie vereist, ontvangt die niet.

Versiebeheer en integriteit

De CDN bedient drie sporen:

/v1/aidisclose.js volgt de nieuwste 1.x-release. Aanbevolen voor de meeste sites.
/v1.0.0/aidisclose.js is een vaste, onveranderlijke versie die u kunt vastzetten, met Subresource Integrity:

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

/latest/aidisclose.js volgt altijd de nieuwste release over hoofdversies heen.

Om de SRI-hash te verkrijgen die u wilt vastzetten, bouwt u de snippet: npm run build in packages/snippet drukt hem af (de broncode is open op GitHub).

Uw eigen meldings-UI bouwen

U kunt uw eigen meldings-UI weergeven in plaats van de ingebouwde. Er is geen enkele uitschakelknop: data-banner="false" en persistentChip: false onderdrukken alleen de interactiebanner en zijn chip, terwijl contentmeldingen, [data-ai-content]-badges per element en de badge "gemaakt door mensen" nog steeds worden weergegeven op basis van uw manifest en markup. Een volledig aangepaste UI betekent dat u niet op die elementen vertrouwt en uw eigen weergave verzorgt.

Opmerking

De AIDisclose-checker verifieert de weergave door de markup van de referentiesnippet te detecteren. Een volledig met de hand gebouwde melding is geldig, maar wordt niet automatisch gedetecteerd, zodat de site op niveau 1 (Gedeclareerd) blijft in plaats van niveau 2 (Weergegeven), tenzij uw eigen markup reproduceert waar de checker naar zoekt. Als niveau 2 voor u van belang is, houd dan de ingebouwde weergave aan en pas die aan met CSS.

Toegankelijkheid

De weergegeven UI voldoet aan WCAG 2.1 AA: zichtbare :focus-visible-omranding op interactieve besturingselementen, correcte rollen en labels, contrast dat standhoudt in licht en donker, en animatie die achter prefers-reduced-motion is geplaatst. De snippet detecteert ook bekende cookie-toestemmingsbalken en stapelt erboven zodat meldingen nooit achter een CMP verborgen raken. Op zeer smalle schermen opent de interactiebanner als de compacte chip zodat hij nooit content bedekt.

#Overzicht

#Installeren

#Configuratie

#Optiereferentie

#Thema en uiterlijk

#Eigen bewoording

#Uw AI-content markeren

#Single-page apps en frameworks

#Content Security Policy

#Versiebeheer en integriteit

#Uw eigen meldings-UI bouwen

#Toegankelijkheid