Referenca za isječak: konfiguracija i prilagodba

aidisclose.js skripta je na stranici koja čita vaš manifest ai-disclosure.json i prikazuje objave koje propis zahtijeva: banner o interakciji za chatbotove, trajnu obavijest o sadržaju, vidljive oznake na označenom mediju i strojno čitljive metapodatke stranice. Nema vanjskih ovisnosti, veličine je oko 8.2 KB gzipano i zadovoljava WCAG 2.1 AA.

Ova stranica potpuna je referenca za konfiguraciju i prilagodbu. Za korake instalacije po platformama (WordPress, Shopify, Webflow, upravitelji oznaka) pogledajte vodič za instalaciju. Ovaj dokument možete pročitati i kao neobrađeni markdown.

Pregled

Jedna oznaka skripte pokreće sve. Prilikom učitavanja isječak dohvaća vaš manifest, a zatim prikazuje samo ono što manifest deklarira:

Banner o interakciji za sustav conversational: obavijest da posjetitelj razgovara s umjetnom inteligencijom.
Obavijest o sadržaju za sustav content-generation sa scope: site ili scope: page: mali trajni čip. Klik na njega otvara kratko objašnjenje s tekstom obavijesti, imenom izdavača i namjenom sustava iz manifesta te poveznicom na datoteku manifesta; tekst obavijesti vodi na objašnjenje jednostavnim jezikom na aidisclose.io. Oznaka „izradili ljudi” otvara istu karticu s imenom izdavača.
Oznake po elementu na svakom elementu koji označite s data-ai-content: vidljiva oznaka „AI” uz strojno čitljiv data-digital-source-type.
Metapodaci stranice: <link rel="ai-disclosure"> i <meta name="ai-disclosure"> koji upućuju na vaš manifest.
Oznaka „izradili ljudi” kada manifest postavi noAiDeclared.

Sve u nastavku nije obavezno. Bez ikakve konfiguracije isječak čita vaš /.well-known/ai-disclosure.json, prikazuje se na jeziku posjetitelja na 28 lokalizacija, prati postavku svijetle ili tamne teme operativnog sustava i slaže se iznad poznatih traka za privolu kolačića kako se to dvoje nikada ne bi preklapalo.

Instalacija

Dodajte oznaku jednom, u zajednički predložak stranice, zaglavlje teme ili upravitelj oznaka, i isporučuje se sa svakom stranicom. Može stajati u <head> ili bilo gdje prije </body>; odgođena je, pa smještaj ne mijenja ponašanje:

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

Bez atributa isječak čita manifest na https://YOURDOMAIN/.well-known/ai-disclosure.json. Ako vaša platforma ne može poslužiti datoteku u korijenu domene, poslužite manifest putem AIDisclose i usmjerite oznaku na njega prema ključu:

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

Ako manifest nije dostupan, isječak zapisuje upozorenje u konzolu i ne prikazuje nijednu obavijest vođenu manifestom, pa neuspješno dohvaćanje nikada ne prikaže pretpostavljenu obavijest. Metapodaci stranice, vaše oznake [data-ai-content] i banner prisiljen s data-banner="true" i dalje se prikazuju.

Konfiguracija

Postoje tri načina za konfiguraciju isječka. Upotrijebite onaj koji odgovara vašoj platformi.

1. Atributi na oznaci skripte. Najjednostavniji put, bez dodatnog koda:

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

2. Globalni konfiguracijski objekt. Definirajte window.AIDiscloseConfig prije nego što se skripta pokrene. On izlaže cjelovit skup opcija, uključujući opcije selektora koje nemaju oblik atributa:

<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. Ručna inicijalizacija. Dodajte data-manual za odgodu automatskog pokretanja, a zatim sami pozovite AIDisclose.init() kada je vaša aplikacija spremna (korisno u jednostraničnim aplikacijama):

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

Ako je prisutno više izvora, prevladava window.AIDiscloseConfig: nadjačava i atribute oznake skripte i bilo koji objekt proslijeđen u AIDisclose.init().

Referenca opcija

Skup opcija stabilan je za liniju 1.x.

Opcija	Atribut	Vrijednosti	Zadano	Učinak
`theme`	`data-theme`	`light`, `dark`, `auto`	`auto`	Shema boja. `auto` prati postavku operativnog sustava posjetitelja.
`siteKey`	`data-aidisclose`	niz znakova	nema	Učitaj manifest koji poslužuje AIDisclose za ovaj ključ umjesto well-known datoteke.
`manifestUrl`	`data-manifest-url`	URL	`/.well-known/ai-disclosure.json`	Čitaj manifest s prilagođenog URL-a.
`lang`	`data-lang`	BCP-47 kod	atribut stranice `<html lang>`, inače jezik posjetitelja	Nametni jezik prikaza.
`banner`	`data-banner`	`true`, `false`	auto	Nametni uključivanje ili isključivanje bannera o interakciji. Ostavljen nepostavljen, prikazuje se samo kada vaš manifest deklarira razgovorni (chatbot) sustav.
`persistentChip`	—	`true`, `false`	`true`	Prikaži ili sakrij sažeti mini-čip bannera o interakciji (mala pilula na koju se banner smanjuje).
`alwaysShow`	—	`true`, `false`	`false`	Prikaži banner ponovno pri svakom posjetu, zanemarujući ranije zatvaranje posjetitelja (zapamćeno u `localStorage` preglednika).
`mountSelector`	—	CSS selektor	nema	Prikaži banner ugrađeno unutar ovog elementa umjesto kao fiksni sloj pri dnu.
`triggerSelector`	—	CSS selektor	nema	Prikaži banner o interakciji tek nakon što posjetitelj klikne na ovaj element, primjerice pokretač razgovora. Stranice bez odgovarajućeg elementa ne prikazuju banner, pa chatbot koji postoji na nekim stranicama objavu prikazuje samo ondje. Pokretači umetnuti nakon učitavanja i dalje rade. Posjetitelj koji je ranije zatvorio banner i dalje vidi mini-čip.
`adjacentSelector`	—	CSS selektor	nema	Postavi oznaku pokraj elementa koji ne možete izravno označiti, poput zatvorenog widgeta ili iframea.
`observe`	—	`true`, `false`	`true`	Prati DOM za sadržajem dodanim naknadno i označava ga. Postavite na `false` na potpuno statičnim stranicama.
`beaconUrl`	—	URL	nema	Pošalji anonimni signal `{siteKey, flag}` pri značajnim događajima. Bez kolačića, bez osobnih podataka.

data-manual nije vrijednost opcije: njegova prisutnost na oznaci odgađa automatsko pokretanje kako biste sami mogli pozvati AIDisclose.init().

Tematiziranje i izgled

Postavite ugrađenu shemu s theme (light, dark ili auto). Za točno poklapanje s vašom robnom markom nadjačajte prilagođena CSS svojstva isječka u vlastitom stilskom listu. Definirana su na .aid-banner, .aid-chip:

Varijabla	Kontrolira
`--aid-bg`	Pozadinu
`--aid-fg`	Tekst
`--aid-line`	Obrub
`--aid-btn`	Obrub gumba za odbacivanje
`--aid-btnfg`	Tekst gumba za odbacivanje
`--aid-hov`	Prijelaz mišem preko gumba za odbacivanje

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

Isječak ne isporučuje nijedno !important pravilo i koristi selektore niske specifičnosti, pa vaš CSS prevladava. Klasne poveznice su .aid-banner, .aid-chip, .aid-badge, .aid-badge-inline, .aid-wrap, .aid-ai (obavijest o sadržaju) i .aid-hm („izradili ljudi”). Razmak, zaobljenje i sjenu izravno prilagodite na njima.

Prema zadanome banner je fiksni sloj pri dnu vidljivog područja. Postavite mountSelector kako bi se prikazivao ugrađeno i statično unutar elementa koji nadzirete, tako da stoji unutar vašeg rasporeda.

Prilagođeni tekst

Banner i čip nose točan lokalizirani tekst na 28 jezika bez dodatnog rada. Za nadjačavanje teksta:

Po jeziku, u manifestu. Dodajte disclosure.texts sustavu, prema kodu jezika. Isječak koristi vaš tekst za odgovarajući jezik posjetitelja:

{
  "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čenom elementu kako biste postavili tekst oznake.

Kada sustav postavi editorialResponsibility.humanReview: true, a njegov sadržaj nije u potpunosti generiran ili obrađen umjetnom inteligencijom, obavijest automatski glasi „uz pomoć umjetne inteligencije, pregledao čovjek” na jeziku posjetitelja, umjesto „generirala umjetna inteligencija”.

Označavanje sadržaja umjetne inteligencije

Isječak označava samo ono što vi označite. Dodajte data-ai-content svakom elementu generiranom umjetnom inteligencijom:

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

Svaki označeni element dobiva vidljivu oznaku „AI” i strojno čitljiv data-digital-source-type (zadano trainedAlgorithmicMedia, vrijednost kompatibilna s IPTC i schema.org). Dodajte data-ai-label za prilagođeni tekst oznake ili sami postavite data-digital-source-type da budete precizniji.

Za umjetnu inteligenciju koju ne možete izravno anotirati, poput widgeta za razgovor treće strane u zatvorenom iframeu, upotrijebite adjacentSelector da postavite oznaku pokraj njega ili triggerSelector da otkrijete banner o interakciji kada se widget otvori.

Obavijest o generiranju sadržaja može obuhvatiti cijelu stranicu (disclosure.scope: "site") ili određene stranice (disclosure.scope: "page" s popisom disclosure.pages uzoraka putanja, poput /blog/*). Poklapanje na razini stranice ima prednost pred onim na razini cijele stranice, a sustav na razini stranice bez odgovarajuće putanje ondje ne prikazuje ništa.

Jednostranične aplikacije i okviri

Isječak prati DOM pomoću MutationObserver i ponovno procjenjuje primjenjivu obavijest pri promjeni rute, pa se sadržaj i stranice dodane nakon učitavanja i dalje označavaju. U SPA aplikaciji:

Zadržite observe na zadanoj vrijednosti (true) kako bi se uhvatio sadržaj prikazan na klijentu.
Ako inicijalizaciju uvjetujete spremnošću aplikacije, dodajte data-manual i pozovite AIDisclose.init() nakon što se vaš okvir montira.
Obavijesti na razini stranice ažuriraju se automatski kako se ruta mijenja; poziv po ruti nije potreban.

Postavite observe: false samo na potpuno statičnim stranicama gdje se ništa ne umeće nakon učitavanja.

Pravila sigurnosti sadržaja

Ako primjenjujete pravila sigurnosti sadržaja (Content Security Policy), izričito dopustite isječak.

Važno

Strogi script-src 'self' tiho blokira isječak s CDN-a i objave se nikada ne prikazuju. To je najčešći razlog zašto ispravno deklarirana stranica ne dosegne razinu 2.

script-src: dodajte https://cdn.aidisclose.io ili poslužite aidisclose.js s vlastitog izvora i zadržite 'self'.
style-src: isječak umeće svoje stilove ugrađeno, pa je 'unsafe-inline' dovoljno. Ako ne dopuštate ugrađene stilove, isječak se vraća na učitavanje aidisclose.css iz direktorija skripte, pa također dopustite https://cdn.aidisclose.io u style-src (ili sami poslužite tu datoteku uz skriptu).
connect-src: dohvaćanje manifesta ima isti izvor za well-known datoteku i ne treba ništa dodatno. Ako manifest učitavate prema ključu, dopustite https://cdn.aidisclose.io.

Manifest se dohvaća bez vjerodajnica, pa ga poslužite javno: krajnja točka koja zahtijeva kolačiće ili autentikaciju neće ih primiti.

Upravljanje verzijama i integritet

CDN poslužuje tri kanala:

/v1/aidisclose.js prati najnovije izdanje linije 1.x. Preporučeno za većinu stranica.
/v1.0.0/aidisclose.js fiksna je, nepromjenjiva verzija koju možete prikvačiti, uz Subresource Integrity:

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

/latest/aidisclose.js uvijek prati najnovije izdanje kroz glavne verzije.

Da biste dobili SRI raspršenje (hash) za prikvačivanje, izgradite isječak: npm run build u packages/snippet ga ispisuje (izvor je otvoren na GitHubu).

Izrada vlastitog sučelja za objavu

Umjesto ugrađenog sučelja možete prikazati vlastito sučelje za objavu. Ne postoji jedinstveni prekidač za isključivanje: data-banner="false" i persistentChip: false potiskuju samo banner o interakciji i njegov čip, dok se obavijesti o sadržaju, oznake po elementu [data-ai-content] i oznaka „izradili ljudi” i dalje prikazuju iz vašeg manifesta i oznaka. Potpuno prilagođeno sučelje znači da se ne oslanjate na njih i da prikazujete vlastito.

Napomena

AIDisclose provjeritelj potvrđuje prikaz otkrivanjem oznaka referentnog isječka. Potpuno ručno izrađena objava valjana je, ali se ne otkriva automatski, pa stranica ostaje na razini 1 (Prijavljeno) umjesto na razini 2 (Prikazano), osim ako vaše prilagođene oznake ne reproduciraju ono što provjeritelj traži. Ako vam je razina 2 važna, zadržite ugrađeni prikaz i preoblikujte ga pomoću CSS-a.

Pristupačnost

Prikazano sučelje zadovoljava WCAG 2.1 AA: vidljivi :focus-visible obrisi na interaktivnim kontrolama, ispravne uloge i oznake, kontrast koji se održava u svijetloj i tamnoj temi te animacija uvjetovana s prefers-reduced-motion. Isječak također otkriva poznate trake za privolu kolačića i slaže se iznad njih kako objave nikada ne bi bile skrivene iza CMP-a. Na vrlo uskim zaslonima banner o interakciji otvara se kao sažeti čip pa nikada ne prekriva sadržaj.

#Pregled

#Instalacija

#Konfiguracija

#Referenca opcija

#Tematiziranje i izgled

#Prilagođeni tekst

#Označavanje sadržaja umjetne inteligencije

#Jednostranične aplikacije i okviri

#Pravila sigurnosti sadržaja

#Upravljanje verzijama i integritet

#Izrada vlastitog sučelja za objavu

#Pristupačnost