विजेट कस्टमाइज़ेशन

विजेट कस्टमाइज़ेशन

अपने चैट विजेट की उपस्थिति को अपने ब्रांड और वेबसाइट डिज़ाइन से मेल खाने के लिए व्यक्तिगत बनाएं।

सेटिंग्स

सभी विजेट कस्टमाइज़ेशन विकल्प Settings → Channels → Web पर उपलब्ध हैं। अपना वेब चैनल चुनें और Appearance टैब खोलें।

---

थीम रंग

थीम रंग पूरे विजेट में एक समान रूप से लागू होता है:

• लॉन्चर बटन की पृष्ठभूमि
• हेडर बार की पृष्ठभूमि
• सेंड बटन का रंग
• लिंक हाइलाइट रंग
• यूज़र मैसेज बबल की पृष्ठभूमि

एक ऐसा रंग चुनें जो आपकी ब्रांड पहचान से मेल खाता हो और सफेद टेक्स्ट के विरुद्ध अच्छा कंट्रास्ट सुनिश्चित करे।

---

स्वागत संदेश

स्वागत संदेश वह पहला टेक्स्ट है जो ग्राहक विजेट खोलने पर देखते हैं। इसे मैत्रीपूर्ण रखें और स्पष्ट रूप से बताएं कि बॉट किसमें मदद कर सकता है।

उदाहरण:

1. “नमस्ते! आज मैं आपकी कैसे मदद कर सकता हूँ?”
2. “Acme Support में आपका स्वागत है। हमारे उत्पादों और सेवाओं के बारे में कुछ भी पूछें।”
3. “हैलो! मैं यहाँ मदद के लिए हूँ। मैं आपकी किसमें सहायता कर सकता हूँ?”

---

विजेट स्थिति

स्थिति	सेटिंग मान	कब उपयोग करें
नीचे-दाएं	bottom-right (default)	मानक स्थान, अधिकांश साइटों के लिए काम करता है
नीचे-बाएं	bottom-left	जब दाईं ओर अन्य तत्वों से टकराव हो

---

अवतार

v1.6.4

एक इमेज URL प्रदान करके विजेट हेडर और होम स्क्रीन में कस्टम अवतार प्रदर्शित करें।

डैशबोर्ड के माध्यम से: Settings → Channels → Web → Customizer → Avatar URL में अवतार URL सेट करें।

एम्बेड कोड के माध्यम से: थीम कॉन्फ़िगरेशन में avatarUrl पास करें:

<script>
  window.ClientaConfig = {
    botId: "YOUR_BOT_ID",
    widgetId: "YOUR_WIDGET_ID",
    theme: {
      avatarUrl: "https://example.com/your-logo.png"
    }
  };
</script>

आवश्यकताएं:

• https:// URL होना चाहिए (सुरक्षा कारणों से http, data: और javascript: URL अस्वीकार किए जाते हैं)
• अनुशंसित आकार: 128 × 128 पिक्सेल (वर्गाकार)
• समर्थित फ़ॉर्मेट: PNG, JPG, WebP, SVG
• यदि URL अमान्य है या इमेज लोड होने में विफल रहती है, तो डिफ़ॉल्ट आइकन प्रदर्शित होता है

---

ग्रीटिंग मोड

v1.6.2

ग्रीटिंग संदेश तीन भाषा मोड का समर्थन करता है। Settings → Channels → Web → Customizer पर जाएं और Greeting Mode अनुभाग देखें।

स्टैटिक

भाषा की परवाह किए बिना हर विज़िटर को एक ही ग्रीटिंग टेक्स्ट दिखाया जाता है। यह डिफ़ॉल्ट मोड है।

टेक्स्ट फ़ील्ड में एकल ग्रीटिंग दर्ज करें। उदाहरण: “नमस्ते! आज मैं आपकी कैसे मदद कर सकता हूँ?”

विज़िटर से मिलान करें (locale)

प्रत्येक भाषा के लिए अलग ग्रीटिंग दिखाएं। विजेट विज़िटर की पहचानी गई भाषा पढ़ता है और मिलान करने वाली ग्रीटिंग दिखाता है।

1. Match Visitor मोड चुनें।
2. समर्थित 15 locale में से प्रत्येक के लिए एक फ़ील्ड दिखाई देती है।
3. उन भाषाओं के लिए ग्रीटिंग टेक्स्ट भरें जिन्हें आप समर्थन देना चाहते हैं।
4. उस भाषा के लिए Static ग्रीटिंग पर वापस जाने के लिए किसी locale की फ़ील्ड खाली छोड़ दें।

उदाहरण सेटअप:

• Thai: “สวัสดีค่ะ! มีอะไรให้ช่วยไหม?”
• English: “Hi! How can I help you today?”
• Japanese: “こんにちは！何かお手伝いできますか？“

Org-Main

ग्रीटिंग हमेशा विज़िटर की भाषा की परवाह किए बिना संगठन की मुख्य प्रतिक्रिया भाषा में दिखाई जाती है। यह मोड AI Settings → Main Response Language में सेट भाषा पढ़ता है।

Org-Main का उपयोग करें जब आपकी टीम एक भाषा में काम करती हो और आप चाहते हों कि सभी ग्रीटिंग एकसमान हों।

---

भाषा सेलेक्टर

v1.6.2

भाषा सेलेक्टर विजेट हेडर में एक ग्लोब आइकन (🌐) जोड़ता है ताकि विज़िटर स्पष्ट रूप से अपनी भाषा चुन सकें। यह डिफ़ॉल्ट रूप से अक्षम है।

सक्षम करने के लिए: Settings → Channels → Web → Customizer में, Show Language Selector को ON पर टॉगल करें।

जब कोई विज़िटर ड्रॉपडाउन से भाषा चुनता है:

• सभी AI प्रतिक्रियाएं उस सत्र के लिए उस भाषा में लॉक हो जाती हैं
• यदि विज़िटर किसी अन्य भाषा में टाइप करता है तो भी लॉक ऑटो-डिटेक्शन को ओवरराइड करता है
• विजेट UI चुनी हुई भाषा में बदल जाती है

पूर्ण व्यवहार अवलोकन के लिए Web Widget — Language Selector देखें।

---

डिफ़ॉल्ट भाषा

v1.6.8

विजेट के लिए एक डिफ़ॉल्ट भाषा सेट करें ताकि कोई भी ऑटो-डिटेक्शन होने से पहले विज़िटर आपके पसंदीदा locale में UI देखें। Settings → Channels → Web → Customizer → Default Language पर जाएं और ड्रॉपडाउन से चुनें।

भाषा प्राथमिकता क्रम इस प्रकार है:

1. Force This Language (AI Settings) — सक्षम होने पर सब कुछ ओवरराइड करता है
2. विज़िटर का स्पष्ट चयन (भाषा सेलेक्टर के माध्यम से, यदि सक्षम हो)
3. Default Language — यह सेटिंग
4. Embed config locale — एम्बेड कोड में locale मान
5. Thai — जब कुछ और सेट न हो तो फ़ॉलबैक

एम्बेड कोड के locale मान पर निर्भर रहने और इस सेटिंग को छोड़ने के लिए “None — follow embed config” चुनें।

टिप्पणी

Default Language केवल विजेट UI भाषा को प्रभावित करता है। AI प्रतिक्रिया भाषा AI Settings में अलग से नियंत्रित होती है।

---

डार्क मोड और CSS वेरिएबल

v1.6.8

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

मुख्य CSS वेरिएबल

वेरिएबल	विवरण
--cw-primary	प्राथमिक ब्रांड रंग (आपकी थीम रंग सेटिंग से)
--cw-primary-rgb	प्राथमिक रंग के RGB घटक, पारदर्शिता प्रभावों के लिए उपयोग किए जाते हैं
--cw-bg	विजेट पृष्ठभूमि रंग
--cw-bg-secondary	द्वितीयक पृष्ठभूमि (इनपुट फ़ील्ड, फ़ॉर्म तत्व)
--cw-surface	कार्ड, टूलटिप, उद्धरण स्निपेट के लिए सरफेस रंग
--cw-text	प्राथमिक टेक्स्ट रंग
--cw-text-secondary	द्वितीयक/म्यूट टेक्स्ट रंग
--cw-border	विभाजकों और इनपुट आउटलाइन के लिए बॉर्डर रंग

डार्क मोड टॉगल होने पर, विजेट रूट कंटेनर पर cw-dark या cw-light क्लास लागू करता है, और सभी CSS वेरिएबल स्वचालित रूप से अपडेट हो जाते हैं। ग्रेडिएंट हेडर, मैसेज बबल, संपर्क फ़ॉर्म और उद्धरण चिप्स सभी वर्तमान मोड का सम्मान करते हैं।

टिप्पणी

डार्क मोड एक विज़िटर-साइड टॉगल है — यह सत्रों के बीच बना नहीं रहता। विज़िटर अपने चैट सत्र के दौरान डार्क मोड सक्रिय न करे तो विजेट डिफ़ॉल्ट रूप से लाइट मोड में रहता है।

---

पूर्वावलोकन

परिवर्तन करने के बाद, सेटिंग्स पेज के दाईं ओर Live Preview पैनल का उपयोग करें और सहेजने से पहले देखें कि विजेट आपकी साइट पर बिल्कुल कैसा दिखेगा।

---

सुझाव

संकेत

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