Dify 智能体怎么嵌入网站？从发布链接到 iframe 验证

把 Dify 智能体放进网站，最短的路径是先发布应用、复制它的 Web App 链接，再用 iframe 嵌入网站页面。这样展示的是同一个已发布应用，无需在浏览器里放 Dify 应用 API Key。需要悬浮客服入口时，也可以使用 Dify 提供的聊天气泡脚本。

本文适合已做好 Dify 聊天应用、能编辑网站页面 HTML 的站长。依据 2026 年 10 月 1 日的 Dify Cloud 官方文档整理；自部署域名和旧版本菜单可能不同。本文没有在读者的网站上实测，代码用于演示集成方式，最终以自己的真实应用链接和浏览器检查结果为准。

先发布，再确认链接能独立打开

1. 在 Dify 应用里点击 Publish，将当前配置发布为可访问版本。
2. 打开应用的 Access Point，在 Web App 卡片复制应用链接。
3. 用浏览器新窗口独立打开该链接，发送一条简单问题，确认应用能返回回答。
4. 再用退出 Dify 管理后台的浏览器或无痕窗口检查，确认目标读者需要的访问方式成立。若应用要求认证，先按该应用的访问配置完成认证。

官方的 发布说明指出，发布会让最新应用配置对用户生效。先检查独立链接，可以把“Dify 应用本身不能用”与“网页嵌入出了问题”分开。

测试用提问可以是“请只回复：网站嵌入检查完成”。这是连通性检查用例，不是客服内容质量测试。应用有严格角色限制时，改用它本来就支持的问题，并记录同一问题在独立链接和嵌入页里的结果。

方法一：在页面中嵌入 iframe

对于专门的 AI 助手页、产品演示页，iframe 最直观。Dify 官方 网站嵌入文档提供了 iframe 方式；实际操作时直接复制 Access Point → Web App → Embed Into Site 中生成的代码，最能避免链接路径错误。

下面是经过简化的示意。将 src 整段替换成你刚刚独立验证过的应用链接；不要仅替换域名却保留不适用的路径。

<iframe
  src="https://udify.app/chatbot/YOUR_APP_TOKEN"
  title="AI 助手"
  style="width: 100%; height: 600px; border: 0;"
></iframe>

YOUR_APP_TOKEN 是示意字符，不是真实应用凭证。不同应用和版本的链接路径可能不同，复制实际 Web App 链接优于根据示例拼接。应用链接里的 Web App token 是公开访问入口的一部分，不应与应用 API Key 混淆。

WordPress 页面怎么放

如果使用 WordPress 区块编辑器，可以在一张单独的页面里新增“自定义 HTML”区块，粘贴 iframe，先预览再保存。主题页面构建器通常有 HTML/代码组件，放入的位置以该构建器为准。

保存后查看公开页面的源代码，搜索 iframe。如果保存前有 iframe、保存后被删除，检查当前账号是否具有保存此类 HTML 的权限，以及站点是否有过滤 iframe 的编辑器或安全设置；不能只在后台预览看到内容就认定公开页成功。需要管理员调整时，提供被过滤的标签和目标应用域名，避免同时更改无关设置。

方法二：用聊天气泡提供全站入口

客服助手通常更适合右下角悬浮按钮。仍在 Embed Into Site 中复制聊天气泡代码，它通常包括 window.difyChatbotConfig 配置和嵌入脚本。按生成代码的顺序加载配置与脚本，不要只复制配置对象。

在 WordPress 中，全站脚本可由现有的页脚代码管理工具或主题提供的代码入口承载。先在测试页面验证，再决定是否全站加载；具体插件名称和入口由你站点现有工具决定。

气泡位置可在配置的 containerProps.style 中调整。例如，保留生成代码的其他字段，把位置设为：

containerProps: {
  style: {
    right: '20px',
    bottom: '80px'
  }
}

这段只是配置片段，不能单独产生聊天按钮。把 bottom 调大，适合避开手机端底部导航；更改后要在手机屏幕检查，不能只看电脑网页。

上线前做四个能看见结果的检查

iframe 和气泡展示的都是已发布 Web App。修改 Dify 草稿后，应重新 Publish 才能让嵌入应用使用新版本；网站是否需要额外清缓存，要看网页是否仍保留旧嵌入代码，不能把所有更新问题都归结为缓存。

空白页面、按钮不出现时怎么查

• 独立链接也打不开：回到 Dify 检查发布状态、实际链接和访问条件，暂时不改网站 HTML。
• 独立链接能用，iframe 空白：检查 src 是否被改坏；网站和应用应使用 HTTPS；查看浏览器控制台是否报告 Content Security Policy 的 frame-src 限制。若有明确拦截，再请网站管理员对目标来源调整策略。
• 气泡不出现：检查生成代码是否完整、配置是否先于脚本加载、是否被放进了只展示文字的组件，并查看控制台中的 JavaScript 错误。
• 出现两个气泡：搜索主题、页脚工具和页面组件是否重复加载同一嵌入脚本，保留一次加载即可。
• 只在登录管理后台时能用：用退出登录的浏览器验证应用访问条件和公开页面输出；不要根据管理员自己的会话推断访客可用。

什么时候需要后端 API 集成

如果要把聊天记录放进自己的账户系统、按登录用户管理会话，或者深度定制交互，适合通过后端调用 Dify API。官方 API 入门文档要求把 API Key 放在后端；不能为了“省一个后端”把它写进网页 JavaScript。

嵌入参数和网页里的用户标识不能作为可信身份。Dify 官方 用户输入文档明确提醒，Hidden & Pre-Filled 字段不是秘密，值可以在 URL 和浏览器中看到。可以用它传产品名或展示语言，涉及账户权限和内部数据时应在自己的后端鉴权。

给网站加一个 iframe 会自动获得客服转人工吗？

不会。iframe 只负责展示 Dify 应用；真实客服接管、工单、通知仍要由应用和客服系统分别实现。如果当前只是问答助手，页面入口就如实标明“AI 助手”，不要让用户误以为点击后一定有人类客服接入。