网站嵌入¶
Note: ⚠️ 本文档由 AI 自动翻译。如有任何不准确之处，请参考英文原版。
将 FlexAI 应用嵌入到网站中，可以直接为你的访问者带来 AI 功能。无论你想要一个浮动聊天按钮、全屏聊天界面，还是嵌入式小组件，FlexAI 都提供了适用于任何网站技术的灵活选项。
嵌入选项¶
聊天气泡按钮 浮动聊天按钮，打开你的 AI 助手——非常适合客户支持 Iframe 嵌入 在网页内容中完整嵌入界面，直接访问 自定义集成 使用 JavaScript API 完全控制用户体验 响应式设计 所有嵌入都会自动适应不同的屏幕尺寸和设备
聊天气泡设置¶
浮动聊天按钮是最受欢迎的嵌入方法。它会在你的网站上添加一个可自定义的按钮，点击时打开你的 AI 助手。
配置选项¶
聊天气泡可以通过 difyChatbotConfig 对象进行自定义：
window.difyChatbotConfig = {
// 必需：来自 FlexAI 的应用令牌
token: 'YOUR_TOKEN',
// 可选：环境设置
isDev: false,
baseUrl: 'https://flexai.com.tr', // 基于 isDev 自动设置
// 可选：视觉自定义
containerProps: {
style: {
right: '20px',
bottom: '20px'
},
className: 'custom-chat-button'
},
// 可选：交互行为
draggable: false, // 允许用户拖动按钮
dragAxis: 'both', // 'x'、'y' 或 'both'
// 可选：预填充用户上下文
inputs: {
name: "John Doe", // 来自你的 FlexAI 应用的变量名
department: "Support"
},
// 可选：用于追踪的系统变量
systemVariables: {
user_id: 'USER_123',
conversation_id: 'CONV_456'
},
// 可选：用户个人资料信息
userVariables: {
avatar_url: 'https://example.com/avatar.jpg',
name: 'John Doe'
}
}
获取你的嵌入令牌¶
在你的 FlexAI 应用中，前往 **发布 → 嵌入** 找到你的唯一令牌。
添加脚本¶
在你网站的 HTML 中包含配置和 FlexAI 的嵌入脚本。
自定义外观¶
调整 `containerProps` 以匹配你网站的设计。
测试功能¶
打开你的网站并尝试聊天按钮，确保一切正常工作。
Iframe 嵌入¶
为了获得更集成的体验，可以将你的 FlexAI 应用直接嵌入到网页内容中：
<iframe
src="https://flexai.com.tr/chatbot/YOUR_APP_TOKEN"
width="100%"
height="600"
frameborder="0">
</iframe>
Iframe 优势¶
- 直接集成 - 应用作为页面内容的一部分出现
- 完整功能 - 所有应用功能在 iframe 内正常工作
- 响应式设计 - 自动适应容器大小
- 无需 JavaScript - 简单的 HTML 实现
自定义选项¶
尺寸和位置：
<iframe
src="https://flexai.com.tr/chatbot/YOUR_APP_TOKEN"
width="400px"
height="500px"
style="border: 1px solid #ccc; border-radius: 8px;">
</iframe>
响应式设计：
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
<iframe
src="https://flexai.com.tr/chatbot/YOUR_APP_TOKEN"
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
frameborder="0">景和最佳实践
<details>
<summary>客户支持</summary>
使用聊天气泡进行即时帮助。将它们放在显著位置，并考虑预填充当前页面或用户账户信息等上下文。
</details>
<details>
<summary>潜在客户挖掘</summary>
直接在内容中嵌入资格表单。在专门的着陆页上使用 iframe 嵌入以获得更高的参与度。
</details>
<details>
<summary>产品演示</summary>
通过嵌入式演示展示 AI 功能。让访问者在不离开你网站的情况下试用你的应用。
</details>
<details>
<summary>知识库</summary>
用交互式 AI 助手替换静态 FAQ。用户可以获得个性化答案，而不是搜索文档。
</details>
## 故障排除
**聊天按钮未出现：**
- 检查你的令牌是否正确
- 确保嵌入脚本在配置之后加载
- 验证浏览器控制台中没有 JavaScript 错误
**Iframe 无法加载：**
- 确认 iframe URL 包含你正确的应用令牌
- 检查你的网站是否允许 iframe 内容
- 如果你的 FlexAI 应用需要，确保父页面通过 HTTPS 提供服务
> **Warning:**
>
在不同的浏览器和设备上测试你的嵌入以确保兼容性。某些企业防火墙可能会阻止 iframe 内容。
你可以使用 CSS 变量或 `containerProps` 选项覆盖默认按钮样式。根据 CSS 特异性应用这些方法以实现你想要的自定义。
### 1. 修改 CSS 变量
支持以下 CSS 变量进行自定义：
```css
/* 按钮到底部的距离，默认为 `1rem` */
--flexai-chatbot-bubble-button-bottom
/* 按钮到右侧的距离，默认为 `1rem` */
--flexai-chatbot-bubble-button-right
/* 按钮到左侧的距离，默认为 `unset` */
--flexai-chatbot-bubble-button-left
/* 按钮到顶部的距离，默认为 `unset` */
--flexai-chatbot-bubble-button-top
/* 按钮背景颜色，默认为 `#155EEF` */
--flexai-chatbot-bubble-button-bg-color
/* 按钮宽度，默认为 `50px` */
--flexai-chatbot-bubble-button-width
/* 按钮高度，默认为 `50px` */
--flexai-chatbot-bubble-button-height
/* 按钮边框半径，默认为 `25px` */
--flexai-chatbot-bubble-button-border-radius
/* 按钮盒阴影，默认为 `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px)` */
--flexai-chatbot-bubble-button-box-shadow
/* 按钮悬停变换，默认为 `scale(1.1)` */
--flexai-chatbot-bubble-button-hover-transform
要将背景颜色更改为 #ABCDEF，添加此 CSS：
2. 使用 containerProps¶
使用 style 属性设置内联样式：
window.difyChatbotConfig = {
// ... 其他配置
containerProps: {
style: {
backgroundColor: '#ABCDEF',
width: '60px',
height: '60px',
borderRadius: '30px',
},
// 对于小的样式覆盖，你也可以为 `style` 属性使用字符串值：
// style: 'background-color: #ABCDEF; width: 60px;',
},
}
使用 className 属性应用 CSS 类：
window.difyChatbotConfig = {
// ... 其他配置
containerProps: {
className: 'flexai-chatbot-bubble-button-custom my-custom-class',
},
}
3. 传递 inputs¶
支持四种类型的输入：
text-input：接受任何值。如果输入字符串的长度超过最大允许长度，将被截断。paragraph：与text-input类似，接受任何值，如果字符串长度超过最大长度则截断。number：接受数字或数值字符串。如果提供字符串，将使用Number函数转换为数字。options：接受置选项之一。
示例配置：
注意：当使用 embed.js 脚本创建 iframe 时，每个输入值都会被处理——使用 GZIP 压缩并进行 base64 编码——然后附加到 URL。
例如，带有处理过的输入值的 URL 将如下所示：
http://localhost/chatbot/{token}?name=H4sIAKUlmWYA%2FwWAIQ0AAACDsl7gLuiv2PQEUNAuqQUAAAA%3D