वेब विजेट

वेब विजेट

वेब विजेट आपको किसी भी वेबसाइट पर सीधे आपके AI बॉट द्वारा संचालित एक लाइव चैट विंडो एम्बेड करने देता है। इसे अपने ब्रांड से मेल खाने के लिए अनुकूलित करें और मिनटों में तैनात करें।

इंस्टॉलेशन

1. बाएं मेनू में Channels → Web Widget पर जाएं।

2. Create Widget पर क्लिक करें और उसे एक नाम दें।

3. विजेट सेटिंग्स कॉन्फ़िगर करें (नीचे अनुकूलन देखें)।

4. दिया गया एम्बेड कोड स्निपेट कॉपी करें।

5. स्निपेट को अपनी वेबसाइट के HTML में, बंद होने वाले </body> टैग से ठीक पहले पेस्ट करें।

6. अपनी साइट सेव करें और प्रकाशित करें — विजेट तुरंत दिखाई देगा।

एम्बेड कोड

<!-- Clienta.ai Web Widget -->
<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
  };
</script>
<script
  src="https://api.clienta.ai/widget/YOUR_WIDGET_ID/loader.js"
  async
></script>

YOUR_BOT_ID और YOUR_WIDGET_ID को अपने डैशबोर्ड में दिखाए गए मानों से बदलें।

टिप्पणी

विजेट स्क्रिप्ट असynchronously लोड होती है और आपके पेज लोड को ब्लॉक नहीं करेगी।

अनुकूलन

विकल्प	विवरण
Theme Color	अपने ब्रांड से मेल खाने के लिए प्राथमिक रंग सेट करें (hex कोड या कलर पिकर)
Welcome Message	जब कोई उपयोगकर्ता विजेट खोलता है तो प्रदर्शित होने वाला पहला संदेश
Position	स्क्रीन पर नीचे-दाएं या नीचे-बाएं प्लेसमेंट चुनें
Avatar	बॉट के लिए एक कस्टम अवतार इमेज अपलोड करें

अतिरिक्त विकल्पों में शामिल हैं:

• Widget Title — विजेट हेडर में दिखाया गया नाम
• Placeholder Text — संदेश इनपुट बॉक्स के अंदर संकेत टेक्स्ट
• Auto-Open Delay — N सेकंड के बाद विजेट स्वचालित रूप से खोलें (वैकल्पिक)
• Hide on Mobile — मोबाइल डिवाइस पर विजेट दृश्यता टॉगल करें

यह कैसे काम करता है

1. उपयोगकर्ता विजेट खोलता है — चैट विंडो पेज के कोने से स्लाइड होकर खुलती है।

2. बॉट को संदेश भेजा गया — उपयोगकर्ता का संदेश एक सुरक्षित WebSocket कनेक्शन के माध्यम से Clienta.ai को भेजा जाता है।

3. AI प्रक्रिया करता है और जवाब देता है — बॉट ज्ञान आधार से प्रासंगिक सामग्री प्राप्त करता है और एक उत्तर तैयार करता है।

4. आवश्यक होने पर मानव हैंडऑफ — यदि विश्वास कम है या उपयोगकर्ता किसी मानव का अनुरोध करता है, तो वार्तालाप Conversations इनबॉक्स के माध्यम से उपलब्ध एजेंट के पास भेजी जाती है।

संपर्क फ़ॉर्म

v1.6.8

जब AI बॉट ऑफलाइन हो या जवाब देने में असमर्थ हो, तो विजेट एक CTA गुब्बारा दिखाता है जो विज़िटर को अपने संपर्क विवरण छोड़ने के लिए प्रेरित करता है। गुब्बारे पर टैप करने से एक संपर्क फ़ॉर्म खुलता है:

फ़ील्ड	आवश्यक	नोट्स
Email	हाँ	फॉलो-अप के लिए हमेशा आवश्यक
Phone	नहीं	37 देशों और इमोजी फ्लैग के साथ एक कंट्री कोड सेलेक्टर शामिल है (जैसे 🇹🇭 +66, 🇺🇸 +1, 🇬🇧 +44, 🇯🇵 +81)। सर्वर-साइड वैलिडेशन सुनिश्चित करता है कि सबमिट किए गए कोड वैध हैं।
Name	नहीं	विज़िटर का नाम
Message	नहीं	अतिरिक्त संदर्भ

संपर्क फ़ॉर्म सबमिशन एडमिन Tickets पेज में दिखाई देने वाला एक टिकट बनाता है, जो प्रदान किए जाने पर ईमेल और फोन दोनों प्रदर्शित करता है।

रिज़ॉल्व के बाद नई चैट

v1.6.8

जब कोई एजेंट वार्तालाप रिज़ॉल्व करता है, तो विजेट एक सिस्टम नोटिस और एक “Start New Chat” बटन प्रदर्शित करता है। इस पर क्लिक करने से:

1. वर्तमान वार्तालाप इतिहास साफ़ हो जाता है
2. एक नए WebSocket सत्र के साथ पुनः कनेक्ट होता है
3. विजेट को उसकी प्रारंभिक अवस्था में वापस लाता है

यह विज़िटर को पेज रिफ्रेश किए बिना नई वार्तालाप शुरू करने देता है।

WebSocket रियल-टाइम

विजेट रियल-टाइम, कम-विलंबता मैसेजिंग के लिए एक स्थायी WebSocket कनेक्शन का उपयोग करता है। मुख्य व्यवहार:

• Auto-reconnect — यदि कनेक्शन टूट जाता है तो क्लाइंट स्वचालित रूप से पुनः कनेक्ट होता है।
• Typing indicator — बॉट प्रतिक्रिया उत्पन्न करते समय एक टाइपिंग एनिमेशन दिखाता है।
• Agent typing indicator — v1.6.8 जब कोई मानव एजेंट उत्तर टाइप कर रहा हो, तो विजेट वास्तविक समय में विज़िटर को एक टाइपिंग एनिमेशन दिखाता है।
• Message history — उसी ब्राउज़र सत्र में वार्तालाप इतिहास सुरक्षित रहता है।
• Cross-tab sync — यदि उपयोगकर्ता के पास कई टैब खुले हैं, तो वार्तालाप स्थिति सिंक की जाती है।

मार्कडाउन प्रतिक्रियाएं

v1.6.4

AI और एजेंट संदेश सादे टेक्स्ट के बजाय फॉर्मेटेड मार्कडाउन के रूप में रेंडर होते हैं। समर्थित फॉर्मेटिंग में शामिल हैं:

• बोल्ड, इटैलिक, स्ट्राइकथ्रू
• लिंक (नए टैब में स्वचालित रूप से खुलते हैं)
• इनलाइन code और फेंस्ड कोड ब्लॉक
• क्रमबद्ध और अनक्रमबद्ध सूचियाँ
• हेडिंग, ब्लॉकक्वोट, और टेबल

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

ब्रांड अवतार

v1.6.4

विजेट हेडर और होम स्क्रीन पर अपना ब्रांड लोगो या एक कस्टम अवतार प्रदर्शित करें। Settings → Channels → Web → Customizer में avatarUrl सेट करें या इसे एम्बेड कोड में config.theme.avatarUrl के रूप में पास करें।

• केवल https:// URL स्वीकार किए जाते हैं
• यदि URL अमान्य है या इमेज लोड होने में विफल रहती है, तो डिफ़ॉल्ट स्पार्कल आइकन दिखाया जाता है
• अनुशंसित: सर्वोत्तम परिणामों के लिए एक वर्गाकार इमेज (जैसे 128 × 128 px)

विवरण के लिए Widget Customization — Avatar देखें।

AI बनाम मानव लेबल

v1.6.4

प्रत्येक गैर-उपयोगकर्ता संदेश एक छोटा लेखक लेबल प्रदर्शित करता है जो प्रेषक की पहचान करता है:

लेखक का प्रकार	दिखाया गया लेबल
AI बॉट	”AI Assistant” (स्थानीयकृत)
मानव एजेंट	एजेंट का नाम (जैसे “Sarah”)

लेबल 15 समर्थित भाषाओं में स्थानीयकृत हैं और स्क्रीन रीडर के लिए सुलभ हैं। यह विज़िटर को AI-जनित और मानव प्रतिक्रियाओं के बीच स्पष्ट रूप से अंतर करने में मदद करता है, पारदर्शिता सर्वोत्तम प्रथाओं का समर्थन करता है।

अभिवादन भाषा

v1.6.2

विजेट अभिवादन संदेश तीन भाषा मोड का समर्थन करता है, जो Settings → Channels → Web → Customizer → Greeting Mode में कॉन्फ़िगर किए जाते हैं:

मोड	व्यवहार
Static	भाषा की परवाह किए बिना प्रत्येक विज़िटर को एक ही अभिवादन प्रदर्शित करता है
Match Visitor	प्रति-भाषा अभिवादन दिखाता है — 15 लोकेल में से प्रत्येक के लिए एक अलग अभिवादन टेक्स्ट कॉन्फ़िगर करें
Org-Main	हमेशा संगठन की मुख्य प्रतिक्रिया भाषा में अभिवादन दिखाता है (AI Settings में सेट)

Match Visitor मोड में, बिना कॉन्फ़िगर किए गए अभिवादन वाला कोई भी लोकेल स्टैटिक अभिवादन टेक्स्ट पर वापस आ जाता है।

चरण-दर-चरण कॉन्फ़िगरेशन के लिए Widget Customization — Greeting Mode देखें।

भाषा चयनकर्ता

v1.6.2

विजेट हेडर में एक ग्लोब आइकन प्रदर्शित कर सकता है जो विज़िटर को स्पष्ट रूप से अपनी पसंदीदा भाषा चुनने देता है। यह सुविधा डिफ़ॉल्ट रूप से अक्षम है और Settings → Channels → Web → Customizer में प्रति विजेट सक्षम करनी होगी।

सक्षम होने पर:

• विजेट हेडर में एक ग्लोब (🌐) आइकन दिखाई देता है
• विज़िटर 15 समर्थित लोकेल में से चुन सकते हैं
• एक भाषा चुनने से सत्र के लिए सभी AI प्रतिक्रियाएं उस भाषा पर लॉक हो जाती हैं, ऑटो-डिटेक्शन को ओवरराइड करती हैं
• लॉक तब भी बनी रहती है जब विज़िटर किसी भिन्न भाषा में टाइप करे

टिप्पणी

भाषा चयनकर्ता लॉक ऑटो-डिटेक्शन पर प्राथमिकता लेती है लेकिन AI Settings में Force this language सेटिंग द्वारा ओवरराइड की जा सकती है। यदि Force सक्षम है, तो विज़िटर के चयन की परवाह किए बिना संगठन की भाषा हमेशा जीतती है।

RTL (दाएं-से-बाएं) समर्थन

v1.6.2

विजेट और लैंडिंग पेज अरबी और हिब्रू के लिए RTL लेआउट का पूर्ण समर्थन करते हैं। जब कोई विज़िटर RTL लोकेल का उपयोग करता है:

• संपूर्ण लेआउट मिरर होता है (टेक्स्ट संरेखण, नेविगेशन, UI तत्व)
• <html dir="rtl"> विशेषता स्वचालित रूप से सेट होती है
• चैट संदेश और इनपुट बॉक्स RTL पढ़ने के प्रवाह के लिए सही ढंग से संरेखित होते हैं

किसी मैनुअल कॉन्फ़िगरेशन की आवश्यकता नहीं है — RTL चयनित लोकेल के आधार पर स्वचालित रूप से सक्रिय होता है।

माउंट टाइमआउट फ़ॉलबैक

v1.6.5

यदि विजेट स्क्रिप्ट (widget.js) 10 सेकंड के भीतर लोड होने में विफल रहती है, तो एम्बेड एक खाली स्थान छोड़ने के बजाय एक फ़ॉलबैक UI प्रदर्शित करता है। फ़ॉलबैक में एक रिट्राई बटन शामिल है ताकि विज़िटर पेज रिफ्रेश किए बिना विजेट को पुनः लोड करने का प्रयास कर सके।

यह नेटवर्क समस्याओं, एड ब्लॉकर्स, या CDN आउटेज के कारण विजेट माउंट न होने पर उपयोगकर्ता अनुभव की रक्षा करता है।

विजेट विजुअल रीडिज़ाइन

v1.6.8

विजेट को v1.6.8 में एक आधुनिक, परिष्कृत रूप के साथ एक विजुअल रिफ्रेश मिला:

• Gradient header — विजेट हेडर आपके थीम रंग के आधार पर एक सूक्ष्म ग्रेडिएंट का उपयोग करता है, एक स्टेटस डॉट और अवतार डिस्प्ले के साथ।
• Rounded message bubbles — चैट बुलबुले एक नरम दिखावट के लिए एक बड़े बॉर्डर रेडियस (rounded-2xl) का उपयोग करते हैं।
• Animated open/close — विजेट तुरंत प्रकट होने के बजाय स्मूद CSS एनिमेशन के साथ अंदर और बाहर स्लाइड होता है।
• Redesigned launcher — चैट बबल लॉन्चर एक 60px स्क्वेरकल है जिसमें ब्रांड-रंगीन ग्लो शैडो और एक प्रवेश एनिमेशन है।
• Dark mode toggle — चैट हेडर में एक टॉगल बटन विज़िटर को अपने सत्र के दौरान लाइट और डार्क मोड के बीच स्विच करने देता है।
• Themed focus rings — इनपुट फ़ील्ड पहुंच के लिए ब्रांड-रंगीन फ़ोकस रिंग दिखाते हैं।
• Notification badge — लॉन्चर बबल पर एक अपठित संदेश बैज दिखाई देता है।

ये विजुअल परिवर्तन स्वचालित रूप से लागू होते हैं — किसी कॉन्फ़िगरेशन परिवर्तन की आवश्यकता नहीं है।

उद्धरण चिप्स

v1.6.5

जब AI बॉट आपके ज्ञान आधार से प्राप्त जानकारी के साथ जवाब देता है, तो संदेश के नीचे उद्धरण चिप्स दिखाई देते हैं। प्रत्येक चिप एक पुनः प्राप्त दस्तावेज़ का प्रतिनिधित्व करती है जिसने उत्तर में योगदान दिया।

व्यवहार	विवरण
Chip display	3 दस्तावेज़ शीर्षक चिप तक दिखाता है। यदि अधिक स्रोतों का उपयोग किया गया, तो एक “+N more” चिप अतिरिक्त उद्धरण इंगित करती है।
Click to expand	किसी चिप पर क्लिक करने से पुनः प्राप्त सामग्री के पहले 200 वर्णों को दिखाने वाला एक इनलाइन स्निपेट टॉगल होता है। एक समय में केवल एक स्निपेट खुला हो सकता है।
Title truncation	लंबे दस्तावेज़ शीर्षक एलिप्सिस के साथ 40 वर्णों तक काटे जाते हैं।
Theming	चिप्स एक सूक्ष्म टिंट के रूप में आपके विजेट के प्राथमिक रंग का उपयोग करते हैं, पूर्ण डार्क मोड और RTL समर्थन के साथ।
Accessibility	चिप्स उचित ARIA लेबल (aria-expanded), सूची भूमिकाओं, और स्क्रीन-रीडर समर्थन के साथ कीबोर्ड-नेविगेबल हैं।

उद्धरण चिप्स विज़िटर को यह देखने में पारदर्शिता देते हैं कि बॉट का उत्तर कहां से आया, AI प्रतिक्रियाओं में विश्वास बनाते हैं। कोई कॉन्फ़िगरेशन आवश्यक नहीं है — जब RAG पाइपलाइन प्रासंगिक दस्तावेज़ प्राप्त करती है तो उद्धरण स्वचालित रूप से दिखाई देते हैं।

ऑटो-स्क्रॉल

v1.6.8

जब भी नई सामग्री आती है, विजेट स्वचालित रूप से नवीनतम संदेश पर स्क्रॉल करता है। यह इन पर लागू होता है:

• AI बॉट या मानव एजेंट से नए संदेश
• स्ट्रीमिंग सामग्री जब बॉट रियल टाइम में प्रतिक्रिया उत्पन्न करता है

स्क्रॉल एक स्मूद एनिमेशन का उपयोग करता है ताकि परिवर्तन स्वाभाविक लगे। किसी कॉन्फ़िगरेशन की आवश्यकता नहीं है — ऑटो-स्क्रॉल हमेशा सक्रिय रहता है।

प्लान के अनुसार चैनल सीमाएं

प्लान	अधिकतम चैनल
Free	1
Starter	2
Growth	5
Plus	6
Pro	15
Scale	30
Enterprise	50

संकेत

कई डोमेन पर विजेट चाहिए? प्रत्येक डोमेन को अपनी विजेट कॉन्फ़िगरेशन की आवश्यकता है। एनालिटिक्स को अलग-अलग ट्रैक करने के लिए प्रति डोमेन एक विजेट बनाएं।