Referenca za odrezek: konfiguracija in prilagajanje

aidisclose.js je skripta na spletnem mestu, ki prebere vaš manifest ai-disclosure.json in upodobi razkritja, ki jih zahteva zakonodaja: interakcijsko pasico za klepetalne robote, trajno obvestilo o vsebini, vidne oznake na označenih medijih in strojno berljive metapodatke strani. Je brez odvisnosti, velika približno 8.2 KB gzipano, in izpolnjuje WCAG 2.1 AA.

Ta stran je celotna referenca za konfiguracijo in prilagajanje. Za korake namestitve po posameznih platformah (WordPress, Shopify, Webflow, upravljalniki oznak) glejte navodila za namestitev. Ta dokument lahko preberete tudi kot surovi markdown.

Pregled

Ena skriptna oznaka poganja vse. Ob nalaganju odrezek pridobi vaš manifest, nato upodobi samo tisto, kar manifest deklarira:

Interakcijska pasica, za sistem conversational: obvestilo, da obiskovalec govori z UI.
Obvestilo o vsebini, za sistem content-generation z scope: site ali scope: page: majhen trajni čip. Klik nanj odpre kratko pojasnilo z besedilom obvestila, vašim imenom založnika in namenom sistema iz manifesta ter povezavo do datoteke manifesta; besedilo obvestila se poveže z razlago v preprostem jeziku na aidisclose.io. Značka "made by humans" odpre isto kartico z imenom založnika.
Oznake po elementih, na katerem koli elementu, ki ga označite z data-ai-content: vidna značka "AI" in strojno berljiv data-digital-source-type.
Metapodatki strani: <link rel="ai-disclosure"> in <meta name="ai-disclosure">, ki kažeta na vaš manifest.
Značka "Made by humans", kadar manifest nastavi noAiDeclared.

Vse spodnje je izbirno. Brez konfiguracije odrezek prebere vaš /.well-known/ai-disclosure.json, upodobi v jeziku obiskovalca v 28 jezikovnih različicah, sledi svetli ali temni nastavitvi operacijskega sistema in se zloži nad znane pasice za privolitev v piškotke, tako da se nikoli ne prekrivata.

Namestitev

Oznako dodajte enkrat v skupno predlogo svojega mesta, glavo teme ali upravljalnik oznak, in se dostavlja z vsako stranjo. Lahko stoji v <head> ali kjer koli pred </body>; je odložena, zato postavitev ne spremeni vedenja:

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

Brez atributov odrezek prebere manifest na https://YOURDOMAIN/.well-known/ai-disclosure.json. Če vaša platforma ne more postreči datoteke v korenu domene, gostite manifest pri AIDisclose in usmerite oznako nanj prek ključa:

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

Če manifesta ni mogoče doseči, odrezek zabeleži opozorilo v konzoli in ne upodobi nobenih obvestil, ki jih poganja manifest, tako da napaka pri pridobivanju nikoli ne prikaže ugibanega obvestila. Metapodatki strani, vaše oznake [data-ai-content] in pasica, vsiljena z data-banner="true", se še vedno upodobijo.

Konfiguracija

Odrezek je mogoče konfigurirati na tri načine. Uporabite tistega, ki ustreza vaši platformi.

1. Atributi na skriptni oznaki. Najpreprostejša pot, brez dodatne kode:

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

2. Globalni konfiguracijski objekt. Definirajte window.AIDiscloseConfig, preden se skripta zažene. Izpostavi celoten nabor možnosti, vključno z možnostmi izbirnika, ki nimajo atributne oblike:

<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. Ročna inicializacija. Dodajte data-manual, da odložite samodejni zagon, nato sami pokličite AIDisclose.init(), ko je vaša aplikacija pripravljena (uporabno v enostranskih aplikacijah):

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

Če je prisoten več kot en vir, prevlada window.AIDiscloseConfig: prepiše tako atribute skriptne oznake kot kateri koli objekt, posredovan v AIDisclose.init().

Referenca možnosti

Nabor možnosti je stabilen za linijo 1.x.

Option	Attribute	Values	Default	Effect
`theme`	`data-theme`	`light`, `dark`, `auto`	`auto`	Barvna shema. `auto` sledi nastavitvi operacijskega sistema obiskovalca.
`siteKey`	`data-aidisclose`	niz	brez	Naloži manifest, gostovan pri AIDisclose, za ta ključ namesto datoteke well-known.
`manifestUrl`	`data-manifest-url`	URL	`/.well-known/ai-disclosure.json`	Prebere manifest z lastnega naslova URL.
`lang`	`data-lang`	koda BCP-47	stran `<html lang>`, sicer jezik obiskovalca	Vsili prikazni jezik.
`banner`	`data-banner`	`true`, `false`	auto	Vsili prikaz ali skritje interakcijske pasice. Če ni nastavljeno, se prikaže samo, kadar vaš manifest deklarira klepetalni (chatbot) sistem.
`persistentChip`	—	`true`, `false`	`true`	Prikaže ali zatre strnjeni mini čip interakcijske pasice (majhna tabletka, na katero se pomanjša).
`alwaysShow`	—	`true`, `false`	`false`	Znova prikaže pasico ob vsakem obisku in prezre obiskovalčevo opustitev (zapomnjeno v `localStorage` brskalnika).
`mountSelector`	—	izbirnik CSS	brez	Upodobi pasico vgrajeno znotraj tega elementa namesto v fiksni prekrivni plasti na dnu.
`triggerSelector`	—	izbirnik CSS	brez	Prikaže interakcijsko pasico šele, ko obiskovalec klikne ta element, na primer zaganjalnik klepeta. Strani brez ujemajočega elementa ne prikažejo pasice, tako da chatbot, ki obstaja na nekaterih straneh, razkriva samo tam. Zaganjalniki, vstavljeni po nalaganju, še vedno delujejo. Obiskovalec, ki je pasico prej opustil, še vedno vidi mini čip.
`adjacentSelector`	—	izbirnik CSS	brez	Postavi oznako poleg elementa, ki ga ne morete označiti neposredno, na primer zaprtega gradnika ali iframe.
`observe`	—	`true`, `false`	`true`	Opazuje DOM za pozneje dodano vsebino in jo označi. Nastavite na `false` na povsem statičnih straneh.
`beaconUrl`	—	URL	brez	Ob pomembnih dogodkih pošlje anonimni signal `{siteKey, flag}`. Brez piškotkov, brez osebnih podatkov.

data-manual ni vrednost možnosti: njegova prisotnost na oznaki odloži samodejni zagon, tako da lahko sami pokličete AIDisclose.init().

Tema in videz

Vgrajeno shemo nastavite z theme (light, dark ali auto). Za natančno ujemanje z vašo znamko prepišite lastne lastnosti CSS odrezka v svoji slogovni datoteki. Definirane so na .aid-banner, .aid-chip:

Variable	Controls
`--aid-bg`	Ozadje
`--aid-fg`	Besedilo
`--aid-line`	Obroba
`--aid-btn`	Obroba gumba za opustitev
`--aid-btnfg`	Besedilo gumba za opustitev
`--aid-hov`	Prehod z miško nad gumbom za opustitev

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

Odrezek ne dostavlja pravil !important in uporablja izbirnike nizke specifičnosti, tako da prevlada vaš CSS. Priključne točke razredov so .aid-banner, .aid-chip, .aid-badge, .aid-badge-inline, .aid-wrap, .aid-ai (obvestilo o vsebini) in .aid-hm ("made by humans"). Razmik, zaokrožitev in senco neposredno preoblikujte na teh.

Privzeto je pasica fiksna prekrivna plast na dnu vidnega polja. Nastavite mountSelector, da jo upodobite vgrajeno in statično znotraj elementa, ki ga nadzirate, tako da se umesti v vašo lastno postavitev.

Lastno besedilo

Pasica in čip privzeto vsebujeta točno lokalizirano besedilo v 28 jezikih. Za prepis besedila:

Po jeziku, v manifestu. Dodajte disclosure.texts v sistem, s ključi po jezikovnih kodah. Odrezek uporabi vaše besedilo za ujemajoči jezik obiskovalca:

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

Po elementu. Dodajte data-ai-label označenemu elementu, da nastavite oznako te značke.

Kadar sistem nastavi editorialResponsibility.humanReview: true in njegova vsebina ni v celoti ustvarjena ali manipulirana z UI, obvestilo samodejno prikaže "AI-assisted, human-reviewed" v jeziku obiskovalca namesto "AI-generated".

Označevanje vaše vsebine UI

Odrezek označi samo tisto, kar označite vi. Dodajte data-ai-content kateremu koli elementu, ustvarjenemu z UI:

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

Vsak označeni element prejme vidno značko "AI" in strojno berljiv data-digital-source-type (privzeto trainedAlgorithmicMedia, vrednost, združljiva z IPTC in schema.org). Za lastno besedilo oznake dodajte data-ai-label ali sami nastavite data-digital-source-type, da bo natančnejši.

Za UI, ki ga ne morete opomiti neposredno, na primer klepetalni gradnik tretje osebe v zaprtem iframe, uporabite adjacentSelector, da postavite oznako poleg njega, ali triggerSelector, da razkrijete interakcijsko pasico, ko se gradnik odpre.

Obvestilo o ustvarjanju vsebine lahko pokriva celotno mesto (disclosure.scope: "site") ali določene strani (disclosure.scope: "page" s seznamom disclosure.pages z vzorci poti, na primer /blog/*). Ujemanje z obsegom strani ima prednost pred ujemanjem z obsegom mesta, sistem z obsegom strani brez ujemajoče poti pa tam ne upodobi ničesar.

Enostranske aplikacije in ogrodja

Odrezek opazuje DOM z MutationObserver in ob spremembah poti ponovno ovrednoti veljavno obvestilo, tako da so vsebina in strani, dodane po nalaganju, še vedno označene. V enostranski aplikaciji (SPA):

Ohranite observe na privzeti vrednosti (true), da se ujame vsebina, upodobljena na strani odjemalca.
Če inicializacijo pogojujete s pripravljenostjo aplikacije, dodajte data-manual in pokličite AIDisclose.init(), ko se vaše ogrodje namesti.
Obvestila z obsegom strani se samodejno posodobijo ob spremembi poti; klic za vsako pot ni potreben.

Nastavite observe: false samo na povsem statičnih straneh, kjer se po nalaganju ne vstavi nič.

Pravilnik o varnosti vsebine

Če uveljavljate pravilnik o varnosti vsebine, izrecno dovolite odrezek.

Pomembno

Strogi script-src 'self' tiho blokira odrezek CDN in razkritja se nikoli ne upodobijo. To je najpogostejši razlog, da pravilno deklarirano mesto ne doseže ravni 2.

script-src: dodajte https://cdn.aidisclose.io ali gostite aidisclose.js na lastnem izvoru in obdržite 'self'.
style-src: odrezek vstavi svoje sloge vgrajeno, zato 'unsafe-inline' zadostuje. Če ne dovolite vgrajenih slogov, se vrne k nalaganju aidisclose.css iz mape skripte, zato v style-src dovolite tudi https://cdn.aidisclose.io (ali to datoteko gostite sami poleg skripte).
connect-src: pridobitev manifesta je pri datoteki well-known z istega izvora in ne potrebuje nič dodatnega. Če manifest nalagate prek ključa, dovolite https://cdn.aidisclose.io.

Manifest se pridobi brez poverilnic, zato ga postrezite javno: končna točka, ki zahteva piškotke ali preverjanje pristnosti, jih ne bo prejela.

Različice in celovitost

CDN postreže tri sledi:

/v1/aidisclose.js sledi najnovejši izdaji 1.x. Priporočeno za večino mest.
/v1.0.0/aidisclose.js je fiksna, nespremenljiva različica, ki jo lahko pripnete, s celovitostjo podvira (Subresource Integrity):

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

/latest/aidisclose.js vedno sledi najnovejši izdaji preko glavnih različic.

Za pridobitev zgoščene vrednosti SRI za pripenjanje zgradite odrezek: npm run build v packages/snippet jo izpiše (izvorna koda je odprta na GitHub).

Gradnja lastnega vmesnika za razkritje

Namesto vgrajenega lahko upodobite lasten vmesnik za razkritje. Enotnega stikala za izklop ni: data-banner="false" in persistentChip: false zatreta samo interakcijsko pasico in njen čip, medtem ko se obvestila o vsebini, značke po elementih [data-ai-content] in značka "made by humans" še vedno upodobijo iz vašega manifesta in oznak. Popolnoma prilagojen vmesnik pomeni, da se nanje ne zanašate in upodobite svojega.

Opomba

Preverjalnik AIDisclose preveri upodobitev z zaznavanjem oznak referenčnega odrezka. Popolnoma ročno izdelano razkritje je veljavno, vendar ni samodejno zaznano, tako da mesto ostane na ravni 1 (Deklarirano) namesto na ravni 2 (Upodobljeno), razen če vaše lastne oznake reproducirajo tisto, kar preverjalnik išče. Če vam je raven 2 pomembna, ohranite vgrajeno upodabljanje in ga preoblikujte s CSS.

Dostopnost

Upodobljeni vmesnik izpolnjuje WCAG 2.1 AA: vidne obrobe :focus-visible na interaktivnih kontrolnikih, pravilne vloge in oznake, kontrast, ki drži v svetli in temni temi, ter animacija, pogojena z prefers-reduced-motion. Odrezek zazna tudi znane pasice za privolitev v piškotke in se zloži nadnje, tako da razkritja niso nikoli skrita za platformo za upravljanje privolitev (CMP). Na zelo ozkih zaslonih se interakcijska pasica odpre kot strnjeni čip, tako da nikoli ne prekrije vsebine.

#Pregled

#Namestitev

#Konfiguracija

#Referenca možnosti

#Tema in videz

#Lastno besedilo

#Označevanje vaše vsebine UI

#Enostranske aplikacije in ogrodja

#Pravilnik o varnosti vsebine

#Različice in celovitost

#Gradnja lastnega vmesnika za razkritje

#Dostopnost