Snippet-reference: konfigurer og tilpas

aidisclose.js er scriptet på webstedet, der læser dit ai-disclosure.json-manifest og gengiver de oplysninger, loven kræver: et interaktionsbanner til chatbots, en vedvarende indholdsnotits, synlige mærker på markeret medieindhold og maskinlæsbare sidemetadata. Det er afhængighedsfrit, cirka 8.2 KB gzippet, og opfylder WCAG 2.1 AA.

Denne side er den fulde reference til konfiguration og tilpasning. For installationstrin platform for platform (WordPress, Shopify, Webflow, tag managers) henvises til installationsvejledningen. Du kan også læse dette dokument som rå markdown.

Oversigt

Ét script-tag styrer det hele. Ved indlæsning henter snippet'et dit manifest og gengiver derefter kun det, manifestet deklarerer:

Interaktionsbanner, for et conversational-system: en notits om, at den besøgende taler med en AI.
Indholdsnotits, for et content-generation-system med scope: site eller scope: page: en lille vedvarende chip. Et klik åbner en kort forklaring med notitsteksten, dit udgivernavn og systemets formål fra manifestet samt et link til manifestfilen. Notitsteksten linker til en forklaring i almindeligt sprog på aidisclose.io. Mærket "lavet af mennesker" åbner det samme kort med udgivernavnet.
Mærker pr. element, på ethvert element du markerer med data-ai-content: et synligt "AI"-mærke plus et maskinlæsbart data-digital-source-type.
Sidemetadata: et <link rel="ai-disclosure"> og <meta name="ai-disclosure">, der peger på dit manifest.
Mærket "lavet af mennesker", når manifestet angiver noAiDeclared.

Alt nedenstående er valgfrit. Uden nogen konfiguration læser snippet'et dit /.well-known/ai-disclosure.json, gengiver på den besøgendes sprog på tværs af 28 sprog, følger operativsystemets lyse eller mørke indstilling og placerer sig over kendte cookie-samtykkebjælker, så de to aldrig overlapper.

Installation

Tilføj tagget én gang, i webstedets fælles skabelon, temaets header eller din tag manager, så følger det med på hver side. Det kan sidde i <head> eller hvor som helst før </body>. Det er udskudt (deferred), så placeringen ændrer ikke adfærden:

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

Uden attributter læser snippet'et manifestet på https://YOURDOMAIN/.well-known/ai-disclosure.json. Hvis din platform ikke kan levere en fil på domænets rod, så host manifestet hos AIDisclose og peg tagget mod det via nøgle:

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

Hvis manifestet ikke kan nås, logger snippet'et en advarsel i konsollen og gengiver ingen manifeststyrede notitser, så en mislykket hentning aldrig viser en gættet notits. Sidemetadata, dine [data-ai-content]-mærker og et banner, der er tvunget med data-banner="true", gengives fortsat.

Konfiguration

Der er tre måder at konfigurere snippet'et på. Brug den, der passer til din platform.

1. Attributter på script-tagget. Den enkleste vej, uden ekstra kode:

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

2. Et globalt konfigurationsobjekt. Definér window.AIDiscloseConfig, før scriptet kører. Det giver adgang til hele sættet af indstillinger, herunder de selektor-indstillinger, der ikke har nogen 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. Manuel initialisering. Tilføj data-manual for at udskyde automatisk start, og kald derefter selv AIDisclose.init(), når din app er klar (nyttigt i single-page-apps):

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

Hvis der er mere end én kilde til stede, vinder window.AIDiscloseConfig: den tilsidesætter både attributterne på script-tagget og ethvert objekt, der sendes til AIDisclose.init().

Oversigt over indstillinger

Sættet af indstillinger er stabilt for hele 1.x-linjen.

Option	Attribute	Values	Default	Effect
`theme`	`data-theme`	`light`, `dark`, `auto`	`auto`	Farveskema. `auto` følger den besøgendes OS-indstilling.
`siteKey`	`data-aidisclose`	streng	ingen	Indlæs det AIDisclose-hostede manifest for denne nøgle i stedet for well-known-filen.
`manifestUrl`	`data-manifest-url`	URL	`/.well-known/ai-disclosure.json`	Læs manifestet fra en brugerdefineret URL.
`lang`	`data-lang`	BCP-47-kode	side-`<html lang>`, ellers den besøgendes sprog	Fremtving et visningssprog.
`banner`	`data-banner`	`true`, `false`	auto	Tving interaktionsbanneret til eller fra. Uden angivelse vises det kun, når dit manifest deklarerer et samtalebaseret (chatbot) system.
`persistentChip`	—	`true`, `false`	`true`	Vis eller skjul interaktionsbannerets sammenklappede mini-chip (den lille pille, det minimeres til).
`alwaysShow`	—	`true`, `false`	`false`	Vis banneret igen ved hvert besøg, uanset at den besøgende har lukket det (husket i browserens `localStorage`).
`mountSelector`	—	CSS-selektor	ingen	Gengiv banneret indlejret i dette element i stedet for det fastgjorte overlay i bunden.
`triggerSelector`	—	CSS-selektor	ingen	Vis kun interaktionsbanneret, efter at den besøgende klikker på dette element, for eksempel en chat-udløser. Sider uden et matchende element viser intet banner, så en chatbot, der findes på nogle sider, oplyses kun der. Udløsere, der indsættes efter indlæsning, virker fortsat. En besøgende, der tidligere lukkede banneret, ser stadig mini-chippen.
`adjacentSelector`	—	CSS-selektor	ingen	Placér et mærke ved siden af et element, du ikke kan markere direkte, for eksempel en lukket widget eller en iframe.
`observe`	—	`true`, `false`	`true`	Overvåg DOM'en for indhold, der tilføjes senere, og mærk det. Sæt til `false` på fuldt statiske sider.
`beaconUrl`	—	URL	ingen	Send en anonym `{siteKey, flag}`-beacon ved bemærkelsesværdige hændelser. Ingen cookies, ingen personoplysninger.

data-manual er ikke en indstillingsværdi: dens tilstedeværelse på tagget udskyder automatisk start, så du selv kan kalde AIDisclose.init().

Tema og udseende

Angiv det indbyggede skema med theme (light, dark eller auto). For at ramme dit brand præcist kan du tilsidesætte snippet'ets brugerdefinerede CSS-egenskaber i dit eget stylesheet. De er defineret på .aid-banner, .aid-chip:

Variable	Controls
`--aid-bg`	Baggrund
`--aid-fg`	Tekst
`--aid-line`	Kant
`--aid-btn`	Kant på luk-knap
`--aid-btnfg`	Tekst på luk-knap
`--aid-hov`	Hover på luk-knap

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

Snippet'et leverer ingen !important-regler og bruger selektorer med lav specificitet, så din CSS vinder. Klasse-hooks er .aid-banner, .aid-chip, .aid-badge, .aid-badge-inline, .aid-wrap, .aid-ai (indholdsnotits) og .aid-hm ("lavet af mennesker"). Ret afstand, radius og skygge direkte på disse.

Som standard er banneret et fastgjort overlay i bunden af viewporten. Sæt mountSelector for at gengive det indlejret og statisk inde i et element, du styrer, så det sidder inden for dit eget layout.

Egen tekst

Banneret og chippen har præcis, lokaliseret tekst på 28 sprog fra start. Sådan tilsidesætter du teksten:

Pr. sprog, i manifestet. Tilføj disclosure.texts til et system, nøglet efter sprogkode. Snippet'et bruger din tekst til den matchende besøgendes sprog:

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

Pr. element. Tilføj data-ai-label til et markeret element for at angive mærkets tekst.

Når et system angiver editorialResponsibility.humanReview: true, og indholdet ikke er fuldt AI-genereret eller manipuleret, læser notitsen automatisk "AI-assisteret, gennemgået af mennesker" på den besøgendes sprog i stedet for "AI-genereret".

Markering af dit AI-indhold

Snippet'et mærker kun det, du markerer. Tilføj data-ai-content til ethvert AI-genereret 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>

Hvert markeret element får et synligt "AI"-mærke og et maskinlæsbart data-digital-source-type (som standard trainedAlgorithmicMedia, en værdi kompatibel med IPTC og schema.org). Tilføj data-ai-label for egen mærketekst, eller angiv selv data-digital-source-type for at være mere specifik.

For AI, du ikke kan annotere direkte, for eksempel en tredjeparts chat-widget i en lukket iframe, kan du bruge adjacentSelector til at placere et mærke ved siden af den, eller triggerSelector til at vise interaktionsbanneret, når widget'en åbnes.

En notits om indholdsgenerering kan dække hele webstedet (disclosure.scope: "site") eller bestemte sider (disclosure.scope: "page" med en disclosure.pages-liste af sti-globs, for eksempel /blog/*). Et match på sideniveau har forrang over et på webstedsniveau, og et system på sideniveau uden en matchende sti gengiver intet der.

Single-page-apps og frameworks

Snippet'et overvåger DOM'en med en MutationObserver og revurderer den gældende notits ved rute-ændringer, så indhold og sider, der tilføjes efter indlæsning, stadig mærkes. I en SPA:

Behold observe på standardværdien (true), så klient-gengivet indhold fanges.
Hvis du betinger initialisering af, at app'en er klar, så tilføj data-manual og kald AIDisclose.init(), efter dit framework er monteret.
Notitser på sideniveau opdateres automatisk, når ruten ændres. Der er ikke behov for et kald pr. rute.

Sæt kun observe: false på fuldt statiske sider, hvor intet indsættes efter indlæsning.

Content Security Policy

Hvis du håndhæver en Content Security Policy, skal du tillade snippet'et eksplicit.

Vigtigt

En streng script-src 'self' blokerer CDN-snippet'et lydløst, og oplysningerne gengives aldrig. Dette er den mest almindelige grund til, at et korrekt deklareret websted ikke når Niveau 2.

script-src: tilføj https://cdn.aidisclose.io, eller host aidisclose.js selv fra din egen origin og behold 'self'.
style-src: snippet'et indsætter sine stilarter inline, så 'unsafe-inline' er tilstrækkeligt. Hvis du ikke tillader inline-stilarter, falder det tilbage til at indlæse aidisclose.css fra scriptets mappe, så tillad også https://cdn.aidisclose.io i style-src (eller host den fil selv sammen med scriptet).
connect-src: hentningen af manifestet er samme-origin for well-known-filen og kræver intet ekstra. Hvis du indlæser manifestet via nøgle, skal du tillade https://cdn.aidisclose.io.

Manifestet hentes uden legitimationsoplysninger, så udgiv det offentligt: et endpoint, der kræver cookies eller godkendelse, modtager dem ikke.

Versionering og integritet

CDN'et leverer tre spor:

/v1/aidisclose.js følger den nyeste 1.x-udgivelse. Anbefales til de fleste websteder.
/v1.0.0/aidisclose.js er en fast, uforanderlig version, du kan pinne, med Subresource Integrity:

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

/latest/aidisclose.js sporer altid den nyeste udgivelse på tværs af hovedversioner.

For at få SRI-hashen til at pinne skal du bygge snippet'et: npm run build i packages/snippet udskriver den (kildekoden er åben på GitHub).

Byg din egen oplysnings-UI

Du kan gengive din egen oplysnings-UI i stedet for den indbyggede. Der er ingen enkelt slukknap: data-banner="false" og persistentChip: false skjuler kun interaktionsbanneret og dets chip, mens indholdsnotitser, mærker pr. element [data-ai-content] og mærket "lavet af mennesker" fortsat gengives ud fra dit manifest og din opmærkning. En fuldt tilpasset UI betyder, at du ikke bruger disse og i stedet gengiver din egen.

Bemærk

AIDisclose-tjekkeren verificerer gengivelse ved at registrere referencesnippet'ets opmærkning. En fuldt håndbygget oplysning er gyldig, men den registreres ikke automatisk, så webstedet forbliver på Niveau 1 (Deklareret) i stedet for Niveau 2 (Gengivet), medmindre din egen opmærkning gengiver det, tjekkeren leder efter. Hvis Niveau 2 er vigtigt for dig, så behold den indbyggede gengivelse og giv den nyt udseende med CSS.

Tilgængelighed

Den gengivne UI opfylder WCAG 2.1 AA: synlige :focus-visible-konturer på interaktive kontroller, korrekte roller og labels, kontrast der holder i lyst og mørkt, og animation styret bag prefers-reduced-motion. Snippet'et registrerer også kendte cookie-samtykkebjælker og placerer sig over dem, så oplysninger aldrig skjules bag en CMP. På meget smalle skærme åbner interaktionsbanneret som den kompakte chip, så det aldrig dækker indhold.

#Oversigt

#Installation

#Konfiguration

#Oversigt over indstillinger

#Tema og udseende

#Egen tekst

#Markering af dit AI-indhold

#Single-page-apps og frameworks

#Content Security Policy

#Versionering og integritet

#Byg din egen oplysnings-UI

#Tilgængelighed