网站嵌入

⚠️ 本文档由 AI 自动翻译。如有任何不准确之处，请参考英文原版。

将 Dify 应用嵌入到网站中，可以直接为你的访问者带来 AI 功能。无论你想要一个浮动聊天按钮、全屏聊天界面，还是嵌入式小组件，Dify 都提供了适用于任何网站技术的灵活选项。

​

嵌入选项

聊天气泡按钮

浮动聊天按钮，打开你的 AI 助手——非常适合客户支持

Iframe 嵌入

在网页内容中完整嵌入界面，直接访问

自定义集成

使用 JavaScript API 完全控制用户体验

响应式设计

所有嵌入都会自动适应不同的屏幕尺寸和设备

​

聊天气泡设置

浮动聊天按钮是最受欢迎的嵌入方法。它会在你的网站上添加一个可自定义的按钮，点击时打开你的 AI 助手。

​

配置选项

聊天气泡可以通过 difyChatbotConfig 对象进行自定义：

window.difyChatbotConfig = {
    // 必需：来自 Dify 的应用令牌
    token: 'YOUR_TOKEN',
    
    // 可选：环境设置
    isDev: false,
    baseUrl: 'https://udify.app', // 基于 isDev 自动设置
    
    // 可选：视觉自定义
    containerProps: {
        style: {
            right: '20px',
            bottom: '20px'
        },
        className: 'custom-chat-button'
    },
    
    // 可选：交互行为  
    draggable: false,              // 允许用户拖动按钮
    dragAxis: 'both',             // 'x'、'y' 或 'both'
    
    // 可选：预填充用户上下文
    inputs: {
        name: "John Doe",          // 来自你的 Dify 应用的变量名
        department: "Support"
    },
    
    // 可选：用于追踪的系统变量
    systemVariables: {
        user_id: 'USER_123',
        conversation_id: 'CONV_456'
    },
    
    // 可选：用户个人资料信息
    userVariables: {
        avatar_url: 'https://example.com/avatar.jpg',
        name: 'John Doe'
    }
}

1. 获取你的嵌入令牌

   在你的 Dify 应用中，前往 发布 → 嵌入 找到你的唯一令牌。

2. 添加脚本

   在你网站的 HTML 中包含配置和 Dify 的嵌入脚本。

3. 自定义外观

   调整 containerProps 以匹配你网站的设计。

4. 测试功能

   打开你的网站并尝试聊天按钮，确保一切正常工作。

​

Iframe 嵌入

为了获得更集成的体验，可以将你的 Dify 应用直接嵌入到网页内容中：

<iframe 
  src="https://udify.app/chatbot/YOUR_APP_TOKEN"
  width="100%" 
  height="600"
  frameborder="0">
</iframe>

​

Iframe 优势

• 直接集成 - 应用作为页面内容的一部分出现
• 完整功能 - 所有应用功能在 iframe 内正常工作
• 响应式设计 - 自动适应容器大小
• 无需 JavaScript - 简单的 HTML 实现

​

自定义选项

尺寸和位置：

<iframe 
  src="https://udify.app/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://udify.app/chatbot/YOUR_APP_TOKEN"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0">景和最佳实践

<AccordionGroup>
  <Accordion title="客户支持">
    使用聊天气泡进行即时帮助。将它们放在显著位置，并考虑预填充当前页面或用户账户信息等上下文。
  </Accordion>
  
  <Accordion title="潜在客户挖掘">
    直接在内容中嵌入资格表单。在专门的着陆页上使用 iframe 嵌入以获得更高的参与度。
  </Accordion>
  
  <Accordion title="产品演示">
    通过嵌入式演示展示 AI 功能。让访问者在不离开你网站的情况下试用你的应用。
  </Accordion>
  
  <Accordion title="知识库">
    用交互式 AI 助手替换静态 FAQ。用户可以获得个性化答案，而不是搜索文档。
  </Accordion>
</AccordionGroup>

## 故障排除

**聊天按钮未出现：**
- 检查你的令牌是否正确
- 确保嵌入脚本在配置之后加载
- 验证浏览器控制台中没有 JavaScript 错误

**Iframe 无法加载：**
- 确认 iframe URL 包含你正确的应用令牌
- 检查你的网站是否允许 iframe 内容
- 如果你的 Dify 应用需要，确保父页面通过 HTTPS 提供服务

<Warning>
在不同的浏览器和设备上测试你的嵌入以确保兼容性。某些企业防火墙可能会阻止 iframe 内容。
</Warning>

你可以使用 CSS 变量或 `containerProps` 选项覆盖默认按钮样式。根据 CSS 特异性应用这些方法以实现你想要的自定义。

### 1. 修改 CSS 变量

支持以下 CSS 变量进行自定义：

```css
/* 按钮到底部的距离，默认为 `1rem` */
--dify-chatbot-bubble-button-bottom

/* 按钮到右侧的距离，默认为 `1rem` */
--dify-chatbot-bubble-button-right

/* 按钮到左侧的距离，默认为 `unset` */
--dify-chatbot-bubble-button-left

/* 按钮到顶部的距离，默认为 `unset` */
--dify-chatbot-bubble-button-top

/* 按钮背景颜色，默认为 `#155EEF` */
--dify-chatbot-bubble-button-bg-color

/* 按钮宽度，默认为 `50px` */
--dify-chatbot-bubble-button-width

/* 按钮高度，默认为 `50px` */
--dify-chatbot-bubble-button-height

/* 按钮边框半径，默认为 `25px` */
--dify-chatbot-bubble-button-border-radius

/* 按钮盒阴影，默认为 `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px)` */
--dify-chatbot-bubble-button-box-shadow

/* 按钮悬停变换，默认为 `scale(1.1)` */
--dify-chatbot-bubble-button-hover-transform

要将背景颜色更改为 #ABCDEF，添加此 CSS：

#dify-chatbot-bubble-button {
    --dify-chatbot-bubble-button-bg-color: #ABCDEF;
}

​

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: 'dify-chatbot-bubble-button-custom my-custom-class',
    },
}

​

3. 传递 inputs

支持四种类型的输入：

1. text-input：接受任何值。如果输入字符串的长度超过最大允许长度，将被截断。
2. paragraph：与 text-input 类似，接受任何值，如果字符串长度超过最大长度则截断。
3. number：接受数字或数值字符串。如果提供字符串，将使用 Number 函数转换为数字。
4. options：接受置选项之一。

示例配置：

window.difyChatbotConfig = {
    // 其他配置设置...
    inputs: {
        name: 'apple',
    },
}

注意：当使用 embed.js 脚本创建 iframe 时，每个输入值都会被处理——使用 GZIP 压缩并进行 base64 编码——然后附加到 URL。

例如，带有处理过的输入值的 URL 将如下所示： http://localhost/chatbot/{token}?name=H4sIAKUlmWYA%2FwWAIQ0AAACDsl7gLuiv2PQEUNAuqQUAAAA%3D