Website高级用法指南

 website通道支持基于LiveDesk Widget SDK 接口进行更多配置,满足用户需求。

LiveDesk Widget SDK接口

设置 Userid 及用户信息(普通模式)

window.addEventListener("livedesk:ready", function () { window.$livedesk.setUser("用户唯一ID(如 user_id)", { // 第一个参数为唯一标识符 email: "user@example.com", name: "用户姓名", avatar_url: "https://example.com/avatar.jpg", // 可选 phone_number: "+1234567890" // 可选 }); });
              
              window.addEventListener("livedesk:ready", function () {
  window.$livedesk.setUser("用户唯一ID(如 user_id)", {  // 第一个参数为唯一标识符
    email: "user@example.com",
    name: "用户姓名",
    avatar_url: "https://example.com/avatar.jpg",  // 可选
    phone_number: "+1234567890"  // 可选
  });
});

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

设置 Userid 及用户信息(加密模式)

启用身份验证(推荐):为防止伪造和确保会话跨浏览器持久化,在配置中启用 HMAC(使用 SHA256 生成 identifier_hash)。示例(JavaScript):

const crypto = require('crypto'); const key = '你的 HMAC Token'; // 从 Inboxes 设置复制 const message = '用户唯一ID'; const identifier_hash = crypto.createHmac('sha256', key).update(message).digest('hex'); // 在 setUser 中附加 window.$livedesk.setUser("用户唯一ID", { ...其他信息, identifier_hash: identifier_hash });
              
              const crypto = require('crypto');
const key = '你的 HMAC Token';  // 从 Inboxes 设置复制
const message = '用户唯一ID';
const identifier_hash = crypto.createHmac('sha256', key).update(message).digest('hex');

// 在 setUser 中附加
window.$livedesk.setUser("用户唯一ID", {
  ...其他信息,
  identifier_hash: identifier_hash
});

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

设置「对话自定义变量」

window.$livedesk.setConversationCustomAttributes({ utm_source: "google", // 示例:会话级 UTM session_type: "support" });
              
              window.$livedesk.setConversationCustomAttributes({
  utm_source: "google",  // 示例:会话级 UTM
  session_type: "support"
});

            
โค้ดนี้โชว์เป็นหน้าต่างลอย
  • 这些自定义变量在 livdesk - Conversation - 对话信息中显示。

设置「用户自定义变量」

window.addEventListener("livedesk:ready", function () { window.$livedesk.setCustomAttributes({ pricing_plan: "premium", // key: 预定义的唯一标识,value: 根据类型设置(如字符串) signup_date: new Date(), // 示例:日期类型 account_id: 123 // 示例:数字类型 }); });
              
              window.addEventListener("livedesk:ready", function () {
  window.$livedesk.setCustomAttributes({
    pricing_plan: "premium",  // key: 预定义的唯一标识,value: 根据类型设置(如字符串)
    signup_date: new Date(),  // 示例:日期类型
    account_id: 123           // 示例:数字类型
  });
});

            
โค้ดนี้โชว์เป็นหน้าต่างลอย
  • 这些自定义变量在「 livdesk - Conversation - 联系人属性」中显示。

删除用户属性

删除指定的自定义属性。

window.$livedesk.deleteCustomAttribute("pricing_plan");//string属性键名
              
              window.$livedesk.deleteCustomAttribute("pricing_plan");//string属性键名

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

切换聊天气泡的打开状态

切换小部件的打开/关闭状态。

window.$livdesk.toggle(); // Toggle widget by passing state window.$livedesk.toggle("open"); // 打开聊天部件 window.$livedesk.toggle("close"); // 关闭聊天部件
              
              window.$livdesk.toggle();

// Toggle widget by passing state
window.$livedesk.toggle("open"); // 打开聊天部件
window.$livedesk.toggle("close"); // 关闭聊天部件

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

显示/隐藏聊天气泡

window.$livedesk.toggleBubbleVisibility('hide');// show/hide
              
              window.$livedesk.toggleBubbleVisibility('hide');// show/hide

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

弹窗模式

以弹出窗口模式打开聊天界面。

window.$livedesk.popoutChatWindow();
              
              window.$livedesk.popoutChatWindow();

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

设置语言

设置小部件语言

window.$livedesk.setLocale("en");// string语言代码,示例:zh-CN
              
              window.$livedesk.setLocale("en");// string语言代码,示例:zh-CN

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

添加/移除标签

为当前会话添加标签(对话未开始前),标签将自动设置到对话中

window.$livdesk.setLabel('support-ticket');// string标签标识符 window.$livdesk.removeLabel('support-ticket');
              
              window.$livdesk.setLabel('support-ticket');// string标签标识符
window.$livdesk.removeLabel('support-ticket');

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

Livedesk Widget 配置对象

初始化时(加载 SDK 前)设置的全局对象,用于自定义小部件行为。通过 window.livedeskSettings 定义,然后在 window.livedeskSDK.run() 中传递。

对象属性

属性名称 类型 描述 默认值 示例
hideMessageBubble boolean 隐藏消息气泡。 false true
showUnreadMessagesDialog boolean 显示未读消息对话框。 true false
position string 小部件位置。 'right' 'left'
locale string 默认语言代码。 仪表盘语言 'zh-CN'
useBrowserLanguage boolean 使用浏览器语言(忽略 locale)。 false true
type string 小部件类型。 'standard' 'expanded_bubble'
darkMode boolean 启用暗黑模式。 false true
baseDomain string 基础域名(可选,用于多域名)。 - 'example.com'
launcherTitle string 启动器标题。 - '支持'
showPopoutButton boolean 显示弹出按钮。 true false
welcomeTitle string 欢迎标题。 - '欢迎!'
welcomeDescription string 欢迎描述。 - '如何帮助您?'
availableMessage string 在线消息。 - '我们在线。'
unavailableMessage string 离线消息。 - '我们稍后回复。'
enableFileUpload boolean 启用文件上传。 true false
enableEmojiPicker boolean 启用表情选择器。 true false
enableEndConversation boolean 启用结束对话按钮。 true false

示例代码

<script> // 1. 在加载 sdk.js 之前,先设置全局配置(必须放在脚本最前面) window.livedeskSettings = { // 小部件位置:左下角(默认是右下角) position: "left", // 语言强制为简体中文(即使浏览器是英文也会显示中文) locale: "zh-CN", // 自动检测浏览器语言(如果想优先用用户浏览器语言,设为 true 并删除上面的 locale) // useBrowserLanguage: true, // 小部件类型:expanded_bubble = 大气泡(带欢迎语),standard = 经典小气泡 type: "expanded_bubble", // 暗黑模式(自动跟随系统或强制暗色) darkMode: "auto", // 可选值:true | false | "auto" // 隐藏底部的小气泡图标(适合放在自定义按钮里) hideMessageBubble: false, // 隐藏右下角的“弹出窗口”小箭头按钮 showPopoutButton: false, // 自定义启动器标题(大气泡模式下显示) launcherTitle: "在线客服", // 欢迎消息(expanded_bubble 模式下生效) welcomeTitle: "您好!有什么可以帮助您的?", welcomeDescription: "我们通常会在几分钟内回复~", // 在线/离线时显示的提示文字 availableMessage: "我们在线,随时为您服务", unavailableMessage: "我们当前不在线,会在上班时间尽快回复您", // 功能开关 enableFileUpload: true, // 允许上传文件 enableEmojiPicker: true, // 允许使用表情 enableEndConversation: true, // 允许用户主动结束对话 // 其他高级选项(视需求打开) // showUnreadMessagesDialog: true, // 有未读消息时弹窗提醒(默认 true) // baseDomain: "yourcompany.com", // 多域名部署时使用 }; </script> <!-- 2. 加载 livedesk Widget SDK(替换成你自己的域名和 token)--> <script> (function(d,t) { var BASE_URL="https://www.engagelab.com"; // ← 改成你的 livedesk 地址 var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=BASE_URL+"/packs/js/sdk.js"; g.defer = true; g.async = true; s.parentNode.insertBefore(g,s); g.onload=function(){ window.livedeskSDK.run({ websiteToken: 'abcdefgh1234567890abcdefgh123456', // ← 改成你的 Website Token baseUrl: BASE_URL }); } })(document,"script"); </script>
              
              <script>
// 1. 在加载 sdk.js 之前,先设置全局配置(必须放在脚本最前面)
window.livedeskSettings = {
  // 小部件位置:左下角(默认是右下角)
  position: "left",

  // 语言强制为简体中文(即使浏览器是英文也会显示中文)
  locale: "zh-CN",

  // 自动检测浏览器语言(如果想优先用用户浏览器语言,设为 true 并删除上面的 locale)
  // useBrowserLanguage: true,

  // 小部件类型:expanded_bubble = 大气泡(带欢迎语),standard = 经典小气泡
  type: "expanded_bubble",

  // 暗黑模式(自动跟随系统或强制暗色)
  darkMode: "auto",        // 可选值:true | false | "auto"

  // 隐藏底部的小气泡图标(适合放在自定义按钮里)
  hideMessageBubble: false,

  // 隐藏右下角的“弹出窗口”小箭头按钮
  showPopoutButton: false,

  // 自定义启动器标题(大气泡模式下显示)
  launcherTitle: "在线客服",

  // 欢迎消息(expanded_bubble 模式下生效)
  welcomeTitle: "您好!有什么可以帮助您的?",
  welcomeDescription: "我们通常会在几分钟内回复~",

  // 在线/离线时显示的提示文字
  availableMessage: "我们在线,随时为您服务",
  unavailableMessage: "我们当前不在线,会在上班时间尽快回复您",

  // 功能开关
  enableFileUpload: true,       // 允许上传文件
  enableEmojiPicker: true,      // 允许使用表情
  enableEndConversation: true,  // 允许用户主动结束对话

  // 其他高级选项(视需求打开)
  // showUnreadMessagesDialog: true,   // 有未读消息时弹窗提醒(默认 true)
  // baseDomain: "yourcompany.com",    // 多域名部署时使用
};

</script>

<!-- 2. 加载 livedesk Widget SDK(替换成你自己的域名和 token)-->
<script>
  (function(d,t) {
    var BASE_URL="https://www.engagelab.com";          // ← 改成你的 livedesk 地址
    var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=BASE_URL+"/packs/js/sdk.js";
    g.defer = true;
    g.async = true;
    s.parentNode.insertBefore(g,s);
    g.onload=function(){
      window.livedeskSDK.run({
        websiteToken: 'abcdefgh1234567890abcdefgh123456',  // ← 改成你的 Website Token
        baseUrl: BASE_URL
      });
    }
  })(document,"script");
</script>

            
โค้ดนี้โชว์เป็นหน้าต่างลอย

Livedesk Widget 事件监听

事件名称 描述 监听示例
livedesk:ready SDK 完全加载完成,可安全调用方法。 window.addEventListener('livedesk:ready', () => { /* 初始化 */ });
livedesk:on-message 收到新消息时触发。 window.addEventListener('livedesk:on-message', (data) => { console.log(data); });
livedesk:error SDK 发生错误时触发(v2.3.0+)。 window.addEventListener('livedesk:error', (error) => { console.error(error); });
icon
ติดต่อฝ่ายขาย