云灵客服 · 在线演示 ← 返回官网首页

网站接入 10 种接入模式 在线演示

同一个 SDK，灵活适配各种场景。点击卡片「立即体验」即可在页面右下角/左下角唤起真实客服，与在线客服对话。

📬 默认收件箱：云灵客服 · 支持 ?token= 切换其他收件箱
🛠 全部真实可用 🧩 复制即用 📱 移动端适配 🌙 暗色模式
A最简单 · 推荐

官方标准接入

一行脚本，右下角自动出现蓝色气泡按钮。零配置，适合快速接入任何网站。

<script> chatwootSDK.run({ websiteToken, baseUrl }) </script>
立即体验 →看代码
B进阶

自定义按钮触发

隐藏默认气泡，用自己设计的按钮/图标打开对话窗口，样式完全自由。

chatwootSettings = { hideMessageBubble: true }; btn.onclick = toggle()
立即体验 →看代码
C简单

左下角定位

气泡从右下角换到左下角，避免遮挡页面固定元素（如购物车、语言切换器）。

chatwootSettings = { position: 'left' }
立即体验 →看代码
D进阶

扁平风格 + 暗色模式

扁平聊天气泡图标，支持暗色/自动跟随系统，适合深色主题的现代网站。

chatwootSettings = { widgetStyle: 'flat', darkMode: 'auto' }
立即体验 →看代码
E简单

展开式气泡 + 欢迎语

气泡直接显示「在线咨询」文字标签，配合欢迎标题/描述，引导访客主动咨询。

chatwootSettings = { type: 'expanded_bubble', launcherTitle, welcomeTitle }
立即体验 →看代码
F高级

身份识别 + 自定义属性

登录后自动把用户姓名/邮箱传给客服，附带订单号等自定义字段，客服一眼看到是谁。

SDK.run({...}); setUser(id, {name, email}); setCustomAttributes({订单号})
立即体验 →看代码
G高级

主动弹窗（主动发起对话）

页面加载后自动弹出对话窗口，适合营销活动页/售后引导页，主动触达访客。

chatwootSettings = { welcomeTitle }; SDK.toggle('open')
立即体验 →看代码
H新功能

联系客服直达链接

网页任意位置放一个「联系客服」链接/按钮，点击直接打开挂件对话框并自动发送预设消息，客服端立即收到，无需访客手动输入。

/widget?website_token=xxx&message=预设消息
立即体验 →看代码
I新功能

触发式直达链接（右侧弹窗）

点击网页上的「联系客服」链接，在当前页面右侧弹出对话窗并自动发送预设消息——不跳转、不新开页；关闭后挂件自动消失，不残留气泡。

chatwootSettings = { hideMessageBubble: true, message }; 点击 = toggle('open')
立即体验 →看代码
J新功能

纯文字直达链接（右侧弹窗）

触发式直达的文字链接形态——无按钮视觉，可自然嵌入正文、页脚、公告等任意文字位置；点击右侧弹出对话窗并自动发送预设消息，关闭自动消失。

正文里嵌入 <a>联系客服</a> + toggle('open')
立即体验 →看代码
📡 常用 API 速查
API作用示例
window.chatwootSettings初始化配置（位置/样式/欢迎语等，须在 run 之前设置）chatwootSettings = { position:'left' }
chatwootSDK.run(config)初始化客服run({websiteToken, baseUrl})
toggle('open'/'close')打开/关闭对话窗口toggle('open')
toggleBubbleVisibility('hide'/'show')显示/隐藏默认气泡toggleBubbleVisibility('hide')
setUser(id, {name,email,avatar_url})传用户身份信息setUser('u123', {name:'张三'})
setCustomAttributes({k:v})传自定义属性（订单号等）setCustomAttributes({order:'DH001'})
setColorScheme('dark')切换明暗主题setColorScheme('dark')
setLocale('zh_CN')切换语言setLocale('zh_CN')
reset()重置会话reset()