跳到主要内容

Chatbot 组件样式设置

快速设置

约 5 分钟即可调整组件外观并保存更改。

本指南帮助你通过实时预览更新 chatbot 组件的颜色、文本和布局。

前往： Chatbot → Widget Settings

快速参考​

任务点击位置结果
预览组件Getting Started / Conversation查看客人端组件体验
编辑启动图标Images & Branding更新客人点击的浮动按钮
编辑机器人头像Images & Branding更改聊天中的头像图片
调整自动展开Launcher (Chat Button)控制组件在桌面和移动端何时展开
编辑头部和消息颜色Header、Bubbles、Input匹配品牌风格
编辑欢迎文案和政策链接Welcome Screen控制客人看到的首屏内容
保存或放弃更改页面底部浮动栏应用或还原当前修改

套餐权限​

  • 组件样式功能需要付费套餐。
  • 免费套餐账号会看到升级提示，且无法保存样式。

升级路径：Settings → Billing & Subscription。

更新组件样式​

  1. 前往 Chatbot → Widget Settings

  2. 使用预览模式按钮：

    • Getting Started
    • Conversation

    ✓ 预览会随所选模式更新。

  3. 在 Images & Branding 中更新视觉素材。

  4. 使用 Launcher Icon 设置浮动按钮图片。

  5. 使用 Bot Avatar 设置聊天内图片。

    ✓ 这些图片分别用于组件的不同位置。

  6. 打开 Launcher (Chat Button) 调整自动展开行为。

  7. 为 Desktop 和 Mobile 选择对应设置。

  8. 如果选择 Enable with delay，请选择延迟秒数。

    ✓ 组件会按设备类型使用所选的展开行为。

  9. 打开 Header、Bubbles、Input 和 Welcome Screen，更新文案与颜色。

  10. 在 Welcome Screen 中打开 Terms & policies 部分。

  11. 按需开启 Privacy Policy 或 Terms Of Service。

  12. 输入 URL，或上传 .pdf 或 .md 文件。

✓ 上传的文件会自动填充政策 URL。

  1. 在浮动栏点击 Save chatbot style settings。

✓ 只有在你修改后，这个按钮才会出现。

理解图片​

在正确的位置使用正确的图片。

图片显示位置影响内容
Launcher Icon聊天外的浮动按钮客人点击以打开聊天的按钮
Bot Avatar头部、机器人消息和欢迎页客人进入对话时看到的头像
需要旧版启动头像？

如果你保存了旧版组件样式，首次保存会自动把那张图片移到 Bot Avatar。

管理政策​

  1. 打开 Welcome Screen。

  2. 打开 Terms & policies 部分。

  3. 保持 Vouch Policy 为启用状态。

  4. 需要时开启 Privacy Policy 或 Terms Of Service。

  5. 添加标签和 URL，或上传 .pdf 或 .md 文件。

  6. 点击 Save chatbot style settings。

    ✓ 预览会在欢迎页显示已启用的链接。

保留或还原更改​

页面底部使用浮动操作栏。

  • 点击 Save chatbot style settings 保留你的修改。
  • 点击 Discard changes 回到上次保存的版本。
你会看到什么

只有在你更改字段后，才会看到浮动栏。

使用建议​

  • 保持高文本对比度，提升可读性。
  • 保存前同时检查两种预览模式。
  • 政策名称尽量简短，避免移动端显示拥挤。
  • 颜色建议与官网与客人邮件保持一致。
  • 此页不支持编辑附件按钮样式。

故障排查​

预览不更新​

你会看到： 修改后预览保持不变。

解决方法：

  1. 刷新页面
  2. 重新尝试修改
  3. 检查网络连接

保存失败或回退​

你会看到： 保存后样式没有保留。

解决方法：

  1. 再次点击 Save
  2. 等待成功提示
  3. 确认当前套餐支持 chatbot 样式

政策上传失败​

你会看到： Terms 弹窗中上传报错。

解决方法：

  1. 仅使用 .pdf 或 .md 文件
  2. 文件大小控制在 6 MB 以下
  3. 重新上传后点击 Save

政策链接未显示​

你会看到： 预览里没有 Privacy Policy 或 Terms Of Service。

解决方法：

  1. 打开 Welcome → Configure Terms
  2. 打开对应政策开关
  3. 填写有效 URL 并点击 Done
  4. 点击 Save

重置后未生效​

你会看到： 刷新后默认样式消失。

解决方法：

  1. 点击 Reset to Defaults
  2. 点击 Save

仍未解决？​

如遇以下情况，请联系 success@vouch-technologies.com：

  • ❌ 多次尝试后样式仍无法保存
  • ❌ 刷新后组件仍不更新
  • ❌ 问题持续超过 30 分钟

建议附上：

  • Widget Settings 页面截图
  • 你尝试的样式修改
  • 问题开始时间

相关指南​