跳至主要内容

範例專案

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

純 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>... Demo</title>
  </head>
  <body>
    <h1>... 接入範例</h1>
    <p>頁面右下角應出現聊天浮窗圖示。</p>

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

      window.__twt = {
        appid: "以專案APPID為準",
      };

      (function (n, t) {
        var e = {
          init: function () {
            var n = t.createElement("script");
            n.async = !0;
            n.type = "text/javascript";
            n.src = "...";
            t.head.appendChild(n);
          },
        };
        e.init();
      })(window, document);
    </script>
  </body>
</html>

React 專案接入​

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: "以專案APPID為準",
      language: "zh-tw",
    };

    const script = document.createElement("script");
    script.async = true;
    script.src = "...";
    document.head.appendChild(script);

    return () => {
      if (window.TWTChatWidget && window.TWTChatWidget.call) {
        window.TWTChatWidget.call("destroy");
      }
      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.TWTChatWidget = window.TWTChatWidget || {
    _q: [],
    on: function () {
      this._q.push(["on", Array.prototype.slice.call(arguments)]);
    },
  };

  window.__twt = {
    appid: "以專案APPID為準",
    language: "zh-tw",
  };

  scriptEl = document.createElement("script");
  scriptEl.async = true;
  scriptEl.src = "...";
  document.head.appendChild(scriptEl);
});

onUnmounted(() => {
  if (window.TWTChatWidget && window.TWTChatWidget.call) {
    window.TWTChatWidget.call("destroy");
  }
  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.TWTChatWidget = window.TWTChatWidget || {
        _q: [],
        on: function () {
          this._q.push(["on", Array.prototype.slice.call(arguments)]);
        },
      };

      window.__twt = {
        appid: "以專案APPID為準",
        language: "zh-tw",
        launcher: "custom",
      };
      (function (n, t) {
        var e = {
          init: function () {
            var n = t.createElement("script");
            n.async = !0;
            n.src = "...";
            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>

傳遞登入使用者資訊​

將已登入使用者的身份同步到客服工作台。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 注入到頁面中
<!-- 將伺服器生成的值注入前端頁面 -->
<script>
  window.TWTChatWidget = window.TWTChatWidget || {
    _q: [],
    on: function () {
      this._q.push(["on", Array.prototype.slice.call(arguments)]);
    },
  };

  window.__twt = {
    appid: "以專案APPID為準",
    language: "zh-tw",
  };

  window.TWTChatWidget.on("initialized", function () {
    window.TWTChatWidget.login(
      "user_1001",
      "伺服器端生成的簽名",
      "伺服器端生成的隨機字串",
      "王小明",
      "小明",
      "ming@example.com",
    );
  });

  (function (n, t) {
    var e = {
      init: function () {
        var n = t.createElement("script");
        n.async = !0;
        n.src = "...";
        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.TWTChatWidget = window.TWTChatWidget || {
        _q: [],
        on: function () {
          this._q.push(["on", Array.prototype.slice.call(arguments)]);
        },
      };

      window.__twt = {
        appid: "以專案APPID為準",
        language: "zh-tw",
      };
      (function (n, t) {
        var e = {
          init: function () {
            var n = t.createElement("script");
            n.async = !0;
            n.src = "...";
            t.head.appendChild(n);
          },
        };
        e.init();
      })(window, document);

      function setLang(lang) {
        if (window.TWTChatWidget && window.TWTChatWidget.setLanguage) {
          window.TWTChatWidget.setLanguage(lang);
        }
      }
    </script>
  </body>
</html>
還沒有帳號？

... 取得網站程式碼，快速完成接入。