स्निपेट संदर्भ: विन्यस्त और अनुकूलित करें

aidisclose.js वह साइट-पर-मौजूद स्क्रिप्ट है जो आपके ai-disclosure.json मैनिफ़ेस्ट को पढ़ती है और कानून द्वारा आवश्यक प्रकटीकरण प्रस्तुत करती है: चैटबॉट के लिए एक इंटरैक्शन बैनर, एक स्थायी सामग्री सूचना, चिह्नित मीडिया पर दृश्य लेबल, और मशीन-पठनीय पृष्ठ मेटाडेटा। यह निर्भरता-मुक्त है, gzip के साथ लगभग 8.2 KB, और WCAG 2.1 AA को पूरा करता है।

यह पृष्ठ पूर्ण विन्यास और अनुकूलन संदर्भ है। प्लेटफ़ॉर्म-दर-प्लेटफ़ॉर्म इंस्टॉल चरणों (WordPress, Shopify, Webflow, टैग प्रबंधक) के लिए, इंस्टॉल गाइड देखें। आप इस दस्तावेज़ को कच्चे markdown के रूप में भी पढ़ सकते हैं।

अवलोकन

एक स्क्रिप्ट टैग सब कुछ चलाता है। लोड होने पर स्निपेट आपका मैनिफ़ेस्ट प्राप्त करता है, फिर केवल वही प्रस्तुत करता है जो मैनिफ़ेस्ट घोषित करता है:

इंटरैक्शन बैनर, किसी conversational सिस्टम के लिए: एक सूचना कि आगंतुक किसी एआई से बात कर रहा है।
सामग्री सूचना, scope: site या scope: page वाले किसी content-generation सिस्टम के लिए: एक छोटा स्थायी चिप। इस पर क्लिक करने से एक संक्षिप्त व्याख्या खुलती है जिसमें सूचना का टेक्स्ट, मैनिफ़ेस्ट से आपका प्रकाशक नाम और सिस्टम का उद्देश्य, और मैनिफ़ेस्ट फ़ाइल का लिंक होता है; सूचना का टेक्स्ट aidisclose.io पर एक सरल-भाषा व्याख्याकार से जुड़ता है। "made by humans" बैज उसी कार्ड को प्रकाशक नाम के साथ खोलता है।
प्रति-तत्व लेबल, किसी भी ऐसे तत्व पर जिसे आप data-ai-content से चिह्नित करते हैं: एक दृश्य "AI" बैज, साथ ही एक मशीन-पठनीय data-digital-source-type।
पृष्ठ मेटाडेटा: एक <link rel="ai-disclosure"> और <meta name="ai-disclosure"> जो आपके मैनिफ़ेस्ट की ओर इंगित करते हैं।
"Made by humans" बैज, जब मैनिफ़ेस्ट noAiDeclared सेट करता है।

नीचे दिया गया सब कुछ वैकल्पिक है। बिना किसी विन्यास के स्निपेट आपका /.well-known/ai-disclosure.json पढ़ता है, आगंतुक की भाषा में 28 लोकेल में प्रस्तुत होता है, ऑपरेटिंग सिस्टम की हल्की या गहरी वरीयता का अनुसरण करता है, और ज्ञात कुकी-सहमति बार के ऊपर व्यवस्थित होता है ताकि दोनों कभी ओवरलैप न हों।

इंस्टॉल

टैग को एक बार जोड़ें, अपनी साइट के साझा टेम्पलेट, थीम हेडर, या टैग प्रबंधक में, और यह हर पृष्ठ के साथ भेजा जाता है। यह <head> में या </body> से पहले कहीं भी रह सकता है; यह स्थगित है, इसलिए स्थान व्यवहार नहीं बदलता:

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

बिना किसी एट्रिब्यूट के स्निपेट https://YOURDOMAIN/.well-known/ai-disclosure.json पर मैनिफ़ेस्ट पढ़ता है। यदि आपका प्लेटफ़ॉर्म डोमेन रूट पर कोई फ़ाइल नहीं परोस सकता, तो मैनिफ़ेस्ट को AIDisclose के साथ होस्ट करें और टैग को कुंजी द्वारा उसकी ओर इंगित करें:

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

यदि मैनिफ़ेस्ट तक नहीं पहुँचा जा सकता, तो स्निपेट एक कंसोल चेतावनी लॉग करता है और कोई मैनिफ़ेस्ट-चालित सूचना प्रस्तुत नहीं करता, इसलिए फ़ेच विफलता कभी अनुमानित सूचना नहीं दिखाती। पृष्ठ मेटाडेटा, आपके [data-ai-content] लेबल, और data-banner="true" के साथ बाध्य किया गया बैनर फिर भी प्रस्तुत होते हैं।

विन्यास

स्निपेट को विन्यस्त करने के तीन तरीके हैं। जो भी आपके प्लेटफ़ॉर्म के अनुकूल हो, उसका उपयोग करें।

1. स्क्रिप्ट टैग पर एट्रिब्यूट। सबसे सरल मार्ग, कोई अतिरिक्त कोड नहीं:

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

2. एक ग्लोबल विन्यास ऑब्जेक्ट। स्क्रिप्ट चलने से पहले window.AIDiscloseConfig परिभाषित करें। यह पूर्ण विकल्प सेट को उजागर करता है, जिसमें वे चयनकर्ता विकल्प भी शामिल हैं जिनका कोई एट्रिब्यूट रूप नहीं है:

<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. मैनुअल इनिशियलाइज़ेशन। स्वतः-शुरुआत को स्थगित करने के लिए data-manual जोड़ें, फिर अपना ऐप तैयार होने पर स्वयं AIDisclose.init() को कॉल करें (सिंगल-पेज ऐप में उपयोगी):

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

यदि एक से अधिक स्रोत मौजूद हों, तो window.AIDiscloseConfig जीतता है: यह स्क्रिप्ट-टैग एट्रिब्यूट और AIDisclose.init() को पास किए गए किसी भी ऑब्जेक्ट दोनों को अधिरोहित करता है।

विकल्प संदर्भ

विकल्प सतह 1.x शृंखला के लिए स्थिर है।

Option	Attribute	Values	Default	Effect
`theme`	`data-theme`	`light`, `dark`, `auto`	`auto`	रंग योजना। `auto` आगंतुक की OS वरीयता का अनुसरण करता है।
`siteKey`	`data-aidisclose`	स्ट्रिंग	कोई नहीं	well-known फ़ाइल के बजाय इस कुंजी के लिए AIDisclose-होस्टेड मैनिफ़ेस्ट लोड करें।
`manifestUrl`	`data-manifest-url`	URL	`/.well-known/ai-disclosure.json`	किसी कस्टम URL से मैनिफ़ेस्ट पढ़ें।
`lang`	`data-lang`	BCP-47 कोड	पृष्ठ का `<html lang>`, अन्यथा आगंतुक की भाषा	प्रदर्शन भाषा बाध्य करें।
`banner`	`data-banner`	`true`, `false`	auto	इंटरैक्शन बैनर को चालू या बंद बाध्य करें। अनसेट छोड़ने पर, यह केवल तब दिखता है जब आपका मैनिफ़ेस्ट किसी conversational (चैटबॉट) सिस्टम की घोषणा करता है।
`persistentChip`	—	`true`, `false`	`true`	इंटरैक्शन बैनर की समेटी गई मिनी-चिप (वह छोटी पिल जिसमें यह न्यूनतम होता है) दिखाएँ या दबाएँ।
`alwaysShow`	—	`true`, `false`	`false`	आगंतुक की खारिजी (ब्राउज़र के `localStorage` में याद रखी गई) की अनदेखी करते हुए हर बार आने पर बैनर फिर से दिखाएँ।
`mountSelector`	—	CSS चयनकर्ता	कोई नहीं	निश्चित तल ओवरले के बजाय इस तत्व के अंदर बैनर को इनलाइन प्रस्तुत करें।
`triggerSelector`	—	CSS चयनकर्ता	कोई नहीं	इंटरैक्शन बैनर केवल तभी दिखाएँ जब आगंतुक इस तत्व पर क्लिक करे, जैसे कोई चैट लॉन्चर। जिन पृष्ठों पर कोई मिलान तत्व नहीं होता वे कोई बैनर नहीं दिखाते, इसलिए जो चैटबॉट कुछ पृष्ठों पर मौजूद होता है वह केवल वहीं प्रकट होता है। लोड के बाद इंजेक्ट किए गए लॉन्चर फिर भी काम करते हैं। जिस आगंतुक ने पहले बैनर खारिज कर दिया था, उसे अब भी मिनी-चिप दिखती है।
`adjacentSelector`	—	CSS चयनकर्ता	कोई नहीं	किसी ऐसे तत्व के बगल में लेबल रखें जिसे आप सीधे चिह्नित नहीं कर सकते, जैसे कोई बंद विजेट या कोई iframe।
`observe`	—	`true`, `false`	`true`	बाद में जोड़ी गई सामग्री के लिए DOM पर नज़र रखें और उसे लेबल करें। पूरी तरह स्थिर पृष्ठों पर `false` सेट करें।
`beaconUrl`	—	URL	कोई नहीं	उल्लेखनीय घटनाओं पर एक अनाम `{siteKey, flag}` बीकन पोस्ट करें। कोई कुकी नहीं, कोई व्यक्तिगत डेटा नहीं।

data-manual कोई विकल्प मान नहीं है: टैग पर इसकी उपस्थिति स्वतः-शुरुआत को स्थगित करती है ताकि आप स्वयं AIDisclose.init() को कॉल कर सकें।

थीमन और रूप-रंग

अंतर्निहित योजना को theme (light, dark, या auto) से सेट करें। अपने ब्रांड से बिल्कुल मेल खाने के लिए, अपनी स्वयं की स्टाइलशीट में स्निपेट के CSS कस्टम गुणों को अधिरोहित करें। वे .aid-banner, .aid-chip पर परिभाषित हैं:

Variable	नियंत्रण
`--aid-bg`	पृष्ठभूमि
`--aid-fg`	टेक्स्ट
`--aid-line`	किनारा
`--aid-btn`	खारिज-बटन का किनारा
`--aid-btnfg`	खारिज-बटन का टेक्स्ट
`--aid-hov`	खारिज-बटन का होवर

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

स्निपेट कोई !important नियम नहीं भेजता और निम्न-विशिष्टता वाले चयनकर्ताओं का उपयोग करता है, इसलिए आपका CSS जीतता है। क्लास हुक हैं .aid-banner, .aid-chip, .aid-badge, .aid-badge-inline, .aid-wrap, .aid-ai (सामग्री सूचना), और .aid-hm ("made by humans")। इन पर सीधे स्पेसिंग, त्रिज्या, और छाया को फिर से स्टाइल करें।

डिफ़ॉल्ट रूप से बैनर व्यूपोर्ट के तल पर एक निश्चित ओवरले होता है। इसे किसी ऐसे तत्व के अंदर, जिसे आप नियंत्रित करते हैं, इनलाइन और स्थिर प्रस्तुत करने के लिए mountSelector सेट करें, ताकि यह आपके अपने लेआउट के भीतर बैठे।

कस्टम शब्दावली

बैनर और चिप बॉक्स से बाहर ही 28 भाषाओं में सटीक स्थानीयकृत टेक्स्ट ले जाते हैं। शब्दावली को अधिरोहित करने के लिए:

प्रति भाषा, मैनिफ़ेस्ट में। किसी सिस्टम में disclosure.texts जोड़ें, जो भाषा कोड द्वारा कुंजित हो। स्निपेट मिलान करने वाली आगंतुक भाषा के लिए आपके टेक्स्ट का उपयोग करता है:

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

प्रति तत्व। उस बैज का लेबल सेट करने के लिए किसी चिह्नित तत्व में data-ai-label जोड़ें।

जब कोई सिस्टम editorialResponsibility.humanReview: true सेट करता है और उसकी सामग्री पूरी तरह एआई-जनित या हेरफेर की गई नहीं होती, तो सूचना आगंतुक की भाषा में स्वतः "AI-generated" के बजाय "AI-assisted, human-reviewed" पढ़ती है।

अपनी एआई सामग्री को चिह्नित करना

स्निपेट केवल उसी को लेबल करता है जिसे आप चिह्नित करते हैं। किसी भी एआई-जनित तत्व में data-ai-content जोड़ें:

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

प्रत्येक चिह्नित तत्व को एक दृश्य "AI" बैज और एक मशीन-पठनीय data-digital-source-type (डिफ़ॉल्ट रूप से trainedAlgorithmicMedia, एक IPTC और schema.org संगत मान) मिलता है। कस्टम लेबल टेक्स्ट के लिए data-ai-label जोड़ें, या अधिक विशिष्ट होने के लिए data-digital-source-type स्वयं सेट करें।

जिस एआई को आप सीधे टिप्पणित नहीं कर सकते, जैसे किसी बंद iframe में कोई तृतीय-पक्ष चैट विजेट, उसके लिए उसके बगल में लेबल रखने हेतु adjacentSelector का उपयोग करें, या विजेट खुलने पर इंटरैक्शन बैनर प्रकट करने हेतु triggerSelector का उपयोग करें।

कोई सामग्री-निर्माण सूचना पूरी साइट (disclosure.scope: "site") या विशिष्ट पृष्ठों (disclosure.scope: "page" के साथ पथ ग्लोब की disclosure.pages सूची, जैसे /blog/*) को कवर कर सकती है। पृष्ठ-स्कोप मिलान साइट-स्कोप वाले पर प्राथमिकता लेता है, और बिना किसी मिलान पथ वाला पृष्ठ-स्कोप सिस्टम वहाँ कुछ भी प्रस्तुत नहीं करता।

सिंगल-पेज ऐप और फ़्रेमवर्क

स्निपेट MutationObserver के साथ DOM पर नज़र रखता है और रूट परिवर्तनों पर लागू सूचना का पुनर्मूल्यांकन करता है, इसलिए लोड के बाद जोड़ी गई सामग्री और पृष्ठ फिर भी लेबल किए जाते हैं। किसी SPA में:

क्लाइंट-प्रस्तुत सामग्री पकड़ी जाए, इसके लिए observe को उसके डिफ़ॉल्ट (true) पर रखें।
यदि आप इनिशियलाइज़ेशन को ऐप की तैयारी पर आधारित रखते हैं, तो data-manual जोड़ें और अपने फ़्रेमवर्क के माउंट होने के बाद AIDisclose.init() को कॉल करें।
रूट बदलने पर पृष्ठ-स्कोप सूचनाएँ स्वतः अद्यतन होती हैं; किसी प्रति-रूट कॉल की आवश्यकता नहीं।

observe: false केवल पूरी तरह स्थिर पृष्ठों पर सेट करें जहाँ लोड के बाद कुछ भी इंजेक्ट नहीं होता।

सामग्री सुरक्षा नीति

यदि आप किसी सामग्री सुरक्षा नीति को लागू करते हैं, तो स्निपेट को स्पष्ट रूप से अनुमति दें।

महत्वपूर्ण

कोई सख्त script-src 'self' CDN स्निपेट को चुपचाप अवरुद्ध कर देता है, और प्रकटीकरण कभी प्रस्तुत नहीं होते। यह सबसे आम कारण है कि कोई सही ढंग से घोषित साइट Level 2 तक नहीं पहुँचती।

script-src: https://cdn.aidisclose.io जोड़ें, या aidisclose.js को अपने स्वयं के मूल से स्व-होस्ट करें और 'self' रखें।
style-src: स्निपेट अपनी स्टाइल इनलाइन इंजेक्ट करता है, इसलिए 'unsafe-inline' पर्याप्त है। यदि आप इनलाइन स्टाइल की अनुमति नहीं देते, तो यह स्क्रिप्ट की निर्देशिका से aidisclose.css लोड करने पर लौट आता है, इसलिए style-src में https://cdn.aidisclose.io की भी अनुमति दें (या उस फ़ाइल को स्क्रिप्ट के साथ स्व-होस्ट करें)।
connect-src: well-known फ़ाइल के लिए मैनिफ़ेस्ट फ़ेच समान-मूल है और इसे कुछ अतिरिक्त की आवश्यकता नहीं। यदि आप कुंजी द्वारा मैनिफ़ेस्ट लोड करते हैं, तो https://cdn.aidisclose.io की अनुमति दें।

मैनिफ़ेस्ट बिना प्रमाण-पत्रों के फ़ेच किया जाता है, इसलिए इसे सार्वजनिक रूप से परोसें: जिस एंडपॉइंट को कुकी या प्रमाणन की आवश्यकता होती है, उसे वे प्राप्त नहीं होंगे।

संस्करणन और अखंडता

CDN तीन ट्रैक परोसता है:

/v1/aidisclose.js नवीनतम 1.x रिलीज़ का अनुसरण करता है। अधिकांश साइटों के लिए अनुशंसित।
/v1.0.0/aidisclose.js एक निश्चित, अपरिवर्तनीय संस्करण है जिसे आप पिन कर सकते हैं, Subresource Integrity के साथ:

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

/latest/aidisclose.js हमेशा प्रमुख संस्करणों में नवीनतम रिलीज़ को ट्रैक करता है।

पिन करने के लिए SRI हैश पाने हेतु, स्निपेट बनाएँ: packages/snippet में npm run build इसे प्रिंट करता है (स्रोत GitHub पर खुला है)।

अपना स्वयं का प्रकटीकरण UI बनाना

आप अंतर्निहित UI के बजाय अपना स्वयं का प्रकटीकरण UI प्रस्तुत कर सकते हैं। कोई एकल बंद स्विच नहीं है: data-banner="false" और persistentChip: false केवल इंटरैक्शन बैनर और उसकी चिप को दबाते हैं, जबकि सामग्री सूचनाएँ, प्रति-तत्व [data-ai-content] बैज, और "made by humans" बैज फिर भी आपके मैनिफ़ेस्ट और मार्कअप से प्रस्तुत होते हैं। पूरी तरह कस्टम UI का अर्थ है उन पर निर्भर न रहना और अपना स्वयं का प्रस्तुत करना।

टिप्पणी

AIDisclose जाँचकर्ता संदर्भ स्निपेट के मार्कअप का पता लगाकर प्रस्तुतीकरण को सत्यापित करता है। पूरी तरह हाथ से बनाया गया प्रकटीकरण वैध है, लेकिन इसका स्वतः पता नहीं चलता, इसलिए जब तक आपका कस्टम मार्कअप उसे पुनरुत्पन्न नहीं करता जिसे जाँचकर्ता खोजता है, साइट Level 2 (Rendered) के बजाय Level 1 (Declared) पर बनी रहती है। यदि Level 2 आपके लिए महत्वपूर्ण है, तो अंतर्निहित प्रस्तुतीकरण रखें और उसे CSS से फिर से स्टाइल करें।

सुगम्यता

प्रस्तुत UI WCAG 2.1 AA को पूरा करता है: इंटरैक्टिव नियंत्रणों पर दृश्य :focus-visible रूपरेखाएँ, सही भूमिकाएँ और लेबल, ऐसा कंट्रास्ट जो हल्के और गहरे दोनों में टिका रहता है, और prefers-reduced-motion के पीछे नियंत्रित एनिमेशन। स्निपेट ज्ञात कुकी-सहमति बार का भी पता लगाता है और उनके ऊपर व्यवस्थित होता है ताकि प्रकटीकरण किसी CMP के पीछे कभी छिपे न रहें। बहुत संकीर्ण स्क्रीन पर इंटरैक्शन बैनर सघन चिप के रूप में खुलता है ताकि यह कभी सामग्री को न ढके।

#अवलोकन

#इंस्टॉल

#विन्यास

#विकल्प संदर्भ

#थीमन और रूप-रंग

#कस्टम शब्दावली

#अपनी एआई सामग्री को चिह्नित करना

#सिंगल-पेज ऐप और फ़्रेमवर्क

#सामग्री सुरक्षा नीति

#संस्करणन और अखंडता

#अपना स्वयं का प्रकटीकरण UI बनाना

#सुगम्यता