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. लाइव चैट प्रकार का नया इनबॉक्स बनाएँ, या अपना मौजूदा इनबॉक्स खोलें।
4. विजेट टैब में विजेट इंस्टॉलेशन कार्ड आपके अपने widgetToken के साथ स्निपेट दिखाता है। इसे जैसा है वैसा ही कॉपी करें।

सभी विकल्प window.deskwootSettings पर होते हैं। केवल widgetToken ज़रूरी है।

window.deskwootSettings = {
  widgetToken: "YOUR_WIDGET_TOKEN",

  // Optional: a verified, logged in visitor (see Identity verification)
  user: {
    identifier: "user_4711",
    identifierHash: "<HMAC-SHA256 of identifier, from your server>",
    email: "jane@example.com",
    name: "Jane Doe"
  },

  // Optional: open the panel out of your own button on desktop
  openAnchor: "#support-button",
  openAlign: "auto"
};

जब विज़िटर आपकी साइट पर लॉग इन हों, तो विजेट को बताएँ कि वे कौन हैं। तब उनके वार्तालाप किसी अनाम विज़िटर की तरह नहीं, बल्कि नाम, ईमेल और इतिहास के साथ आते हैं।

विजेट केवल वही पहचान स्वीकार करता है जिस पर आपके सर्वर ने हस्ताक्षर किए हों। आप उपयोगकर्ता 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
    identifierHash: "<HMAC-SHA256 of identifier, computed on your server>",
    email: "jane@example.com",          // optional
    name: "Jane Doe",                   // optional
    attributes: { plan: "Pro" },        // optional, shown on the contact
    attributesIssuedAt: 1760781600,     // optional: unix seconds you signed them at
    attributesHash: "<HMAC-SHA256 of the signed attributes, from your server>"  // optional
  }
};

identifier आपकी स्थायी उपयोगकर्ता id है और केवल यही फ़ील्ड हस्ताक्षरित होती है। email, name और attributes (टेक्स्ट का एक सरल मैप, जैसे प्लान या कंपनी id, जो संपर्क पर दिखता है) वैकल्पिक हैं। सत्यापित विज़िटर हर बार उसी संपर्क पर पहुँचता है, पिछले वार्तालाप, नोट्स और एट्रिब्यूट के साथ। AI बॉट लाइव चैट में इस विज़िटर को केवल हस्ताक्षरित एट्रिब्यूट के आधार पर जवाब देता है (नीचे देखें), और केवल तब जब उसके Data Access में संपर्क शामिल हों।

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

हस्ताक्षरित एट्रिब्यूट

identifierHash केवल उपयोगकर्ता id पर हस्ताक्षर करता है, इसलिए विज़िटर ब्राउज़र में attributes बदल सकता है। AI बॉट को इनसे जवाब देने देने के लिए, इन्हें अपने सर्वर पर हस्ताक्षरित करें और साथ में attributesHash और attributesIssuedAt भेजें। बिना हस्ताक्षर वाले एट्रिब्यूट, और API या आपकी टीम द्वारा लिखे गए एट्रिब्यूट, संपर्क पर दिखते रहते हैं, लेकिन बॉट उन्हें कभी नहीं पढ़ता। बॉट विज़िटर को बता सकता है कि हस्ताक्षरित एट्रिब्यूट में क्या लिखा है, इसलिए केवल वही हस्ताक्षरित करें जो विज़िटर देख सकता है।

attributesHash छोटे अक्षरों वाला hex HMAC-SHA256 है, उसी इनबॉक्स सीक्रेट के साथ, चार पंक्तियों पर जो एक लाइन ब्रेक (\n) से जुड़ी हैं: टेक्स्ट deskwoot-attributes-v1, उपयोगकर्ता id, attributesIssuedAt और एट्रिब्यूट का कैनॉनिकल JSON। कैनॉनिकल JSON: कुंजियाँ Unicode code point के क्रम में, कोई स्पेस नहीं, ASCII के बाहर के अक्षर जैसे हैं वैसे (बिना escape), और मान केवल टेक्स्ट, संख्या, true, false और null (कोई नेस्टेड ऑब्जेक्ट या सूची नहीं)। Python का json.dumps(attributes, sort_keys=True, separators=(",", ":"), ensure_ascii=False) ठीक यही लिखता है।

दशमलव संख्याएँ और बहुत बड़े पूर्णांक (9007199254740991 से ऊपर) टेक्स्ट के रूप में भेजें। Python 1.0 लिखता है जहाँ JavaScript 1 लिखता है, इसलिए ऐसी संख्याएँ दोनों तरफ़ एक जैसा हैश नहीं देंगी।

attributesIssuedAt वह unix समय है, पूरे सेकंड में, जब आपने सेट हस्ताक्षरित किया। Deskwoot अधिकतम 24 घंटे पुराने और अपनी घड़ी से अधिकतम 5 मिनट आगे के सेट का उपयोग करता है, और कभी भी उस उपयोगकर्ता के लिए पिछली बार उपयोग किए गए सेट से पुराने का नहीं, इसलिए हर पेज लोड पर फिर से हस्ताक्षर करें। इसके बाहर विज़िटर फिर भी सत्यापित रहता है, लेकिन उस अनुरोध के एट्रिब्यूट अनदेखे किए जाते हैं (संपर्क पर कुछ नहीं बदलता) और सत्यापन के जवाब में attributesIgnored के साथ out_of_range या stale होता है। गलत हैश को गलत identifierHash की तरह अस्वीकार किया जाता है, और विज़िटर तब अनाम रूप से चैट करता है। सीमाओं से बड़ा हस्ताक्षरित सेट भी: अधिकतम 30 कुंजियाँ, 64 अक्षरों तक की कुंजियाँ, 1024 अक्षरों तक के मान, और कोई ऐसी कुंजी नहीं जिसे Deskwoot अपने लिए आरक्षित रखता है, जैसे source।

हर हस्ताक्षरित सेट यह बदल देता है कि बॉट उस उपयोगकर्ता के लिए क्या पढ़ सकता है: जो कुंजी आप छोड़ देते हैं वह संपर्क पर रहती है, लेकिन बॉट उसे अब नहीं पढ़ता, और जिस कुंजी को आप null के रूप में हस्ताक्षरित करते हैं वह संपर्क से हटा दी जाती है।

import crypto from "crypto";

// Keys sorted by Unicode code point, no spaces, non ASCII characters raw.
// Values: strings, integers, true, false or null.
function canonicalJson(attributes) {
  const keys = Object.keys(attributes).sort((a, b) => {
    const x = Array.from(a), y = Array.from(b);
    for (let i = 0; i < Math.min(x.length, y.length); i++) {
      const d = x[i].codePointAt(0) - y[i].codePointAt(0);
      if (d !== 0) return d;
    }
    return x.length - y.length;
  });
  return "{" + keys.map((k) => JSON.stringify(k) + ":" + JSON.stringify(attributes[k])).join(",") + "}";
}

const attributesIssuedAt = Math.floor(Date.now() / 1000);
const message = "deskwoot-attributes-v1\n" + userId + "\n" + attributesIssuedAt + "\n" + canonicalJson(attributes);
const attributesHash = crypto
  .createHmac("sha256", process.env.DESKWOOT_IDENTITY_SECRET)
  .update(message)
  .digest("hex");

import hashlib, hmac, json, os, time

attributes_issued_at = int(time.time())
canonical = json.dumps(attributes, sort_keys=True, separators=(",", ":"), ensure_ascii=False)
message = "deskwoot-attributes-v1\n" + user_id + "\n" + str(attributes_issued_at) + "\n" + canonical
attributes_hash = hmac.new(
    os.environ["DESKWOOT_IDENTITY_SECRET"].encode(),
    message.encode("utf-8"),
    hashlib.sha256,
).hexdigest()

secret              test_identity_secret
identifier          user_4711
attributesIssuedAt  1760781600
attributes          { "plan": "Pro", "status": "verified", "trades": 12, "vip": true,
                      "referrer": null, "city": "Zürich", "Zone": "EU" }

canonical JSON      {"Zone":"EU","city":"Zürich","plan":"Pro","referrer":null,"status":"verified","trades":12,"vip":true}

signed message (4 lines, joined by \n, no line break at the end):
deskwoot-attributes-v1
user_4711
1760781600
{"Zone":"EU","city":"Zürich","plan":"Pro","referrer":null,"status":"verified","trades":12,"vip":true}

attributesHash      bd363335977152a3b73cfb6c042c9afc823f18eab73faff36acddfffd0b1e1f5

लोडर चलते ही window.deskwoot (जो window.deskwootWidget के रूप में भी उपलब्ध है) से आप अपने इंटरफ़ेस से विजेट चला सकते हैं, जैसे आपके नेविगेशन में एक संपर्क लिंक जो सपोर्ट पेज के बजाय चैट खोलता है।

विजेट के शुरू होते समय किए गए कॉल एक कतार में रुकते हैं और उसके तैयार होते ही चलते हैं, इसलिए इंतज़ार या बार बार जाँच की ज़रूरत नहीं।

// window.deskwoot (alias window.deskwootWidget) exists as soon as the
// loader script has run. Calls made while the widget is still starting
// are queued, so there is no need to wait or poll. Only code that runs
// before the loader itself needs the guard below.
function openDeskwoot() {
  if (window.deskwoot) {
    window.deskwoot.open();
  }
}

openDeskwoot();                 // open the chat panel
// window.deskwoot.close();     // close it again
// window.deskwoot.toggle();    // open or close

// Unread agent messages for this visitor:
console.log(window.__deskwootUnread);

embedded: true तब सेट करें जब विजेट ऐसे कंटेनर में हो जो पूरी स्क्रीन लेता है, आमतौर पर मोबाइल ऐप का WebView, पूरे पेज की संपर्क स्क्रीन, या अपने फ़्रेम वाला मोडल।

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

<div id="support-pane" style="height: 600px"></div>

<script>
  window.deskwootSettings = {
    widgetToken: "YOUR_WIDGET_TOKEN",
    embedded: true,
    container: "#support-pane"   // leave out to fill the whole viewport
  };
</script>

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

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

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

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

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

<button
  id="support-fab"
  onclick="window.deskwoot.open({ anchor: this })"
  style="position:fixed;bottom:20px;right:20px;border:0;border-radius:9999px;padding:12px 18px;cursor:pointer;font-weight:600"
>
  Help
</button>

<!--
  open() and toggle() take 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 from a CSS selector
    open({ anchor: { x: 120, y: 640 } })    // or from a viewport point

  anchor   CSS selector, DOM element or { x, y } (null = default corner)
  align    "auto" (default), "bottom-left", "bottom-right",
           "top-left" or "top-right": the corner it grows from
  offset   { x, y } in px, to fine tune the position

  window.deskwootSettings.openAnchor and .openAlign make this the
  default for every open(); open({ anchor: null }) opens one time in
  the default corner. Desktop only; phones always get full screen.
-->

सुझाव

• open() के बजाय deskwoot.toggle() को कॉल करें यदि आप चाहते हैं कि वही ट्रिगर पैनल को बंद कर दे जब वह पहले से खुला हो।
• window.__deskwootUnread से अपने ट्रिगर पर बिना पढ़े संदेशों का बैज दिखाएँ, यह संख्या पैनल बंद रहने पर अपडेट होती रहती है।
• लॉगिन के पीछे वाले हर पेज पर ट्रिगर को एक ही जगह रखें, ताकि उपयोगकर्ता हमेशा जानें कि सपोर्ट कहाँ है।

सामान्य वेबसाइट इंस्टॉल के लिए आपको अपने ट्रिगर की ज़रूरत नहीं: deskwoot-loader.js बबल बनाता है और क्लिक संभालता है।

अगर आपकी साइट Content Security Policy हेडर भेजती है, तो Deskwoot के ओरिजिन को अनुमति दें। एक सामान्य न्यूनतम पॉलिसी:

script-src  'unsafe-inline' https://deskwoot.com;
connect-src https://deskwoot.com;
frame-src   https://deskwoot.com;
style-src   'unsafe-inline';

इंस्टॉल स्निपेट एक इनलाइन स्क्रिप्ट है, इसलिए script-src को 'unsafe-inline', nonce या hash चाहिए। style-src 'unsafe-inline' इसलिए ज़रूरी है क्योंकि विजेट आपके पेज में एक छोटी स्टाइलशीट जोड़ता है, और frame-src इसलिए क्योंकि चैट deskwoot.com से आने वाले फ़्रेम में चलता है। अपनी पॉलिसी पर सवाल? hello@deskwoot.com पर लिखें।