Web Widget 配置

​

🎛️ 您的 Widget 概述

• 为什么有多个？ 您可能希望在定价页面有”Sales Bot”，在帮助中心有”Tech Support” bot。在这里您管理它们全部。
• 每个 Widget 的关键操作：
  • 📋 复制脚本： 获取神奇代码以粘贴到您的网站。
  • ⚙️ 配置： 有趣的部分。调整颜色、消息和行为（我们稍后会谈到）。
  • 🗑️ 删除： 如果不需要，就扔掉它。

​

🎨 自定义您的 Widget（艺术课）

​

1. 基础

• AI 代理： 哪个大脑为这个聊天提供动力？从列表中选择您的代理之一。
• 语言： 您的站点会说英语、西班牙语和法语吗？告诉 widget 以免它看起来愚蠢。

​

2. 浮动消息（钩子 🪝）

• 无聊： “在这里聊天。”
• 更好： “嗨！需要订单帮助吗？👋”

⚠️ 注意： 为所有语言添加翻译。您不希望西班牙语访问者看到空白气泡！

​

3. 外观（穿着得体）

• 标题： 选择顶部显示什么。只标题？您的标志？戴单片眼镜机器人的头像？由您决定。
• 颜色： 使用吸管工具 🖊️ 来完全匹配您的品牌。
  • 主色： 消息气泡和发送按钮。
  • 文本颜色： 确保可读！白色背景上的黄色文本是视觉犯罪。

​

4. 守门人：数据收集表单 📝

• 询问姓名、电子邮件或电话。
• 如果您严格，使字段”必需”，如果您随意，使其”可选”。
• GDPR / 隐私： 添加指向您的政策的链接，以便您保持合法。👮‍♂️

​

5. 智能数据收集（高级 🤓）

• 如何帮助： 如果已登录，widget 可以说*“你好，John！”* 而不是再次询问他的名字。
• 配置： 您告诉我们”Key”（例如，user_email），我们自动获取值。

​

🛠️ 额外调整和布局

• 位置： 左侧还是右侧？（右侧是标准，左侧是给叛逆者的）。
• 全屏： 想要聊天占用整个移动屏幕吗？切换此为 ON。
• 嵌入（DOM 元素）： 不是浮动气泡，将聊天永久粘贴在页面上的 <div> 内。非常适合”联系我们”页面。
• 自定义 CSS： 如果您懂代码，您可以在这里编写自己的样式来覆盖我们的。天空是极限。

​

🎨 自定义 CSS — 设计师指南

​

⚙️ 底层工作原理

1. 您的 CSS 会与 widget 配置一起保存。
2. 当 widget 在访客网站上加载时，您的 CSS 会作为 <style> 标签注入到 widget 本身内部。
3. 它在我们的默认样式之后加载，因此您的规则拥有最终决定权（平局时获胜）。

🎯 重要 —— 作用范围： 自定义 CSS 仅影响 widget 聊天的内部，不影响您网页的其余部分。您不能用它来重新设计您的网站，只能设计 widget。反之亦然：您网站的样式不会渗入 widget，所以您从一张干净的画布开始。

💪 我的规则没有生效？ 由于我们的基础样式很具体，有时您的规则会”平局”而无法获胜。如果某个更改没有效果，请在属性末尾添加 !important（例如 border-radius: 0 !important;）或使用更具体的选择器。

​

🧩 您可以使用的选择器

​

💡 实用示例

.widget_message_bot {
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.widget_message_content {
  font-size: 16px !important;
  line-height: 1.5;
}

.widget_chat_window_header {
  background: linear-gradient(90deg, #6a11cb, #2575fc) !important;
}

.widget_chat_window_footer {
  padding: 14px !important;
}

🧪 发布前请务必在游乐场中测试（见下文）。一个忘记的 } 可能会一次性破坏多个样式。

​

🧪 测试驾驶（游乐场）

• 颜色冲突吗？
• Agent 礼貌吗？
• 表单工作吗？