> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lovi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Web Widget 配置

> 在此部分，您将学习如何集成和自定义 Lovi 的 web widget 以完美匹配您网站的 design 和功能

<img src="https://mintcdn.com/lovi/O5wVbHgTE_jPQc6B/images/WidgetsList.png?fit=max&auto=format&n=O5wVbHgTE_jPQc6B&q=85&s=6975ebc2214376c1e59e012e4bf9a0ef" alt="Web Widget 列表" width="1682" height="479" data-path="images/WidgetsList.png" />

这是您聪明的代理与网站访问者之间的桥梁。

**Web Widget** 是屏幕角落中友好的小气泡，说"你好！"。集成它非常简单：您只需在您的站点上添加代码片段，瞧！您的 AI 代理已准备好 24/7 聊天，而无需您动手。

### 🎛️ 您的 Widget 概述

这是您的 widget 指挥中心。在这里您可以看到您创建的每个聊天气泡。

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

***

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

点击**齿轮图标 ⚙️** 进入配置实验室。让我们让这个 widget 真正成为您的。

#### 1. 基础

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

#### 2. 浮动消息（钩子 🪝）

不要让您的机器人隐藏！设置一个吸引人的消息，弹出在图标上方。

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

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

#### 3. 外观（穿着得体）

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

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

您想在他们开始聊天*之前*知道您在和谁说话吗？启用**表单**。

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

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

这是给技术巫师的。Widget 可以窥视您网站的 data（`localStorage`）以查看用户是否已登录。

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

***

### 🛠️ 额外调整和布局

微调体验：

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

***

### 🎨 自定义 CSS — 设计师指南

预设的颜色和选项太局限了？**自定义 CSS** 字段让您完全掌控 widget 的外观。您可以在这里编写 CSS 规则来调整样式、覆盖默认类，甚至添加动画。

**在哪里找到它：** 打开 widget 配置（⚙️ 图标），展开 **"自定义 CSS"** 部分，然后在文本区域中输入您的代码。

#### ⚙️ 底层工作原理

您在这里编写的内容并非魔法 —— 一旦理解就相当可预测：

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

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

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

#### 🧩 您可以使用的选择器

这些是 widget 各部分真实的"标签"。用您的 CSS 瞄准它们：

| 选择器                                                 | 它是什么                                     |
| --------------------------------------------------- | ---------------------------------------- |
| `.widget_chat`                                      | 整个 widget 的根容器                           |
| `.widget_chat_window`                               | 打开时的聊天窗口                                 |
| `.widget_chat_window_header`                        | 顶部标题栏（头像、标题、按钮）                          |
| `.widget_chat_window_body`                          | 消息显示的区域                                  |
| `.widget_row_message`                               | 每一行消息（用户的消息使用 `.widget_row_message_end`） |
| `.widget_message_bot`                               | 智能体的消息气泡                                 |
| `.widget_message_content`                           | 每个气泡内的文本                                 |
| `.widget_message_botones` / `.widget_message_boton` | 快速回复按钮                                   |
| `.widget_chat_window_footer`                        | 底部输入栏                                    |
| `#inputMessage`                                     | 输入消息的文本字段                                |
| `.widget_form_submit`                               | 发送按钮                                     |
| `.widget_chat_formulario`                           | 数据收集表单（姓名、邮箱等）                           |
| `.widget_chat_formulario_body_input_asterisk`       | 必填字段的红色星号                                |
| `.widget_chat_window_footer_legends`                | 页脚的 "Generated by lovi.ai" 签名            |

#### 💡 实用示例

**更方正且带阴影的机器人气泡：**

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

**放大消息文本：**

```css theme={null}
.widget_message_content {
  font-size: 16px !important;
  line-height: 1.5;
}
```

**带品牌渐变的标题栏：**

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

**给输入区域更多空间：**

```css theme={null}
.widget_chat_window_footer {
  padding: 14px !important;
}
```

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

***

### 🧪 测试驾驶（游乐场）

在将代码粘贴到您的 live 站点之前，在**游乐场**中试试。

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

**一旦您满意，复制脚本并上线！🚀**