需通过Dify发布机制生成前端代码：一、启用应用获取唯一链接；二、用iframe嵌入网页；三、用Web SDK定制轻量界面；四、配置CORS后调用API直连。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜
如果您已完成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属性替换为实际链接，并按需调整宽高：
<iframe src="https://your-dify-domain.com/chat/xxxxx" width="100%" height="600" frameborder="0"></iframe>
三、使用Web SDK集成轻量版界面
Web SDK提供更灵活的定制能力，支持自定义启动按钮、消息气泡、主题色及初始提示词，适用于希望深度融合AI功能的网页。
1、在Dify应用的【发布】选项卡中，点击【Web SDK】区域的【复制代码】按钮。
2、将复制的<script>标签粘贴至网页HTML的<head>或<body>底部。</script>
3、在页面中添加触发元素，例如：
<button id="dify-chat-btn">打开AI助手</button>
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 <your_api_key>
Content-Type: application/json
