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

# 网站嵌入

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

## 嵌入选项

<CardGroup cols={2}>
  <Card title="聊天气泡按钮" icon="comment">
    浮动聊天按钮，打开你的 AI 助手，非常适合客户支持
  </Card>

  <Card title="Iframe 嵌入" icon="window">
    在网页内容中完整嵌入界面，直接访问
  </Card>

  <Card title="自定义集成" icon="code">
    使用 JavaScript API 完全控制用户体验
  </Card>

  <Card title="响应式设计" icon="mobile">
    所有嵌入都会自动适应不同的屏幕尺寸和设备
  </Card>
</CardGroup>

## 聊天气泡设置

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

### 配置选项

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

```javascript theme={null}
window.difyChatbotConfig = {
    // 必需：来自 Dify 的应用令牌
    token: 'YOUR_TOKEN',
    
    // 可选：环境设置
    isDev: false,
    baseUrl: 'http://your-dify-host', // 基于 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'
    }
}
```

<Steps>
  <Step title="获取你的嵌入令牌">
    在你的 Dify 应用中，前往 **发布 → 嵌入** 找到你的唯一令牌。
  </Step>

  <Step title="添加脚本">
    在你网站的 HTML 中包含配置和 Dify 的嵌入脚本。
  </Step>

  <Step title="自定义外观">
    调整 `containerProps` 以匹配你网站的设计。
  </Step>

  <Step title="测试功能">
    打开你的网站并尝试聊天按钮，确保一切正常工作。
  </Step>
</Steps>

## Iframe 嵌入

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

```html theme={null}
<iframe 
  src="http://your-dify-host/chatbot/YOUR_APP_TOKEN"
  width="100%" 
  height="600"
  frameborder="0">
</iframe>
```

### Iframe 优势

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

### 自定义选项

**尺寸和位置**：

```html theme={null}
<iframe 
  src="http://your-dify-host/chatbot/YOUR_APP_TOKEN"
  width="400px" 
  height="500px"
  style="border: 1px solid #ccc; border-radius: 8px;">
</iframe>
```

**响应式设计**：

```html theme={null}
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
  <iframe 
    src="http://your-dify-host/chatbot/YOUR_APP_TOKEN"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0">
  </iframe>
</div>
```

## 使用场景和最佳实践

<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 theme={null}
/* 按钮到底部的距离，默认为 `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：

```css theme={null}
#dify-chatbot-bubble-button {
    --dify-chatbot-bubble-button-bg-color: #ABCDEF;
}
```

### 2. 使用 `containerProps`

使用 `style` 属性设置内联样式：

```javascript theme={null}
window.difyChatbotConfig = {
    // ... 其他配置
    containerProps: {
        style: {
            backgroundColor: '#ABCDEF',
            width: '60px',
            height: '60px',
            borderRadius: '30px',
        },
        // 对于小的样式覆盖，你也可以为 `style` 属性使用字符串值：
        // style: 'background-color: #ABCDEF; width: 60px;',
    },
}
```

使用 `className` 属性应用 CSS 类：

```javascript theme={null}
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`**：接受任何值，但需匹配预先配置的选项之一。

示例配置：

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

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

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