Snippetreferens: konfigurera och anpassa

aidisclose.js är skriptet på webbplatsen som läser ditt manifest ai-disclosure.json och återger de upplysningar som lagen kräver: en interaktionsbanner för chattbotar, en beständig innehållsnotis, synliga etiketter på märkta medier och maskinläsbara metadata för sidan. Det är beroendefritt, cirka 8.2 KB gzippat, och uppfyller WCAG 2.1 AA.

Den här sidan är den fullständiga referensen för konfiguration och anpassning. För installationssteg plattform för plattform (WordPress, Shopify, Webflow, tagghanterare), se installationsguiden. Du kan även läsa det här dokumentet som rå markdown.

Översikt

En enda skripttagg driver allt. Vid inläsning hämtar snippeten ditt manifest och återger sedan bara det som manifestet deklarerar:

Interaktionsbanner, för ett conversational-system: en notis om att besökaren talar med en AI.
Innehållsnotis, för ett content-generation-system med scope: site eller scope: page: en liten beständig chip. Ett klick på den öppnar en kort förklaring med notistexten, ditt utgivarnamn och systemets syfte från manifestet, samt en länk till manifestfilen; notistexten länkar till en förklaring i klartext på aidisclose.io. Märket "made by humans" öppnar samma kort med utgivarnamnet.
Etiketter per element, på valfritt element som du märker med data-ai-content: ett synligt "AI"-märke, plus ett maskinläsbart data-digital-source-type.
Metadata för sidan: en <link rel="ai-disclosure"> och <meta name="ai-disclosure"> som pekar på ditt manifest.
Märket "Made by humans", när manifestet anger noAiDeclared.

Allt nedan är valfritt. Utan någon konfiguration läser snippeten ditt /.well-known/ai-disclosure.json, återger på besökarens språk över 28 språkinställningar, följer operativsystemets inställning för ljust eller mörkt läge och staplas ovanför kända banners för cookiesamtycke så att de två aldrig överlappar varandra.

Installation

Lägg till taggen en gång, i webbplatsens gemensamma mall, temats sidhuvud eller din tagghanterare, så följer den med på varje sida. Den kan ligga i <head> eller var som helst före </body>; den är deferrad, så placeringen ändrar inte beteendet:

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

Utan attribut läser snippeten manifestet på https://YOURDOMAIN/.well-known/ai-disclosure.json. Om din plattform inte kan publicera en fil i domänroten, hosta manifestet hos AIDisclose och låt taggen peka på det via nyckel:

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

Om manifestet inte går att nå loggar snippeten en varning i konsolen och återger inga manifestdrivna notiser, så ett misslyckat hämtningsförsök visar aldrig en gissad notis. Metadata för sidan, dina [data-ai-content]-etiketter och en banner som tvingas fram med data-banner="true" återges fortfarande.

Konfiguration

Det finns tre sätt att konfigurera snippeten. Använd det som passar din plattform.

1. Attribut på skripttaggen. Den enklaste vägen, ingen extra kod:

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

2. Ett globalt konfigurationsobjekt. Definiera window.AIDiscloseConfig innan skriptet körs. Det exponerar hela alternativuppsättningen, inklusive de selektoralternativ som inte har någon attributform:

<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. Manuell initiering. Lägg till data-manual för att skjuta upp automatisk start, och anropa sedan AIDisclose.init() själv när din applikation är redo (användbart i ensidesapplikationer):

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

Om mer än en källa finns vinner window.AIDiscloseConfig: den åsidosätter både skripttaggens attribut och alla objekt som skickas till AIDisclose.init().

Alternativreferens

Alternativytan är stabil för 1.x-serien.

Option	Attribute	Values	Default	Effect
`theme`	`data-theme`	`light`, `dark`, `auto`	`auto`	Färgschema. `auto` följer besökarens OS-inställning.
`siteKey`	`data-aidisclose`	sträng	inget	Läs in det AIDisclose-hostade manifestet för den här nyckeln i stället för well-known-filen.
`manifestUrl`	`data-manifest-url`	URL	`/.well-known/ai-disclosure.json`	Läs manifestet från en egen URL.
`lang`	`data-lang`	BCP-47-kod	sidans `<html lang>`, annars besökarens språk	Tvinga fram ett visningsspråk.
`banner`	`data-banner`	`true`, `false`	auto	Tvinga interaktionsbannern på eller av. Lämnas den oangiven visas den bara när ditt manifest deklarerar ett konversationssystem (chattbot).
`persistentChip`	—	`true`, `false`	`true`	Visa eller dölj interaktionsbannerns hopfällda mini-chip (den lilla pillerformen den minimeras till).
`alwaysShow`	—	`true`, `false`	`false`	Visa bannern igen vid varje besök och bortse från besökarens stängning (som sparas i webbläsarens `localStorage`).
`mountSelector`	—	CSS-selektor	inget	Återge bannern inline inuti det här elementet i stället för det fasta överlägget längst ned.
`triggerSelector`	—	CSS-selektor	inget	Visa interaktionsbannern först efter att besökaren klickat på det här elementet, till exempel en chattstartare. Sidor utan matchande element visar ingen banner, så en chattbot som finns på vissa sidor upplyser bara där. Startare som injiceras efter inläsning fungerar ändå. En besökare som tidigare stängt bannern ser fortfarande mini-chipen.
`adjacentSelector`	—	CSS-selektor	inget	Placera en etikett bredvid ett element som du inte kan märka direkt, till exempel en stängd widget eller en iframe.
`observe`	—	`true`, `false`	`true`	Bevaka DOM för innehåll som läggs till senare och märk det. Sätt `false` på helt statiska sidor.
`beaconUrl`	—	URL	inget	Skicka en anonym `{siteKey, flag}`-beacon vid noterbara händelser. Inga cookies, inga personuppgifter.

data-manual är inte ett alternativvärde: dess närvaro på taggen skjuter upp automatisk start så att du kan anropa AIDisclose.init() själv.

Tema och utseende

Ange det inbyggda schemat med theme (light, dark eller auto). För att matcha ditt varumärke exakt, åsidosätt snippetens anpassade CSS-egenskaper i din egen stilmall. De är definierade på .aid-banner, .aid-chip:

Variable	Controls
`--aid-bg`	Bakgrund
`--aid-fg`	Text
`--aid-line`	Ram
`--aid-btn`	Ram för stängningsknappen
`--aid-btnfg`	Text för stängningsknappen
`--aid-hov`	Hovring för stängningsknappen

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

Snippeten levererar inga !important-regler och använder selektorer med låg specificitet, så din CSS vinner. Klasskrokarna är .aid-banner, .aid-chip, .aid-badge, .aid-badge-inline, .aid-wrap, .aid-ai (innehållsnotis) och .aid-hm ("made by humans"). Ändra avstånd, radie och skugga på dessa direkt.

Som standard är bannern ett fast överlägg längst ned i visningsområdet. Sätt mountSelector för att återge den inline och statiskt inuti ett element du kontrollerar, så att den ligger inom din egen layout.

Egen text

Bannern och chipen bär korrekt lokaliserad text på 28 språk direkt ur lådan. För att åsidosätta texten:

Per språk, i manifestet. Lägg till disclosure.texts till ett system, nyckelat med språkkod. Snippeten använder din text för det matchande besökarspråket:

{
  "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. Lägg till data-ai-label på ett märkt element för att sätta det märkets etikett.

När ett system anger editorialResponsibility.humanReview: true och dess innehåll inte är helt AI-genererat eller manipulerat, lyder notisen automatiskt "AI-assisterat, granskat av människa" på besökarens språk, i stället för "AI-genererat".

Märka ditt AI-innehåll

Snippeten märker bara det du märker. Lägg till data-ai-content på valfritt AI-genererat 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>

Varje märkt element får ett synligt "AI"-märke och ett maskinläsbart data-digital-source-type (med standardvärdet trainedAlgorithmicMedia, ett värde som är kompatibelt med IPTC och schema.org). Lägg till data-ai-label för egen etikettext, eller ange data-digital-source-type själv för att vara mer specifik.

För AI som du inte kan annotera direkt, till exempel en chattwidget från tredje part i en stängd iframe, använd adjacentSelector för att placera en etikett bredvid den, eller triggerSelector för att visa interaktionsbannern när widgeten öppnas.

En innehållsgenereringsnotis kan täcka hela webbplatsen (disclosure.scope: "site") eller specifika sidor (disclosure.scope: "page" med en disclosure.pages-lista av sökvägsglobbar, till exempel /blog/*). En matchning på sidnivå har företräde framför en på webbplatsnivå, och ett system på sidnivå utan matchande sökväg återger ingenting där.

Ensidesapplikationer och ramverk

Snippeten bevakar DOM med en MutationObserver och omvärderar den tillämpliga notisen vid ruttändringar, så att innehåll och sidor som läggs till efter inläsning också märks. I en SPA:

Behåll observe på standardvärdet (true) så att klientåtergivet innehåll fångas upp.
Om du villkorar initiering på applikationens beredskap, lägg till data-manual och anropa AIDisclose.init() efter att ditt ramverk monterats.
Notiser på sidnivå uppdateras automatiskt när rutten ändras; inget anrop per rutt behövs.

Sätt observe: false endast på helt statiska sidor där inget injiceras efter inläsning.

Content Security Policy

Om du tillämpar en Content Security Policy, tillåt snippeten uttryckligen.

Viktigt

En strikt script-src 'self' blockerar CDN-snippeten tyst, och upplysningarna återges aldrig. Detta är den vanligaste orsaken till att en korrekt deklarerad webbplats inte når nivå 2.

script-src: lägg till https://cdn.aidisclose.io, eller hosta aidisclose.js själv från ditt eget ursprung och behåll 'self'.
style-src: snippeten injicerar sina stilar inline, så 'unsafe-inline' räcker. Om du inte tillåter inline-stilar faller den tillbaka på att läsa in aidisclose.css från skriptets katalog, så tillåt även https://cdn.aidisclose.io i style-src (eller hosta den filen själv bredvid skriptet).
connect-src: manifesthämtningen sker från samma ursprung för well-known-filen och kräver inget extra. Om du läser in manifestet via nyckel, tillåt https://cdn.aidisclose.io.

Manifestet hämtas utan autentiseringsuppgifter, så publicera det öppet: en slutpunkt som kräver cookies eller autentisering får dem inte.

Versionshantering och integritet

CDN:et betjänar tre spår:

/v1/aidisclose.js följer den senaste 1.x-utgåvan. Rekommenderas för de flesta webbplatser.
/v1.0.0/aidisclose.js är en fast, oföränderlig version som du kan låsa fast, med Subresource Integrity:

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

/latest/aidisclose.js följer alltid den nyaste utgåvan över alla huvudversioner.

För att få SRI-hashen att låsa fast, bygg snippeten: npm run build i packages/snippet skriver ut den (källkoden är öppen på GitHub).

Bygga ditt eget upplysningsgränssnitt

Du kan återge ditt eget upplysningsgränssnitt i stället för det inbyggda. Det finns ingen enskild avstängningsknapp: data-banner="false" och persistentChip: false dämpar bara interaktionsbannern och dess chip, medan innehållsnotiser, [data-ai-content]-märken per element och märket "made by humans" fortfarande återges från ditt manifest och din markup. Ett helt anpassat gränssnitt innebär att inte förlita sig på dessa och att återge ditt eget.

Obs

AIDisclose-kontrollen verifierar återgivning genom att upptäcka referenssnippetens markup. En helt handbyggd upplysning är giltig, men den upptäcks inte automatiskt, så webbplatsen stannar på nivå 1 (Deklarerad) i stället för nivå 2 (Återgiven) om inte din egen markup återskapar det som kontrollen letar efter. Om nivå 2 är viktig för dig, behåll den inbyggda återgivningen och ändra dess stil med CSS.

Tillgänglighet

Det återgivna gränssnittet uppfyller WCAG 2.1 AA: synliga :focus-visible-konturer på interaktiva kontroller, korrekta roller och etiketter, kontrast som håller i ljust och mörkt läge, och animering villkorad av prefers-reduced-motion. Snippeten upptäcker även kända banners för cookiesamtycke och staplas ovanför dem så att upplysningar aldrig döljs bakom en CMP. På mycket smala skärmar öppnas interaktionsbannern som den kompakta chipen så att den aldrig täcker innehåll.

#Översikt

#Installation

#Konfiguration

#Alternativreferens

#Tema och utseende

#Egen text

#Märka ditt AI-innehåll

#Ensidesapplikationer och ramverk

#Content Security Policy

#Versionshantering och integritet

#Bygga ditt eget upplysningsgränssnitt

#Tillgänglighet