---
title: 嵌入网站
---

Dify 支持将你的 AI 应用嵌入到业务网站中，你可以使用该能力在几分钟内制作具有业务数据的官网 AI 客服、业务知识问答等应用。

可以使用 3 种不同的方式将你的 AI 应用嵌入网站，分别为 `<iframe>` 标签方式，`<script>` 标签方式，和安装 Dify Chrome 浏览器扩展方式。

点击 WebApp 卡片上的嵌入按钮，复制嵌入代码，粘贴到你网站的目标位置。

## 使用 `<iframe>` 标签方式

将 `<iframe>` 代码复制到你网站用于显示 AI 应用的标签中，如 `<div>`、`<section>` 等标签。

<Frame caption="嵌入代码示例">
    <img src="https://assets-docs.dify.ai/dify-enterprise-mintlify/zh_CN/guides/application-publishing/1e2e8c9adc620f9d6b4ea157119e8659.png" alt="显示嵌入网站的代码示例" />
</Frame>

## 使用 `<script>` 标签方式

将 `<script>` 代码复制到你网站 `<head>` 或 `<body>` 标签中。这会在你的网站上显示一个 Dify 聊天机器人气泡按钮。

如果将 script 代码粘贴到官网的 `<body>` 处，你将得到一个官网 AI 机器人：

<Frame caption="嵌入后的 AI 机器人效果">
  <img src="https://assets-docs.dify.ai/dify-enterprise-mintlify/zh_CN/guides/application-publishing/f5a5e95e1120906669b3c1ad4e186dea.png" alt="展示嵌入到网站后的 AI 机器人效果" />
</Frame>

## 安装 Dify Chrome 浏览器扩展方式

按照提示，安装 [Dify Chrome 浏览器扩展](https://chromewebstore.google.com/detail/dify-chatbot/ceehdapohffmjmkdcifjofadiaoeggaf)。

## 自定义 Dify 聊天机器人气泡按钮

当你在网站中使用 Dify 聊天机器人气泡按钮时（即，使用 `<script>` 标签方式将你的 AI 应用嵌入网站），你可以自定义按钮的样式、位置和其他设置。

Dify 聊天机器人气泡按钮可以通过以下配置选项进行自定义：

```javascript
window.difyChatbotConfig = {
    // 必填项，由 Dify 自动生成
    token: 'YOUR_TOKEN',
    // 可选项，默认为 false
    isDev: false,
    // 可选项，当 isDev 为 true 时，默认为 '[https://dev.udify.app](https://dev.udify.app)'，否则默认为 '[https://udify.app](https://udify.app)'
    baseUrl: 'YOUR_BASE_URL',
    // 可选项，可以接受除 `id` 以外的任何有效的 HTMLElement 属性，例如 `style`、`className` 等
    containerProps: {},
    // 可选项，是否允许拖动按钮，默认为 `false`
    draggable: false,
    // 可选项，允许拖动按钮的轴，默认为 `both`，可以是 `x`、`y`、`both`
    dragAxis: 'both',
    // 可选项，在 dify 聊天机器人中设置的输入对象
    inputs: {
        // 键是变量名
        // 例如：
        // name: "NAME"
    },
    // 可选项，在 dify 聊天机器人中设置的系统变量
    systemVariables: {
        // 例如：
        // user_id: 'USER_ID',
        // conversation_id: 'CONVERSATION_ID',
    },
    // 可选项，在 dify 聊天机器人中设置的用户信息变量
    userVariables: {
        // 例如：
        // avatar_url: 'AVATAR_URL',
        // name: 'NAME',
    },
};
```

### 覆盖默认按钮样式

你可以使用 CSS 变量或 `containerProps` 选项来覆盖默认按钮样式。根据 CSS 优先级使用这些方法实现自定义样式。

*   **修改 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：
    
    ```css
    #dify-chatbot-bubble-button {
        --dify-chatbot-bubble-button-bg-color: #ABCDEF;
    }
    ```

*   **使用 `containerProps` 选项**

    使用 `style` 属性设置内联样式：
    
    ```javascript
    window.difyChatbotConfig = {
        // ... 其他配置
        containerProps: {
            style: {
                backgroundColor: '#ABCDEF',
                width: '60px',
                height: '60px',
                borderRadius: '30px',
            },
            // 对于较小的样式覆盖，也可以使用字符串作为 `style` 属性的值：
            // style: 'background-color: #ABCDEF; width: 60px;',
        },
    }
    ```
    
    使用 `className` 属性应用 CSS 类：
    
    ```javascript
    window.difyChatbotConfig = {
        // ... 其他配置
        containerProps: {
            className: 'dify-chatbot-bubble-button-custom my-custom-class',
        },
    };
    ```

## 向嵌入网站的应用传递 `inputs`

你可以向嵌入你的网站的 AI 应用传递初始输入。支持四种类型的输入：

1. **`text-input`**：接受任何值。如果输入字符串的长度超过允许的最大长度，将被截断。
2. **`paragraph`**：类似于 `text-input`，接受任何值并在字符串长度超过最大长度时截断。
3. **`number`**：接受数字或数字字符串。如果提供的是字符串，将使用 `Number` 函数将其转换为数字。
4. **`options`**：接受任何值，前提是它匹配预先配置的选项之一。

使用 `<iframe>` 标签方式和使用 `<script>` 标签方式将 AI 应用嵌入网站时，传递 `inputs` 的方法亦有所不同。

以下以传入变量名为 `name`，值为 `apple` 的情形为例。

### 使用 `<iframe>` 标签方式

如果你的 AI 应用是使用 `<iframe>` 标签方式嵌入网站的，你可以通过向其 URL 追加参数的方式传递 `inputs`。

你需要将传入变量的值先使用 GZIP 压缩，并以 base64 编码，再将得到的 base64 值使用 encodeURIComponent 编码，最后附加到 URL 上。

例如，变量名为 `name`，值为 `apple`，首先压缩 `apple`，得到 base64 编码 `H4sIAAAAAAAAA0ssKMhJBQBQ0C6pBQAAAA==`，再使用 encodeURIComponent 编码得到 `H4sIAAAAAAAAA0ssKMhJBQBQ0C6pBQAAAA%3D%3D`。最后的输入值 URL 将如下所示： `http://localhost/chatbot/{token}?name=H4sIAAAAAAAAA0ssKMhJBQBQ0C6pBQAAAA%3D%3D`。

### 使用 `<script>` 标签方式

如果你的 AI 应用是使用 `<script>` 标签方式嵌入网站的，则只需要通过前文提到的配置选项即可传递 `inputs`。示例配置：

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

{/*
Contributing Section
DO NOT edit this section!
It will be automatically generated by the script.
*/}

---

[编辑此页面](https://github.com/langgenius/dify-docs/edit/main/zh-hans/guides/application-publishing/embedding-in-websites.mdx) | [提交问题](https://github.com/langgenius/dify-docs/issues/new?template=docs.yml)

