JavaScript चैट विजेट

इस स्निपेट को अपने पेज टेम्पलेट में पेस्ट करें, आदर्श रूप से क्लोज़िंग </body> टैग से ठीक पहले। यह विजेट को अतुल्यकालिक रूप से लोड करता है, इसलिए यह रेंडरिंग को ब्लॉक नहीं करेगा।

<script>
  window.deskwootSettings = {
    widgetToken: "YOUR_WIDGET_TOKEN"
  };
  (function (d, t) {
    var g = d.createElement(t);
    var s = d.getElementsByTagName(t)[0];
    g.src = "https://deskwoot.com/widget/deskwoot-loader.js";
    g.async = true;
    g.defer = true;
    s.parentNode.insertBefore(g, s);
  })(document, "script");
</script>

बस इतना ही - चैट बबल तुरंत निचले-दाएँ कोने में प्रकट होता है। कोई npm पैकेज नहीं, कोई बंडलर नहीं, कोई बिल्ड स्टेप नहीं। Next.js, React, Vue, Shopify थीम, WordPress, सादे HTML के अंदर काम करता है, जहाँ कहीं भी JavaScript चलता है।

1. में लॉग इन करें Deskwoot डैशबोर्ड (खाता मालिक के रूप में, अंतिम आगंतुक के रूप में नहीं - विजेट को स्वयं किसी अंतिम-उपयोगकर्ता लॉगिन की आवश्यकता नहीं है)।
2. पर जाएँ सेटिंग्स → इनबॉक्स।
3. एक नया इनबॉक्स प्रकार Website बनाएँ, या मौजूदा को खोलें।
4. टैब खोलें Install - आपके इनबॉक्स-विशिष्ट widgetToken के साथ पेस्ट-तैयार स्निपेट वहाँ दिखाया गया है। इसे ज्यों का त्यों कॉपी करें।

एक widgetToken = एक इनबॉक्स। उस विजेट से वार्तालाप हमेशा उसी इनबॉक्स में आते हैं, जहाँ आपके एजेंट उन्हें उठाते हैं। एक अलग टीम या एजेंटों के सेट पर रूट करने के लिए, एक दूसरा इनबॉक्स बनाएँ और उसके टोकन का उपयोग किसी अलग पेज पर करें।

सभी रनटाइम विकल्प window.deskwootSettings पर रहते हैं। केवल widgetToken आवश्यक है; बाकी सब कुछ का एक उचित डिफ़ॉल्ट है।

window.deskwootSettings = {
  widgetToken: "YOUR_WIDGET_TOKEN",
  color: "#2563EB",
  darkMode: false,
  position: "right",
  welcomeTitle: "Hi there!",
  welcomeMessage: "How can we help?",
  user: {
    email: "jane@example.com",
    name: "Jane Doe"
  }
};

यदि आगंतुक पहले से ही आपकी साइट पर लॉग इन है, तो उनके संपर्क विवरण पास करें ताकि बातचीत अनाम आगंतुक के बजाय पूर्ण संदर्भ के साथ आए।

window.deskwootSettings = {
  widgetToken: "...",
  user: {
    email: "jane@example.com",
    name: "Jane Doe"
  }
};

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

स्क्रिप्ट लोड होने के बाद, window.deskwootWidget आपके स्वयं के UI से विजेट चलाने के लिए कुछ विधियों को उजागर करता है - उदाहरण के लिए नेविगेशन में "हमसे संपर्क करें" लिंक जो किसी सहायता पृष्ठ पर नेविगेट करने के बजाय पैनल खोलना चाहिए।

// window.deskwootWidget is set when the async script finishes loading.
// Until then the methods aren't available — guard every call so a
// button click before the script lands doesn't throw "open of
// undefined". Queue the call and retry, or use a load-event hook.
function openDeskwootWidget() {
  if (window.deskwootWidget) {
    window.deskwootWidget.open();
    return;
  }
  // Retry briefly until the widget script is ready. The script
  // typically loads within ~200 ms; cap retries so a blocked CDN
  // doesn't spin forever.
  let tries = 0;
  const t = setInterval(function () {
    tries++;
    if (window.deskwootWidget) {
      clearInterval(t);
      window.deskwootWidget.open();
    } else if (tries > 50) {
      clearInterval(t); // give up after ~5 s
    }
  }, 100);
}

openDeskwootWidget();           // expand the chat panel
// window.deskwootWidget.close();   // also available after load
// window.deskwootWidget.toggle();  // also available after load

// Current unread agent-message count for this visitor:
console.log(window.__deskwootUnread);

embedded: true सेट करें जब आप विजेट को एक ऐसे कंटेनर के अंदर होस्ट कर रहे हों जो पूरे व्यूपोर्ट का स्वामी हो - आमतौर पर एक मोबाइल ऐप WebView, एक पूर्ण-पृष्ठ संपर्क स्क्रीन, या एक मोडल जो पहले से ही अपना क्रोम प्रदान करता है।

एम्बेडेड मोड में लॉन्चर बबल, ट्रिगर पॉपअप और क्लोज़ बटन छिपे होते हैं, और पैनल बिना छाया, बिना बॉर्डर-त्रिज्या, बिना 20px ऑफ़सेट के position:fixed; inset:0 तक फैल जाता है। Deskwoot iOS ऐप अपनी अंतर्निहित संपर्क सहायता स्क्रीन के अंदर ठीक इसी मोड का उपयोग करता है।

<button onclick="window.deskwootWidget.open()">Contact Support</button>

अनुशंसित स्थान

तीन पैटर्न जो हमने इन-ऐप सहायता के लिए अच्छी तरह काम करते देखे हैं:

<a href="#" onclick="window.deskwootWidget.open(); return false;" class="nav-item">
  <svg class="icon"><!-- chat-bubble icon --></svg>
  Contact Support
</a>

<div role="menuitem" onclick="window.deskwootWidget.open()">
  Chat with support
  <span class="kbd">?</span>
</div>

<button
  onclick="window.deskwootWidget.open()"
  style="position:fixed;bottom:20px;right:20px;background:#2563eb;color:#fff;border:0;border-radius:9999px;padding:12px 18px;box-shadow:0 6px 20px rgba(0,0,0,.15);cursor:pointer;font-weight:600"
>
  💬 Help
</button>

सुझाव

• {openCode} के बजाय deskwootWidget.toggle() को कॉल करें यदि आप चाहते हैं कि वही ट्रिगर पैनल को बंद कर दे जब वह पहले से खुला हो।open()
• window.__deskwootUnread का उपयोग करके अपने ट्रिगर पर अपठित-संदेश बैज दिखाएँ - एक संख्या जो पैनल बंद होने पर अपडेट होती है।
• ट्रिगर को प्रमाणित पृष्ठों पर लगातार रखें ताकि उपयोगकर्ता हमेशा जानें कि सहायता कहाँ ढूँढनी है। वैश्विक स्थान „छिपे हुए चैट" से रुक जाता है और „दृश्यमान सहायता बटन" बन जाता है।

मानक (गैर-एम्बेडेड) वेबसाइट इंस्टॉल के लिए आपको नहीं किसी कस्टम ट्रिगर की आवश्यकता है - deskwoot.js स्वयं बबल को रेंडर करता है और क्लिक को संभालता है।

यदि आपकी साइट CSP हेडर के साथ चलती है, तो Deskwoot की मूल को व्हाइटलिस्ट करें। विशिष्ट न्यूनतम कॉन्फ़िगरेशन:

script-src  'unsafe-inline' https://deskwoot.com;
connect-src https://deskwoot.com wss://deskwoot.com;
img-src     https://deskwoot.com data:;
style-src   'unsafe-inline';

style-src 'unsafe-inline' आवश्यक है क्योंकि विजेट अपना स्वयं का स्टाइलशीट इंजेक्ट करता है। यदि आपका CSP इनलाइन शैलियों को मना करता है, तो हम एक nonce पर जा सकते हैं - हमें hello@deskwoot.com पर एक संदेश भेजें।