跳至主要内容

配置項參考

基礎安裝後即可使用默認聊天功能。如需自定義，可參考以下配置調整聊天組件的外觀和行為。

隱藏默認圖標​

將 icon 設置為 "2" 可隱藏右下角默認浮窗圖標，然後通過自定義按鈕觸發聊天窗口。

注意

button 需要替換為對應觸發元素的 ID。

<script>
// Hide default badge
if (window.__twt__config) {
  window.__twt__config.icon = '2'
}
// Customize the trigger for the visitor chat window
document.getElementById('button').addEventListener('click', function () {
  if (window.__twt__api && window.__twt__api.open) {
    window.__twt__api.open()
  }
})
</script>

監聽未讀消息數​

通過自定義事件監聽未讀消息數變化，可用於在自定義按鈕上顯示未讀角標。

注意

此代碼需放在 SDK 安裝腳本之後。

<script>
window.addEventListener('__twt__custom_event', (e) => {
  console.log('Unread message count:', e.detail.unread)
})
</script>

動態設置語言​

在運行時切換聊天組件的界面語言，無需重新加載頁面。

支持的語言代碼：zh-cn（簡體中文）、zh-tw（繁體中文）、en（英文）。

<script>
// lang: zh-cn | zh-tw | en
document.getElementById('button').addEventListener('click', function () {
  if (window.__twt__api && window.__twt__api.setLanguage) {
    window.__twt__api.setLanguage('{lang}')
  }
})
</script>

接入內部系統的客戶信息​

將你係統中已登錄用戶的信息同步到 TWT Chat，客服在工作臺中可直接查看訪客身份。

方式一：靜態設置（頁面加載時）​

在頁面加載時通過 window.__twt__config 設置客戶信息。需要在頁面加載時設置，否則無法生效。

<script>
if (window.__twt__config) {
  // 用戶唯一標識
  window.__twt__config.sbs = '{sbs}'
  // 用戶簽名
  // sbs_mm 生成規則: md5(md5(sbs + '_' + AppSecret) + '_' + ranstr)
  // 注: md5 結果為小寫 32 位
  // AppSecret 是生成 sbs_mm 的必要參數，請在開發設置中生成，並妥善保存，避免洩露。
  window.__twt__config.sbs_mm = '{sbs_mm}'
  // 隨機字符串（建議 16 位以上）
  window.__twt__config.ranstr = '{ranstr}'
  // 用戶姓名
  window.__twt__config.name = '{name}'
  // 用戶備註名
  window.__twt__config.nickname = '{nickname}'
  // 用戶郵箱
  window.__twt__config.email = '{email}'
  // 用戶電話
  window.__twt__config.phone = '{phone}'
}
</script>

方式二：動態設置（加載後調用）​

通過 login 方法動態設置客戶信息，適用於先無感登錄、在 SDK 加載後再設置的場景。

<script>
if (window.__twt__api && window.__twt__api.login) {
  window.__twt__api.login({sbs}, {sbs_mm}, {ranstr}, {name}, {nickname}, {email}, {phone})
}
</script>

sbs_mm 簽名生成規則​

sbs_mm 用於驗證用戶身份，需在服務端生成：

sbs_mm = md5( md5(sbs + '_' + AppSecret) + '_' + ranstr )
步驟操作示例
1拼接 sbs + _ + AppSecret1001_your_app_secret
2對步驟 1 結果取 MD5（小寫 32 位）a1b2c3d4...
3拼接步驟 2 結果 + _ + ranstra1b2c3d4..._random16string
4對步驟 3 結果取 MD5（小寫 32 位）最終 sbs_mm 值
安全警告

AppSecret 是生成 sbs_mm 的必要參數，請在 開發設置 中生成。務必在服務端完成簽名計算，切勿將 AppSecret 暴露到前端代碼中。