跳至主要内容

示例项目

可直接复制运行的完整接入示例。

纯 HTML 最小接入​

将以下内容保存为 .html 文件，用浏览器打开即可看到效果：

<!DOCTYPE html>
<html lang="zh-CN">
  <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-cn",
    };

    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-cn",
  };

  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-CN">
  <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-cn",
        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-cn",
  };

  window.TWTChatWidget.on("initialized", function () {
    window.TWTChatWidget.login(
      "user_1001",
      "服务端生成的签名",
      "服务端生成的随机串",
      "张三",
      "小张",
      "zhangsan@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-cn",
      };
      (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>
还没有账号？

... 获取网站代码，快速完成接入。