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" // 可选
});
});
Este bloque de código se muestra en una ventana flotante
设置 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
});
Este bloque de código se muestra en una ventana flotante
设置「对话自定义变量」
window.$livedesk.setConversationCustomAttributes({
utm_source: "google", // 示例:会话级 UTM
session_type: "support"
});
window.$livedesk.setConversationCustomAttributes({
utm_source: "google", // 示例:会话级 UTM
session_type: "support"
});
Este bloque de código se muestra en una ventana flotante
- 这些自定义变量在 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 // 示例:数字类型
});
});
Este bloque de código se muestra en una ventana flotante
- 这些自定义变量在「 livdesk - Conversation - 联系人属性」中显示。
删除用户属性
删除指定的自定义属性。
window.$livedesk.deleteCustomAttribute("pricing_plan");//string属性键名
window.$livedesk.deleteCustomAttribute("pricing_plan");//string属性键名
Este bloque de código se muestra en una ventana flotante
切换聊天气泡的打开状态
切换小部件的打开/关闭状态。
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"); // 关闭聊天部件
Este bloque de código se muestra en una ventana flotante
显示/隐藏聊天气泡
window.$livedesk.toggleBubbleVisibility('hide');// show/hide
window.$livedesk.toggleBubbleVisibility('hide');// show/hide
Este bloque de código se muestra en una ventana flotante
弹窗模式
以弹出窗口模式打开聊天界面。
window.$livedesk.popoutChatWindow();
window.$livedesk.popoutChatWindow();
Este bloque de código se muestra en una ventana flotante
设置语言
设置小部件语言
window.$livedesk.setLocale("en");// string语言代码,示例:zh-CN
window.$livedesk.setLocale("en");// string语言代码,示例:zh-CN
Este bloque de código se muestra en una ventana flotante
添加/移除标签
为当前会话添加标签(对话未开始前),标签将自动设置到对话中
window.$livdesk.setLabel('support-ticket');// string标签标识符
window.$livdesk.removeLabel('support-ticket');
window.$livdesk.setLabel('support-ticket');// string标签标识符
window.$livdesk.removeLabel('support-ticket');
Este bloque de código se muestra en una ventana flotante
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>
Este bloque de código se muestra en una ventana flotante
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); }); |










