साइट विजेट

विजेट यानी आपके बॉट का चैट सीधे आपकी साइट पर: पेज के कोने में एक गोल बटन, जिससे बातचीत खुलती है। आगंतुक के लिए यह आपसे संपर्क करने का एक और तरीका है; बॉट के लिए यह एक सामान्य चैनल है — वही रिएक्शन और वही ऑपरेटर संवाद जो मैसेंजर में होते हैं। मल्टीचैनल का सिंहावलोकन: चैनल।

इंस्टॉल करना यानी साइट के टेम्पलेट में एक कोड टुकड़ा चिपकाना। बाकी सब कुछ पैनल में सेट होता है और साइट को दोबारा छुए बिना लागू हो जाता है।

इंस्टॉल कोड कहाँ मिलेगा

पैनल में विजेट → ब्लॉक साइट पर इंस्टॉलेशन → फ़ील्ड डालने के लिए कोड खोलें। कॉपी करें बटन पूरा टुकड़ा क्लिपबोर्ड में रख देता है।

कोड ऐसा दिखता है — तीन बिंदुओं की जगह आपकी अपनी कुंजी के साथ:

<script>
  window.mybot = { key: "eu-1a2b3c4d-..." };
</script>
<script async src="https://getmybot.dev/loader.js"></script>

अगर कोड की जगह यह लिखा दिखे कि इस बॉट के लिए अभी तक इंस्टॉल कुंजी जारी नहीं हुई है, तो विजेट चैनल जुड़ा नहीं है। सपोर्ट से संपर्क करें: कुंजी चैनल जोड़ते समय जारी होती है।

कोड के नीचे संकेत रहता है कि विजेट किस होस्ट से संपर्क करेगा। अगर आपकी साइट पर CSP (Content Security Policy) लगी है, तो उस होस्ट को स्क्रिप्ट लोड करने और नेटवर्क अनुरोध की अनुमति दें, वरना ब्राउज़र चुपचाप विजेट रोक देगा।

कोड कहाँ लगाएँ

यह टुकड़ा हर उस पेज के HTML में जाता है जहाँ विजेट दिखना चाहिए। व्यवहार में इसका मतलब है — साइट के साझा टेम्पलेट में एक बार: फ़ुटर, CMS का «</body> से पहले कोड» वाला फ़ील्ड, या टैग मैनेजर का कंटेनर।

नियम छोटे हैं:

सबसे अच्छी जगह है बंद होने वाले </body> से ठीक पहले। <head> में भी चलेगा, पर तब ब्राउज़र आपकी सामग्री से पहले विजेट पर समय लगाएगा।
दोनों टैग का क्रम मायने रखता है: पहला कुंजी सेट करता है, दूसरा विजेट लोड करता है। इन्हें आपस में न बदलें और पेज पर अलग-अलग जगह न रखें।
दूसरे टैग पर async है, इसलिए वह रेंडरिंग नहीं रोकता। यह विशेषता न हटाएँ।
प्रति पेज एक ही टुकड़ा। दो प्रतियाँ यानी विजेट शुरू करने की दो कोशिशें।

आगे लोडर खुद तय करता है कि आपका बॉट किस डेटा सेंटर से सेवा पाता है और विजेट का कोड वहीं से लाता है। इसके लिए आपको कुछ नहीं करना।

इंस्टॉल कुंजी सार्वजनिक है

पहले टैग की कुंजी आपके बॉट का सार्वजनिक पहचानकर्ता है, पासवर्ड नहीं। यह पेज के सोर्स कोड में रहती है: कोई भी आगंतुक «पेज सोर्स देखें» खोलकर उसे पढ़ सकता है। हर चैट विजेट ऐसे ही काम करता है, और यह सामान्य बात है।

समझने लायक बातें:

इस कुंजी से पैनल में लॉगिन नहीं किया जा सकता, दूसरों के संवाद नहीं पढ़े जा सकते, सब्सक्राइबर आधार निर्यात नहीं हो सकता और बॉट में कुछ बदला नहीं जा सकता। यह ठीक एक चीज़ खोलती है — इस बॉट के साथ नई बातचीत शुरू करना।
कुंजी को रहस्य की तरह न बरतें: उसे छिपाने या उलझाने से कुछ नहीं मिलता।
अगर कुंजी बदलनी हो (मान लीजिए किसी ठेकेदार से अलग होने के बाद), यह सपोर्ट करता है। बदलने के बाद साइट का पुराना कोड काम करना बंद कर देगा और उसे अपडेट करना होगा।

अनुमत डोमेन की सूची

विजेट के पास अनुमत डोमेन की सूची (origin allowlist) होती है — वे साइट पते जहाँ से विजेट को चलने की अनुमति है। सूची चैनल जोड़ते समय तय होती है और बाद में कुंजी दोबारा जारी किए बिना बदली जा सकती है: साइट पर लगा आपका कोड वही रहता है।

प्रविष्टियाँ origin होती हैं: स्कीम, होस्ट और, अगर मानक न हो तो, पोर्ट।

https://example.com
https://www.example.com
https://shop.example.com
http://localhost:3000

मिलान अक्षरशः सटीक होता है:

कोई वाइल्डकार्ड नहीं। https://*.example.com काम नहीं करेगा — सबडोमेन अलग-अलग लिखें।
example.com और www.example.com अलग प्रविष्टियाँ हैं। अगर साइट दोनों पर खुलती है, दोनों जोड़ें।
http:// और https:// भी अलग प्रविष्टियाँ हैं। आमतौर पर सिर्फ़ https:// चाहिए, पर http:// वाला परीक्षण परिवेश स्पष्ट रूप से जोड़ना होगा।
पथ नहीं चलेगा: https://example.com/shop अस्वीकार होगा, origin सिर्फ़ साइट का पता है।

अगर आपका असली डोमेन सूची में नहीं है, तो विजेट चालू नहीं होगा। आगंतुक के ब्राउज़र को «origin not allowed» वाला इनकार मिलेगा और चैट खुलेगी ही नहीं। यह आमतौर पर नए डोमेन पर जाने, सबडोमेन जोड़ने या अलग पते पर दूसरा भाषा संस्करण चालू करने के बाद दिखता है — हर एक के लिए अलग प्रविष्टि चाहिए।

अगर सूची खाली है तो कोई पाबंदी नहीं है और विजेट कहीं से भी चलता है। इसे «अभी सेट नहीं किया» मानें, जानबूझकर खुला छोड़ा हुआ नहीं: जैसे ही अपने डोमेन पता हों, उन्हें दर्ज कर दें।

यह पाबंदी क्या देती है और क्या नहीं

देती है: कोई दूसरी वेबसाइट आपका विजेट अपने यहाँ नहीं जड़ सकती। वरना कोई आपका कोड अपने पेज पर चिपका सकता था और असली आगंतुकों के ब्राउज़र आपके बॉट से हुई बातचीत की सामग्री उस साइट को सौंप देते। सूची ठीक यही रास्ता बंद करती है।

नहीं देती: यह उस व्यक्ति से बचाव नहीं है जिसने कुंजी कॉपी करके प्लेटफ़ॉर्म से सीधे अनुरोध किए — ब्राउज़र से नहीं, बल्कि मान लीजिए किसी स्क्रिप्ट से। साइट का पता बताने वाला हेडर ब्राउज़र लगाता है; ब्राउज़र के बाहर चलने वाला प्रोग्राम उसे न भेजे या कुछ भी भेजे, यह संभव है। इसलिए सूची को एम्बेडिंग की पाबंदी मानें, सुरक्षा की सीमा नहीं। दुरुपयोग से बचाव प्लेटफ़ॉर्म की दर-सीमा और संवाद मॉडरेशन करते हैं, यह सूची नहीं।

दिखावट

विजेट → दिखावट में ये सेट होते हैं:

स्थिति — बटन नीचे बाएँ या दाएँ कोने में।
एक्सेंट रंग — बटन और चैट तत्वों का रंग। अपने ब्रांड का रंग दें ताकि विजेट अजनबी न लगे।
चैट का नाम — बटन का लेबल और चैट पैनल का शीर्षक। आमतौर पर कंपनी का नाम या वह नाम जिससे बॉट अपना परिचय देता है।

पास में पूर्वावलोकन है — एक जीवंत विजेट, जो सहेजने से पहले ही नतीजा दिखा देता है।

विजेट में अभी स्वागत संदेश नहीं है: बस यही तीन सेटिंग्स हैं। पहला संदेश बॉट आगंतुक के जवाब में भेजता है — आपके सामान्य रिएक्शन के नियमों से।

बदलाव साइट पर अपने आप पहुँचते हैं: विजेट पेज लोड होते समय सेटिंग्स पढ़ता है, चिपकाए गए कोड को कभी बदलना नहीं पड़ता।

आगंतुक गुमनाम होते हैं

आगंतुक को लिखने के लिए कुछ भरना नहीं पड़ता। पहली बार चलने पर विजेट प्लेटफ़ॉर्म से गुमनाम आगंतुक पहचानकर्ता पाता है और उसे ब्राउज़र में रखता है, ताकि लौटने पर व्यक्ति को खाली चैट नहीं, अपनी पिछली बातचीत दिखे।

इससे यह निकलता है:

संवादों में ऐसा आगंतुक गुमनाम दिखता है: जब तक वह खुद न लिखे, न नाम, न फ़ोन, न ईमेल।
पहचानकर्ता एक विशिष्ट ब्राउज़र में रहता है। दूसरा ब्राउज़र, दूसरा उपकरण या साफ़ किया गया साइट डेटा — यानी नया आगंतुक और खाली इतिहास।
गुमनाम आगंतुक को आपके पहले से ज्ञात ग्राहक से जोड़ा जा सकता है — जैसे आपके सदस्य क्षेत्र में लॉगिन किए उपयोगकर्ता से। कैसे, यह अगले हिस्से में है।

आगंतुक को अपने उपयोगकर्ता से जोड़ना

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

इसके लिए एक ही कॉल काफ़ी है, एक ऐसे फ़ंक्शन के साथ जो प्रमाण बनाता है:

mybot.identify(async (visitorId) => {
  const res = await fetch("/mybot-sign", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ userId: currentUser.id, visitorId }),
  });
  return res.json(); // { userId, signature, expiresAt }
});

विजेट आपके फ़ंक्शन को visitorId के साथ बुलाता है — इस ब्राउज़र के लिए मौजूदा गुमनाम आगंतुक पहचानकर्ता, वह एकमात्र मान जो सिर्फ़ विजेट को पता है — और इंतज़ार करता है कि वह { userId, signature, expiresAt } लौटाए, या उसमें रिज़ॉल्व हो। आपके फ़ंक्शन का एकमात्र काम है visitorId को आपके अपने सर्वर को सौंपना, साथ में लॉग-इन उपयोगकर्ता के पहचानकर्ता के (ऊपर currentUser.id जो भी आपकी साइट पर होता है), और सर्वर जो जवाब दे उसे ज्यों का त्यों वापस भेजना। असली हस्ताक्षर आपके सर्वर पर होता है, इस फ़ंक्शन में नहीं — आगे देखें।

एक कॉलबैक, न कि पहले से बना मान या visitorId सीधे पढ़ने का कोई तरीका, दो वजहों से:

मौजूदगी का समय। विजेट शुरू होते वक़्त visitorId को असिंक्रोनस तरीके से बनाता है — जिस पल लोडर स्क्रिप्ट चलती है उस पल यह मौजूद नहीं होता, और mybot.identify खुद भी तभी इंस्टॉल होता है जब यह पूरा हो चुका हो (आगे विवरण)। इसलिए जब भी आपका पेज mybot.identify को बुला भी सके, उस वक़्त आपके फ़ंक्शन को मिलने वाला पहचानकर्ता निश्चित रूप से असली होता है। एक सामान्य गेटर यह गारंटी नहीं देता: कुछ भी किसी पेज को उसे एक लाइन जल्दी पढ़ने और कुछ न पाने से नहीं रोकता — नतीजा एक ऐसा हस्ताक्षर जो चुपचाप कभी मेल नहीं खाता, बिना किसी सुराग के।
दायरा। आपके अपने पेज के कोड को कभी visitorId को हाथ से रखना, सहेजना या इधर-उधर पास करना नहीं पड़ता — यह सिर्फ़ इस एक फ़ंक्शन के भीतर मौजूद रहता है, उस एक कॉल के लिए जो इसे करनी होती है।

विजेट छोड़ते ही, visitorId एक वाहक-अधिकार (bearer capability) बन जाता है: जो कोई भी इसके लिए हस्ताक्षर हासिल कर ले, वह उस आगंतुक के सत्र से जुड़ सकता है। इसे सिर्फ़ अपने सर्वर को भेजें, अपने ही प्रमाणित अनुरोध में, और कहीं और नहीं — इसे लॉग न करें, किसी तीसरे पक्ष को न भेजें, और क्लाइंट-साइड एनालिटिक्स कॉल में न डालें।

हस्ताक्षर केवल आपके अपने सर्वर पर बनता है

ऊपर आपके फ़ंक्शन के अंदर, आपका अपना सर्वर — कभी ब्राउज़र नहीं — हस्ताक्षर बनाता है: कुंजी के रूप में विजेट के गुप्त कोड से बना HMAC-SHA256, हेक्साडेसिमल में, पहले 32 अक्षर, एक संदेश में जोड़े गए तीन मानों का। यही सूत्र कैबिनेट में गुप्त कोड के पास «Signing algorithm» शीर्षक के नीचे दिखाया जाता है:

signature = hex(HMAC-SHA256(key: secret, message: userId + "\n" + visitorId + "\n" + expiresAt)).slice(0, 32)

ऊपर हर + "\n" + हिस्सों के बीच एक असली नई-पंक्ति (newline) अक्षर है, न कि बैकस्लैश और n — दो अलग अक्षर। अगर आपका HMAC फ़ंक्शन संदेश को एक ही स्ट्रिंग के रूप में लेता है, तो तीनों हिस्सों को असली नई पंक्ति से जोड़ें — बीच में नई पंक्ति के बिना किए गए तीन अलग .update() कॉल एक अलग, ग़लत संदेश का हैश बनाते हैं।

तीन हिस्से:

userId — लॉग-इन उपयोगकर्ता का पहचानकर्ता, वही मान जो आपका सर्वर ऊपर के फ़ंक्शन से पाता है और अपने जवाब में लौटाता है।
visitorId — गुमनाम आगंतुक पहचानकर्ता जिसे आपके फ़ंक्शन ने तर्क के रूप में पाया और बिना बदले आपके सर्वर को भेज दिया।
expiresAt — सेकंड में यूनिक्स टाइमस्टैम्प (मिलीसेकंड में नहीं), जिसे आपका सर्वर हस्ताक्षर करते वक़्त बनाता है और जिस तक यह ख़ास हस्ताक्षर वैध रहता है। प्लेटफ़ॉर्म ऐसी कॉल अस्वीकार करता है जिसका expiresAt पहले ही बीत चुका हो, और वैसी भी जो भविष्य में 24 घंटे से ज़्यादा दूर हो — इसलिए अपने फ़ंक्शन से इसे लौटाने से ठीक पहले हस्ताक्षर बनाएँ, बाद के अनुरोधों के लिए एक बार बनाकर कैश न करें।

यह समाप्ति-समय ही इस बदलाव की असली वजह है, कोई गौण बात नहीं। पिछला सूत्र सिर्फ़ उपयोगकर्ता पहचानकर्ता को कवर करता था, इसलिए एक बार पकड़ा गया हस्ताक्षर — कहीं लॉग हुआ, नेटवर्क ट्रैफ़िक से पकड़ा गया, चाहे जैसे भी — हमेशा के लिए वैध रहता था और किसी भी आगंतुक के लिए काम करता था, न कि सिर्फ़ उसके लिए जिसके लिए वह जारी हुआ था। जिसके हाथ भी वह लगता, वह इसे बिल्कुल अलग ब्राउज़र में दोहरा सकता था, और प्लेटफ़ॉर्म किसी अजनबी की गुमनाम ब्राउज़िंग को किसी असली ग्राहक की प्रोफ़ाइल में मिला देता। हस्ताक्षर को किसी ख़ास visitorId से बाँधना और उसे छोटी उम्र देना इस छेद के दोनों सिरे बंद करते हैं: हस्ताक्षर सिर्फ़ उसी सत्र के लिए मान्य होता है जिसके लिए वह जारी हुआ, कहीं और नहीं, और expiresAt बीतते ही पूरी तरह मान्य होना बंद हो जाता है — इसलिए लीक हुआ हस्ताक्षर भी बस एक छोटी, एक-सत्र तक सीमित समस्या रहता है, स्थायी ख़तरा नहीं।

तीनों मान अपने सर्वर पर बनाएँ और अपने फ़ंक्शन से तैयार रूप में लौटाएँ। यह औपचारिकता नहीं है: ब्राउज़र में हस्ताक्षर बनाने के लिए गुप्त कोड वहाँ भेजना पड़ता, यानी पेज के हर आगंतुक को सौंपना पड़ता। उसके बाद कोई भी आपके किसी भी ग्राहक का रूप धरकर उसकी बातचीत पढ़ सकता था। हस्ताक्षर (और जिनके लिए वह बना, वे visitorId/expiresAt) ब्राउज़र को वापस देना सुरक्षित है, गुप्त कोड नहीं।

कॉल स्वयं स्क्रीन पर कुछ नहीं दिखाती: जुड़ाव सर्वर पर और चुपचाप होता है। अगर आपका फ़ंक्शन एरर फेंके या उसका प्रॉमिस अस्वीकृत हो जाए, या प्लेटफ़ॉर्म मिले हुए हस्ताक्षर को अस्वीकार कर दे — मेल न खाए, या expiresAt गायब हो, पहले ही बीत चुका हो, या भविष्य में 24 घंटे से ज़्यादा दूर हो — तो इससे आगे कुछ नहीं होता: आगंतुक को कुछ पता नहीं चलता और वह गुमनाम रूप में लिखता रहता है।

mybot.identify तुरंत उपलब्ध नहीं होती — यह विजेट का मुख्य कोड लोड होने के बाद, एक असली visitorId के साथ, आती है (ऊपर «मौजूदगी का समय» देखें)। इसे पेज लोड हैंडलर से बुलाएँ, <head> की पहली पंक्ति में नहीं।

गुप्त कोड कहाँ है और उसे कैसे बदलें

विजेट का गुप्त कोड वही कुंजी है जिससे आप हस्ताक्षर बनाते हैं। वह विजेट सेटिंग्स में, «identify() secret» खंड में रहता है। अगर वह खंड कहे कि विजेट अभी जुड़ा नहीं है, तो पहले वेब-चैनल जोड़ें — गुप्त कोड उसी के साथ आ जाएगा।

दिखाना। «Reveal secret» बटन मान माँगता है। वह खुले पाठ में नहीं आता: पहले आपको बिंदु दिखेंगे, और अक्षर दिखाने के लिए अलग स्विच «Show» है (वापस छिपाने के लिए «Mask»)। पास ही «Clear from screen» बटन है, जो मान को दृश्य से हटा देता है।

दिखाना जितनी बार चाहें किया जा सकता है, और दिखाने से कुछ रद्द नहीं होता: स्क्रीन बंद करने के बाद भी गुप्त कोड चालू रहता है। ऐसा इसलिए है कि वह हैश नहीं, एन्क्रिप्टेड रूप में रखा जाता है — हर हस्ताक्षर जाँचने के लिए प्लेटफ़ॉर्म को उसका असली मान चाहिए। छह महीने बाद नया बैकएंड तैनात करते समय बस आकर उसे फिर देख लें।

कॉपी कर लिया तो सफ़ाई खुद करें। क्लिपबोर्ड प्लेटफ़ॉर्म साफ़ नहीं कर सकता: ब्राउज़र से यह भरोसेमंद ढंग से संभव नहीं, इसलिए हम वादा भी नहीं करते। काम पूरा होने पर मान को स्क्रीन से हटाएँ और क्लिपबोर्ड खुद साफ़ करें, ख़ासकर साझा कंप्यूटर पर।

बदलना। पुष्टि चरण के साथ «Rotate secret» बटन। यह तुरंत तोड़ने वाली क्रिया है: जैसे ही नया गुप्त कोड बनता है, पुराना उसी क्षण जाँच में पास होना बंद कर देता है। कोई अतिव्यापी अवधि नहीं — ऐसा कोई क्षण नहीं जब दोनों कुंजियाँ चलें।

टूटता ठीक यही है: आगंतुकों का आपके उपयोगकर्ताओं से जुड़ाव। बातचीत बाधित नहीं होती — आगंतुक लिखते रहते हैं और जवाब पाते रहते हैं, बस गुमनाम रूप में — जब तक आपका बैकएंड नए कोड से हस्ताक्षर करना शुरू न कर दे। इंस्टॉल कोड और अनुमत डोमेन की सूची अछूती रहती है, साइट पर कुछ बदलना नहीं पड़ता।

इसलिए सोच-समझकर बदलें: पहले नए मान वाले बैकएंड की तैनाती तैयार करें, तभी «Rotate secret» दबाएँ। «क्या होता है देखें» के लिए दबाना बुरा विचार है। बदलने के तुरंत बाद नया मान स्क्रीन पर दिख जाता है, इसलिए उसे वहीं से कॉपी किया जा सकता है।

पेज पर विजेट कैसा बर्ताव करता है

विजेट जानबूझकर ऐसा बनाया गया है कि आपकी साइट से न टकराए:

वह अलग-थलग कंटेनर में रहता है (बंद Shadow DOM)। आपकी स्टाइल उसके भीतर नहीं जाती और उसकी स्टाइल पेज पर नहीं आती। दुष्प्रभाव यह कि आप अपने CSS से विजेट का रूप नहीं बदल सकते — इसके लिए दिखावट सेटिंग्स हैं।
कंटेनर पूरी स्क्रीन पर फैला है पर क्लिक नहीं रोकता: क्लिक पेज तक पहुँचते हैं, सिर्फ़ बटन और चैट पैनल प्रतिक्रिया देते हैं।
विजेट हमेशा आपकी सामग्री के ऊपर रहता है; आपकी परतें उसे ढक नहीं सकतीं।
विजेट के भीतर की कोई भी गड़बड़ी भीतर ही रहती है: ज़्यादा से ज़्यादा चैट बटन काम न करे, आपकी साइट चलती रहती है। विजेट न दिखे तो ब्राउज़र कंसोल देखें — लगभग हमेशा CSP या सूची में न जुड़ा डोमेन ही कारण होता है।

अगर विजेट न दिखे

क्रम से जाँचें:

पेज का सोर्स कोड खोलकर देखें कि दोनों टैग मौजूद हैं और कुंजी खाली नहीं है।
जाँचें कि साइट का पता सूची में लिखे पते से हूबहू मिलता है, https:// और www सहित।
ब्राउज़र कंसोल देखें: Content Security Policy का संदेश मतलब साइट की CSP में प्लेटफ़ॉर्म का पता अनुमति देना होगा।
पक्का करें कि कोई विज्ञापन अवरोधक विजेट नहीं हटा रहा — बिना एक्सटेंशन वाली निजी विंडो में जाँचें।

आगे क्या

चैनल — मल्टीचैनल और चैनलों की क्षमताएँ।
रिएक्शन: मूल बातें — बॉट आगंतुक को क्या जवाब देगा।
चैट और ऑपरेटर — ऑपरेटर बातचीत में कैसे जवाब देता है।