安装聊天挂件

用一个 script 标签把 Bubblo 聊天挂件添加到网站

Bubblo 聊天挂件只需要一个 script 标签。控制台将安装代码和外观配置放在同一个页面中，方便你一次完成代码复制、访客界面配置和实时预览。

复制安装代码与 CID

1. 选择拥有该网站的组织。
2. 打开 集成 → Widget。
3. 复制页面生成的安装代码，其中的 cid 已经是当前 Widget 渠道 ID。

代码下方还会单独展示同一个 CID，供需要填写渠道 ID 的工具使用。每个组织当前只有一个 Widget 渠道，同一渠道可以安装在该组织网站的多个页面。

CID 是会出现在网页源代码中的公开标识，并不是 API 凭证，不能用于鉴权服务端请求。

添加脚本

把下面的代码放到网站结束标签 </body> 之前，再将 YOUR_CHANNEL_ID 替换成刚才复制的 Widget CID：

<script src="https://cdn.bubblo.ai/widget.js" cid="YOUR_CHANNEL_ID"></script>

只需在所有页面共用的布局中添加一次。挂件会自行创建页面元素，不需要额外准备容器。

根据网站类型选择安装位置

• **纯 HTML 或服务端模板：**把脚本放在公共模板的 </body> 结束标签之前。
• **WordPress、Shopify、Wix 等建站平台：**使用全站自定义代码或页脚代码区域，让平台在每个页面中只添加一次。
• **React、Vue 或其他 Vite 应用：**把脚本放入根目录的 index.html，位置仍然是 </body> 之前。
• **使用根布局的框架：**通过框架的公共布局或脚本组件加载，并确保每个页面只输出一次。

不需要额外创建挂载容器，也不要在每个业务组件中重复加载脚本。重复的 script 标签没有必要，也会让故障排查更困难。

验证安装

发布或刷新网站后，聊天气泡应出现在配置的底部角落。也可以在浏览器控制台中主动打开：

window.Bubblo.open()

面板中的在线只表示浏览器已连接实时聊天流，不表示当前有人工客服在线值守。

同一个 集成 → Widget 页面下方就是外观表单。编辑时实时预览会同步变化；完成后点击表单底部的保存更改，线上挂件才会采用新外观。

如果没有看到气泡，请按故障排查逐项检查。接下来可以自定义挂件，或使用 JavaScript API 从网页控制它。