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

लॉग इन उपयोगकर्ताओं को सत्यापित करें

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

अपना साइनिंग सीक्रेट अपनी वेबसाइट इनबॉक्स सेटिंग्स में, प्री-चैट फ़ॉर्म टैब में, पहचान सत्यापन कार्ड में पाएं।

import crypto from "crypto";

const identifierHash = crypto
  .createHmac("sha256", process.env.DESKWOOT_IDENTITY_SECRET)
  .update(userId)          // your stable user id, as a string
  .digest("hex");

window.deskwootSettings = {
  widgetToken: "YOUR_WIDGET_TOKEN",
  user: {
    identifier: "user_4711",            // your stable user id
    email: "jane@example.com",          // optional
    name: "Jane Doe",                   // optional
    identifierHash: "<HMAC-SHA256 of identifier, computed on your server>"
  }
};

उन सिंगल-पेज ऐप्स के लिए जो पेज लोड होने के बाद उपयोगकर्ता को लॉग इन करते हैं, साइन किया गया उपयोगकर्ता मिलते ही window.deskwoot.identify(user) कॉल करें। यह मौजूदा विज़िटर को बिना रीलोड अपडेट करता है।

हैश आपके सर्वर से आना चाहिए। इसे कभी ब्राउज़र में कंप्यूट न करें, और सीक्रेट को कभी क्लाइंट को न भेजें। जिसके पास सीक्रेट है वह आपके उपयोगकर्ताओं का रूप धर सकता है।

स्क्रिप्ट लोड होने के बाद, 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
  id="support-fab"
  onclick="window.deskwootWidget.open({ anchor: this })"
  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>

<!--
  open()/toggle() accept an optional anchor so the panel grows OUT of
  your own element instead of the default corner:

    open({ anchor: this })                       // grow from this button
    open({ anchor: "#support-fab" })             // ...or a CSS selector
    open({ anchor: { x: 120, y: 640 } })         // ...or a viewport point

  anchor      CSS selector | DOM element | { x, y }  (null = default corner)
  align       "auto" (default) | "bottom-left" | "bottom-right"
              | "top-left" | "top-right"  — which corner it grows from
  offset      { x, y } px nudge for fine alignment

  Set window.deskwootSettings.openAnchor / .openAlign to make it the
  default for every open(); pass open({ anchor: null }) for a one-off
  default-corner open. Desktop only; mobile stays full-screen.
-->

सुझाव

• {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 पर एक संदेश भेजें।