如何将 Dify Chatbot 集成至 Wix 网站?

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

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

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

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

假设你已创建了一个 Dify AI 应用,你可以通过以下步骤获取 Dify 应用的 iFrame 代码片段:

  • 登录你的 Dify 账户

  • 选择你想要嵌入的 Dify 应用

  • 点击右上角的“发布”按钮

  • 在发布页面中,选择 “Embed Into Site” 选项。

  • 选择合适的样式并复制显示的 iFrame 代码,例如:

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

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

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

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

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

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

3. 自定义 Dify Chatbot

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

3.1 自定义样式

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

<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 值可以调整按钮的位置。例如:

<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 代码框内的 widthheight 的百分比值。

Last updated