Skip to main content

Example Projects

Complete integration examples you can copy and run directly.

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__config = {
    appid: "Use your project's APPID",
    icon: "1",
  };

  (function (n, t) {
    var e = {
      init: function () {
        var n = t.createElement("script");
        n.async = !0;
        n.type = "text/javascript";
        n.src = "https://visitor.chattwt.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.__twt__config = {
      appid: 'Use your project's APPID',
      lang: 'en',
    };

    const script = document.createElement('script');
    script.async = true;
    script.src = 'https://visitor.chattwt.com/install/core.js?version=v1.2';
    document.head.appendChild(script);

    return () => {
      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.__twt__config = {
    appid: 'Use your project's APPID',
    lang: 'en',
  };

  scriptEl = document.createElement('script');
  scriptEl.async = true;
  scriptEl.src = 'https://visitor.chattwt.com/install/core.js?version=v1.2';
  document.head.appendChild(scriptEl);
});

onUnmounted(() => {
  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.__twt__config = {
    appid: "Use your project's APPID",
    lang: "en",
    icon: "2"
  };
  (function(n, t) {
    var e = { init: function() {
      var n = t.createElement("script");
      n.async = !0;
      n.src = "https://visitor.chattwt.com/install/core.js?version=v1.2";
      t.head.appendChild(n);
    }};
    e.init();
  })(window, document);

  document.getElementById('open-chat').addEventListener('click', function() {
    if (window.__twt__api && window.__twt__api.open) {
      window.__twt__api.open();
    }
  });
  </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 config -->
<script>
window.__twt__config = {
  appid: "Use your project's APPID",
  lang: "en",
  sbs: "user_1001",
  sbs_mm: "Signature generated on the server",
  ranstr: "Random string generated on the server",
  name: "Jane Doe",
  email: "jane@example.com"
};
(function(n, t) {
  var e = { init: function() {
    var n = t.createElement("script");
    n.async = !0;
    n.src = "https://visitor.chattwt.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('ja')">日本語</button>
  <button onclick="setLang('ko')">한국어</button>
  <button onclick="setLang('de')">Deutsch</button>
  <button onclick="setLang('fr')">Français</button>
  <button onclick="setLang('pt')">Português</button>
  <button onclick="setLang('ru')">Русский</button>

  <script>
  window.__twt__config = {
    appid: "Use your project's APPID",
    lang: "en"
  };
  (function(n, t) {
    var e = { init: function() {
      var n = t.createElement("script");
      n.async = !0;
      n.src = "https://visitor.chattwt.com/install/core.js?version=v1.2";
      t.head.appendChild(n);
    }};
    e.init();
  })(window, document);

  function setLang(lang) {
    if (window.__twt__api && window.__twt__api.setLanguage) {
      window.__twt__api.setLanguage(lang);
    }
  }
  </script>
</body>
</html>
Need an account?

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