网站嵌入 - Dify Docs

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

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

嵌入选项

聊天气泡按钮

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

Iframe 嵌入

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

自定义集成

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

响应式设计

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

聊天气泡设置

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

配置选项

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

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'
    }
}

获取你的嵌入令牌

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

添加脚本

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

自定义外观

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

测试功能

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

Iframe 嵌入

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

<iframe 
  src="http://your-dify-host/chatbot/YOUR_APP_TOKEN"
  width="100%" 
  height="600"
  frameborder="0">
</iframe>

Iframe 优势

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

自定义选项

尺寸和位置：

<iframe 
  src="http://your-dify-host/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="http://your-dify-host/chatbot/YOUR_APP_TOKEN"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0">
  </iframe>
</div>

使用场景和最佳实践

客户支持

使用聊天气泡进行即时帮助。将它们放在显著位置，并考虑预填充当前页面或用户账户信息等上下文。

潜在客户挖掘

直接在内容中嵌入线索收集表单。在专门的着陆页上使用 iframe 嵌入以获得更高的参与度。

产品演示

通过嵌入式演示展示 AI 功能。让访问者在不离开你网站的情况下试用你的应用。

知识库

用交互式 AI 助手替换静态 FAQ。用户可以获得个性化答案，而不是搜索文档。

故障排除

聊天按钮未出现：

检查你的令牌是否正确
确保嵌入脚本在配置之后加载
验证浏览器控制台中没有 JavaScript 错误

Iframe 无法加载：

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

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

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

1. 修改 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`

支持四种类型的输入：

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

示例配置：

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

注意：当使用 embed.js 脚本创建 iframe 时，每个输入值都会被处理（使用 GZIP 压缩并进行 base64 编码），然后附加到 URL。例如，带有处理过的输入值的 URL 将如下所示： http://localhost/chatbot/{token}?name=H4sIAKUlmWYA%2FwWAIQ0AAACDsl7gLuiv2PQEUNAuqQUAAAA%3D

​嵌入选项

聊天气泡按钮

Iframe 嵌入

自定义集成

响应式设计

​聊天气泡设置

​配置选项

​Iframe 嵌入

​Iframe 优势

​自定义选项

​使用场景和最佳实践

​故障排除

​1. 修改 CSS 变量

​2. 使用 containerProps

​3. 传递 inputs

嵌入选项

聊天气泡设置

配置选项

Iframe 嵌入

Iframe 优势

自定义选项

使用场景和最佳实践

故障排除

1. 修改 CSS 变量

2. 使用 `containerProps`

3. 传递 `inputs`