Example Projects

Complete integration examples you can copy and run directly.

Each generated example includes an optional window.__twt.wcode field. Replace YOUR_WCODE with the read-only value from the customer-service workspace list to target a specific workspace, or remove the field to use the project default.

Minimal HTML Setup

Save the following as an .html file and open it in the browser to see the widget:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TWT Chat Demo</title>
  </head>
  <body>
    <h1>TWT Chat Integration Demo</h1>
    <p>You should see the chat launcher in the bottom-right corner.</p>

    <script>
      window.TWTChatWidget = window.TWTChatWidget || {
        _q: [],
        on: function () {
          this._q.push(["on", Array.prototype.slice.call(arguments)]);
        },
      };

      window.__twt = {
        appid: "YOUR_APPID",
        wcode: "YOUR_WCODE",
      };

      (function (n, t) {
        var e = {
          init: function () {
            var n = t.createElement("script");
            n.async = !0;
            n.type = "text/javascript";
            n.src = "https://widget.js-chat.com/install/core.js?version=v1.2";
            t.head.appendChild(n);
          },
        };
        e.init();
      })(window, document);
    </script>
  </body>
</html>

React Integration

import { useEffect } from "react";

function App() {
  useEffect(() => {
    window.TWTChatWidget = window.TWTChatWidget || {
      _q: [],
      on: function () {
        this._q.push(["on", Array.prototype.slice.call(arguments)]);
      },
    };

    window.__twt = {
      appid: "YOUR_APPID",
      wcode: "YOUR_WCODE",
      language: "en",
    };

    const script = document.createElement("script");
    script.async = true;
    script.src = "https://widget.js-chat.com/install/core.js?version=v1.2";
    document.head.appendChild(script);

    return () => {
      if (window.TWTChatWidget && window.TWTChatWidget.call) {
        window.TWTChatWidget.call("destroy");
      }
      document.head.removeChild(script);
    };
  }, []);

  return <div>Your app content</div>;
}

export default App;

Vue 3 Integration

<template>
  <div>Your app content</div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";

let scriptEl = null;

onMounted(() => {
  window.TWTChatWidget = window.TWTChatWidget || {
    _q: [],
    on: function () {
      this._q.push(["on", Array.prototype.slice.call(arguments)]);
    },
  };

  window.__twt = {
    appid: "YOUR_APPID",
    wcode: "YOUR_WCODE",
    language: "en",
  };

  scriptEl = document.createElement("script");
  scriptEl.async = true;
  scriptEl.src = "https://widget.js-chat.com/install/core.js?version=v1.2";
  document.head.appendChild(scriptEl);
});

onUnmounted(() => {
  if (window.TWTChatWidget && window.TWTChatWidget.call) {
    window.TWTChatWidget.call("destroy");
  }
  if (scriptEl) document.head.removeChild(scriptEl);
});
</script>

Custom Trigger Button

Hide the default launcher and open the chat window with your own button:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Custom Trigger Button</title>
  </head>
  <body>
    <button id="open-chat">Contact Support</button>

    <script>
      window.TWTChatWidget = window.TWTChatWidget || {
        _q: [],
        on: function () {
          this._q.push(["on", Array.prototype.slice.call(arguments)]);
        },
      };

      window.__twt = {
        appid: "YOUR_APPID",
        wcode: "YOUR_WCODE",
        language: "en",
        launcher: "custom",
      };
      (function (n, t) {
        var e = {
          init: function () {
            var n = t.createElement("script");
            n.async = !0;
            n.src = "https://widget.js-chat.com/install/core.js?version=v1.2";
            t.head.appendChild(n);
          },
        };
        e.init();
      })(window, document);

      document
        .getElementById("open-chat")
        .addEventListener("click", function () {
          if (window.TWTChatWidget && window.TWTChatWidget.call) {
            window.TWTChatWidget.call("maximize");
          }
        });
    </script>
  </body>
</html>

Pass Logged-In User Information

Sync the identity of a logged-in user to the agent console. The sbs_mm signature must be generated on the server:

// Generate the signature on the server (Node.js)
const crypto = require("crypto");

function md5(str) {
  return crypto.createHash("md5").update(str).digest("hex");
}

function generateSbsMm(sbs, appSecret, ranstr) {
  return md5(md5(sbs + "_" + appSecret) + "_" + ranstr);
}

// Example
const sbs = "user_1001";
const ranstr = crypto.randomBytes(8).toString("hex");
const sbsMm = generateSbsMm(sbs, process.env.APP_SECRET, ranstr);
// Inject sbs, sbsMm, and ranstr into the page

<!-- Inject server-generated values into the frontend page -->
<script>
  window.TWTChatWidget = window.TWTChatWidget || {
    _q: [],
    on: function () {
      this._q.push(["on", Array.prototype.slice.call(arguments)]);
    },
  };

  window.__twt = {
    appid: "YOUR_APPID",
    wcode: "YOUR_WCODE",
    language: "en",
  };

  window.TWTChatWidget.on("initialized", function () {
    window.TWTChatWidget.login(
      "user_1001",
      "Signature generated on the server",
      "Random string generated on the server",
      "Jane Doe",
      "Jane",
      "jane@example.com",
    );
  });

  (function (n, t) {
    var e = {
      init: function () {
        var n = t.createElement("script");
        n.async = !0;
        n.src = "https://widget.js-chat.com/install/core.js?version=v1.2";
        t.head.appendChild(n);
      },
    };
    e.init();
  })(window, document);
</script>

Security Warning

APP_SECRET must stay on the server. Never expose it to frontend code.

Dynamic Language Switching

Provide a language switcher on the page and change the widget language at runtime:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Language Switcher</title>
  </head>
  <body>
    <button onclick="setLang('en')">English</button>
    <button onclick="setLang('zh-cn')">简体中文</button>
    <button onclick="setLang('zh-tw')">繁體中文</button>
    <button onclick="setLang('es')">Español</button>
    <button onclick="setLang('fr')">Français</button>
    <button onclick="setLang('de')">Deutsch</button>
    <button onclick="setLang('pt')">Português</button>
    <button onclick="setLang('ru')">Русский</button>
    <button onclick="setLang('ja')">日本語</button>
    <button onclick="setLang('ko')">한국어</button>
    <button onclick="setLang('vi')">Tiếng Việt</button>
    <button onclick="setLang('th')">ไทย</button>
    <button onclick="setLang('id')">Bahasa Indonesia</button>
    <button onclick="setLang('ms')">Bahasa Melayu</button>
    <button onclick="setLang('tl')">Filipino</button>

    <script>
      window.TWTChatWidget = window.TWTChatWidget || {
        _q: [],
        on: function () {
          this._q.push(["on", Array.prototype.slice.call(arguments)]);
        },
      };

      window.__twt = {
        appid: "YOUR_APPID",
        wcode: "YOUR_WCODE",
        language: "en",
      };
      (function (n, t) {
        var e = {
          init: function () {
            var n = t.createElement("script");
            n.async = !0;
            n.src = "https://widget.js-chat.com/install/core.js?version=v1.2";
            t.head.appendChild(n);
          },
        };
        e.init();
      })(window, document);

      function setLang(lang) {
        if (window.TWTChatWidget && window.TWTChatWidget.setLanguage) {
          window.TWTChatWidget.setLanguage(lang);
        }
      }
    </script>
  </body>
</html>

Need an account?

Create a free TWT Chat account to get your website code and go live quickly.

Minimal HTML Setup​

React Integration​

Vue 3 Integration​

Custom Trigger Button​

Pass Logged-In User Information​

Dynamic Language Switching​