跳至主要内容

範例專案

可直接複製執行的完整接入範例。

純 HTML 最小接入​

將以下內容儲存為 .html 檔案，用瀏覽器開啟即可看到效果：

<!DOCTYPE html>
<html lang="zh-TW">
<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 接入範例</h1>
  <p>頁面右下角應出現聊天浮窗圖示。</p>

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

  window.__twt__config = {
    appid: "以專案 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 專案接入​

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    window.__twt__config = {
      appid: '以專案 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>你的應用內容</div>;
}

export default App;

Vue 3 專案接入​

<template>
  <div>你的應用內容</div>
</template>

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

let scriptEl = null;

onMounted(() => {
  window.__twt__config = {
    appid: '以專案 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>

自訂觸發按鈕​

隱藏預設浮窗圖示，改用自訂按鈕開啟聊天視窗：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <title>自訂觸發按鈕</title>
</head>
<body>
  <button id="open-chat">聯絡客服</button>

  <script>
  window.__twt__config = {
    appid: "以專案 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>

傳遞登入使用者資訊​

將已登入使用者的身份同步到客服工作台。sbs_mm 簽名必須在伺服器端生成：

// 在伺服器端（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)
}

// 範例
const sbs = 'user_1001'
const ranstr = crypto.randomBytes(8).toString('hex')
const sbsMm = generateSbsMm(sbs, process.env.APP_SECRET, ranstr)
// 將 sbs、sbsMm、ranstr 注入到頁面中
<!-- 將伺服器生成的值注入前端 config -->
<script>
window.__twt__config = {
  appid: "以專案 APPID 為準",
  lang: "en",
  sbs: "user_1001",
  sbs_mm: "伺服器端生成的簽名",
  ranstr: "伺服器端生成的隨機字串",
  name: "王小明",
  email: "ming@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>
安全警告

APP_SECRET 必須保留在伺服器端，切勿暴露到前端程式碼中。

多語言切換​

在頁面上提供語言切換按鈕，在執行時切換聊天元件語言：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>多語言切換</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: "以專案 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>
還沒有帳號？

免費註冊 TWT Chat 取得網站程式碼，快速完成接入。