---
title: 如何将 Dify Chatbot 集成至 Wix 网站？
---


Wix 是一个非常流行的网站创建平台，它允许用户通过拖拽的方式可视化创建自己的网站。通过 iframe 代码功能，能够实现 Wix 与 Dify 聊天机器人的集成。

除此之外，你还可以使用此功能在 Wix 网页内显示来自外部服务器和其他来源的内容，例如说创建天气小部件、股票小部件、日历或任何其它自定义网页元素。

在本文中，我们将指导你如何将 Dify 聊天机器人通过 iframe 代码嵌入到你的 Wix 网站中。除了将应用嵌入至 Wix 网站内，你也可以通过同样的方法将 Dify 应用集成至你的网站、博客或其他网页中。

## 1. 获取 Dify 应用的 iFrame 代码片段

假设你已创建了一个 [Dify AI 应用](/zh-hans/guides/application-orchestrate/creating-an-application)，你可以通过以下步骤获取 Dify 应用的 iFrame 代码片段：

* 登录你的 Dify 账户
* 选择你想要嵌入的 Dify 应用
* 点击右上角的“发布”按钮
*   在发布页面中，选择 “Embed Into Site” 选项。

    ![](https://assets-docs.dify.ai/dify-enterprise-mintlify/zh_CN/learn-more/use-cases/238daf21d6632d7d20cc9a6b882194f9.png)
* 选择合适的样式并复制显示的 iFrame 代码，例如：

![](https://assets-docs.dify.ai/dify-enterprise-mintlify/zh_CN/learn-more/use-cases/ebab9e1f734d80e793db3675a46099fb.png)

## 2. 在 Wix 网站中嵌入 iFrame 代码片段

登录 Wix 网站，打开你要编辑的网页。点击网页左侧蓝色的 `+` （Add Elements）按钮，然后选择 **Embed Code**，最后点击 **Embed HTML** 添加一个 HTML iFrame 元素到页面。

![](https://assets-docs.dify.ai/dify-enterprise-mintlify/zh_CN/learn-more/use-cases/43b79d103da8beb69619e8f122609b89.png)

在 `HTML Settings` 框内选择 `Code` 选项，复制并粘贴你在 Dify 应用中获取的 iFrame 代码片段，然后点击 **Update** 按钮进行保存并进行预览。

以下是一个嵌入 Dify Chatbot 的 iFrame 代码示例：

```bash
<iframe src="https://udify.app/chatbot/1yS3gohroW1sKyLc" style="width: 100%; height: 100%; min-height: 700px" frameborder="0" allow="microphone"></iframe>
```

![](https://assets-docs.dify.ai/dify-enterprise-mintlify/zh_CN/learn-more/use-cases/fb257be087645aaa5eb2ae01a4a15d8d.png)

> ⚠️ 请确保 iFrame 代码中的地址以 HTTPS 开头，HTTP 地址将无法正常显示。

## 3. 自定义 Dify Chatbot

你可以调整 Dify Chatbot 的按钮样式、位置和其它设置。

### 3.1 自定义样式

你可以通过修改 iFrame 代码中的 `style` 属性来自定义 Chatbot 按钮的样式。例如：

```bash
<iframe src="https://udify.app/chatbot/1yS3gohroW1sKyLc" style="width: 100%; height: 100%; min-height: 700px" frameborder="0" allow="microphone"></iframe>

# 添加一个 2 像素宽的黑色实线边框 border: 2px solid #000

→

<iframe src="https://udify.app/chatbot/1yS3gohroW1sKyLc" style="width: 80%; height: 80%; min-height: 500px; border: 2px solid #000;" frameborder="0" allow="microphone"></iframe>
```

### 3.2 自定义位置

你还可以通过修改 `style` 属性中的 `position` 值可以调整按钮的位置。例如：

```bash
<iframe src="https://udify.app/chatbot/1yS3gohroW1sKyLc" style="width: 100%; height: 100%; min-height: 700px" frameborder="0" allow="microphone"></iframe>

# 将 Chatbot 固定在网页右下角，距离底部和右侧 20 像素。

→

<iframe src="https://udify.app/chatbot/1yS3gohroW1sKyLc" style="width: 100%; height: 100%; min-height: 700px; position: fixed; bottom: 20px; right: 20px;" frameborder="0" allow="microphone"></iframe>
```

## 常见问题

**1. iframe 方框内未正常显示内容应如何处理？**

* 确保 URL 以 HTTPS 开头；
* 检查 `iframe` 代码中是否有拼写错误；
* 确认嵌入的内容符合 Wix 的安全政策；

**2. iframe 内容被裁剪，内容显示不全应如何处理？**

你可以调整并修改 `iframe` 代码框内的 `width` 和 `height` 的百分比值。

{/*
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/learn-more/use-cases/how-to-integrate-dify-chatbot-to-your-wix-website.mdx) | [提交问题](https://github.com/langgenius/dify-docs/issues/new?title=文档问题%3A%20o-integrate-dify-chatbot-to-your-wix-webs&body=%23%23%20问题描述%0A%3C%21--%20请简要描述您发现的问题%20--%3E%0A%0A%23%23%20页面链接%0Ahttps%3A%2F%2Fgithub.com%2Flanggenius%2Fdify-docs%2Fblob%2Fmain%2Fzh-hans/learn-more/use-cases%2Fhow-to-integrate-dify-chatbot-to-your-wix-website.mdx%0A%0A%23%23%20建议修改%0A%3C%21--%20如果有具体的修改建议，请在此说明%20--%3E%0A%0A%3C%21--%20感谢您对文档质量的关注！%20--%3E)

