Dify如何发布AI应用到网页_Dify应用发布方法【操作】

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《Dify如何发布AI应用到网页_Dify应用发布方法【操作】》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

需通过Dify发布机制生成前端代码：一、启用应用获取唯一链接；二、用iframe嵌入网页；三、用Web SDK定制轻量界面；四、配置CORS后调用API直连。

如果您已完成Dify平台上的AI应用配置，但尚未将其嵌入网页中供用户访问，则需要通过Dify提供的发布机制生成可集成的前端代码。以下是将Dify AI应用发布到网页的具体操作步骤：

一、启用应用并获取发布链接

在Dify中，只有已启用的应用才支持对外发布。启用后系统会分配唯一访问路径，该路径可直接用于网页跳转或嵌入。

1、登录Dify管理后台，进入【应用】列表页。

2、点击目标AI应用右侧的【编辑】按钮，进入应用设置页。

3、在【发布】选项卡下，确认【启用应用】开关处于开启状态。

4、启用后，页面自动显示【应用链接】，格式为 https://your-dify-domain.com/chat/xxxxx，此链接可直接分享或嵌入iframe。

二、通过iframe嵌入网页

iframe方式适用于快速将Dify聊天界面以独立模块形式嵌入现有网站，无需修改原站逻辑，且保持Dify官方UI样式。

1、复制上一步获取的【应用链接】。

2、在目标网页HTML文件中，定位需插入AI窗口的位置。

3、插入以下代码，将src属性替换为实际链接，并按需调整宽高：

三、使用Web SDK集成轻量版界面

Web SDK提供更灵活的定制能力，支持自定义启动按钮、消息气泡、主题色及初始提示词，适用于希望深度融合AI功能的网页。

1、在Dify应用的【发布】选项卡中，点击【Web SDK】区域的【复制代码】按钮。

2、将复制的

3、在页面中添加触发元素，例如：
打开AI助手

4、确保SDK初始化脚本中app_id字段值为当前应用的唯一App ID（形如app-xxxxxxxx），该ID位于【发布】页顶部信息栏。

四、配置CORS并启用API直连（高级用法）

当需绕过Dify默认UI、完全自定义前端交互时，可通过调用Dify公开API实现。此方式要求后端代理或前端配置CORS白名单，避免跨域拦截。

1、进入Dify【设置】→【API密钥】，创建新密钥并记录api_key值。

2、在Dify应用【发布】页，启用【启用API访问】开关。

3、将当前网页域名添加至【CORS允许来源】列表，格式为https://your-website.com（不含路径，支持通配符*）。

4、前端发起请求时，Header中必须包含：
Authorization: Bearer
Content-Type: application/json

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于科技周边的相关知识，也可关注golang学习网公众号。