1
 1|# 聊天 Web App
2
 2|
3
 3|> 原文：[聊天 Web App ](https://docs.dify.ai/zh/use-dify/publish/webapp/chatflow-webapp)
4
 4|
5
 5|---
6
 6|
7
 7|## Documentation IndexFetch the complete documentation index at:[https://docs.dify.ai/llms.txt](https://docs.dify.ai/llms.txt)
8
 8|
9
 9|
10
10|> ⚠️ ⚠️ 本文档由 AI 自动翻译。如有任何不准确之处，请参考[英文原版](/en/use-dify/publish/webapp/chatflow-webapp)。
11
11|
12
12|聊天 Web App 将你的对话流转变为完整的对话体验。用户可获得持续的聊天会话、智能交互以及你配置的所有功能——无需安装任何软件。
13
13|
14
14|
15
15|## 聊天 Web App 的工作原理当你发布对话流时，它会自动变成网页应用。系统会创建一个响应式界面，具备以下特点：
16
16|
17
17|
18
18|- ** 在用户会话间保持对话上下文 **
19
19|- ** 继承对话流配置的所有编排设置 **
20
20|- ** 适应从移动设备到桌面的任何屏幕尺寸 **
21
21|- ** 处理用户身份验证 **（如果你启用了访问控制）
22
22|> 💡 与一次性文本生成器不同，聊天 Web App 保持对话记忆，让用户可以基于之前的交流继续构建对话。
23
23|
24
24|
25
25|## 交互功能你的网页应用会根据对话流设置自动包含以下功能：
26
26|
27
27|
28
28|## 对话前表单在聊天开始前收集上下文信息——比在对话中途询问更好
29
29|
30
30|
31
31|## AI 对话开场白通过有用的开场消息消除空白页面问题
32
32|
33
33|
34
34|## 智能后续问题系统在每次回应后生成 3 个与上下文相关的后续问题
35
35|
36
36|
37
37|## 语音输入语音转文字让用户可以说话而不必打字
38
38|
39
39|
40
40|## 来源引用参考资料显示信息的准确来源
41
41|
42
42|
43
43|## 回应反馈用户可以对回应进行评价以帮助改进你的应用
44
44|
45
45|
46
46|## 对话前设置当你的对话流使用变量时，用户在开始聊天前需要完成一个表单。这种做法将上下文收集前置，而不是中断对话流程。
47
47|
48
48|
49
49|用户体验流程如下：
50
50|
51
51|1 用户访问你的应用
52
52|
53
53|他们会看到一个简洁的表单，要求提供必要的上下文信息。
54
54|
55
55|2 完成表单后解锁聊天
56
56|
57
57|只有在填写完必填字段后，“开始对话”按钮才会激活。
58
58|
59
59|3AI 获得完整上下文
60
60|
61
61|对话开始时就具备所有需要的背景信息。
62
62|
63
63|
64
64|> 💡 每个表单字段都会增加摩擦。只询问能够显著改善回应的信息。
65
65|
66
66|
67
67|## 对话体验一旦开始聊天，用户会获得专为自然交互设计的界面：
68
68|
69
69|
70
70|每个 AI 回应都包含这些操作：
71
71|
72
72|
73
73|- ** 复制按钮 **- 一键复制，便于分享或记录笔记
74
74|- ** 反馈按钮 **- 点的应用持续改进
75
75|- ** 后续建议 **- AI 生成 3 个与上下文相关的后续问题
76
76|## 会话管理用户可以像现代消息应用一样管理多个对话线程：
77
77|
78
78|
79
79|** 对话控制功能 **：
80
80|
81
81|
82
82|- ** 新建 **- 开始新的对话而不丢失之前对话的上下文
83
83|- ** 置顶重要对话 **- 将重要对话保持在列表顶部，便于访问
84
84|- ** 删除已完成对话 **- 清理不再相关的对话
85
85|> 💡 每个对话线程都维护自己的记忆和上下文。用户可以在不同主题或项目间无缝切换。
86
86|
87
87|
88
88|## 对话开场白启用对话开场白来消除令人生畏的空白聊天屏幕：
89
89|
90
90|
91
91|当用户开始新对话时，AI 会主动介绍自己并解释其功能。这立即向用户展示他们可以完成什么任务，并提高参与度。
92
92|
93
93|
94
94|> 💡 对话开场白在专业应用中特别有效，因为用户可能不知道所有可用功能。
95
95|
96
96|
97
97|## 后续问题系统在每次 AI 回应后自动生成与上下文相关的后续问题：
98
98|
99
99|

1
 1|# 网站嵌入
2
 2|
3
 3|> 原文：[网站嵌入](https://docs.dify.ai/zh/use-dify/publish/webapp/embedding-in-websites)
4
 4|
5
 5|---
6
 6|
7
 7|## Documentation IndexFetch the complete documentation index at:[https://docs.dify.ai/llms.txt](https://docs.dify.ai/llms.txt)
8
 8|
9
 9|
10
10|> ⚠️ ⚠️ 本文档由 AI 自动翻译。如有任何不准确之处，请参考[英文原版](/en/use-dify/publish/webapp/embedding-in-websites)。
11
11|
12
12|将 Dify 应用嵌入到网站中，可以直接为你的访问者带来 AI 功能。无论你想要一个浮动聊天按钮、全屏聊天界面，还是嵌入式小组件，Dify 都提供了适用于任何网站技术的灵活选项。
13
13|
14
14|
15
15|## 嵌入选项
16
16|## 聊天气泡按钮浮动聊天按钮，打开你的 AI 助手——非常适合客户支持
17
17|
18
18|
19
19|## Iframe 嵌入在网页内容中完整嵌入界面，直接访问
20
20|
21
21|
22
22|## 自定义集成使用 JavaScript API 完全控制用户体验
23
23|
24
24|
25
25|## 响应式设计所有嵌入都会自动适应不同的屏幕尺寸和设备
26
26|
27
27|
28
28|## 聊天气泡设置浮动聊天按钮是最受欢迎的嵌入方法。它会在你的网站上添加一个可自定义的按钮，点击时打开你的 AI 助手。
29
29|
30
30|
31
31|### 配置选项聊天气泡可以通过`difyChatbotConfig`对象进行自定义：
32
32|
33
33|
34
34|```
35
35|`window.difyChatbotConfig={
36
36|// 必需：来自 Dify 的应用令牌
37
37|token:'YOUR_TOKEN',
38
38|
39
39|// 可选：环境设置
40
40|isDev:false,
41
41|baseUrl:'https://udify.app',// 基于 isDev 自动设置
42
42|
43
43|// 可选：视觉自定义
44
44|containerProps:{
45
45|style:{
46
46|right:'20px',
47
47|bottom:'20px'
48
48|},
49
49|className:'custom-chat-button'
50
50|},
51
51|
52
52|// 可选：交互行为
53
53|draggable:false,// 允许用户拖动按钮
54
54|dragAxis:'both',// 'x'、'y' 或 'both'
55
55|
56
56|// 可选：预填充用户上下文
57
57|inputs:{
58
58|name:"John Doe",// 来自你的 Dify 应用的变量名
59
59|department:"Support"
60
60|},
61
61|
62
62|// 可选：用于追踪的系统变量
63
63|systemVariables:{
64
64|user_id:'USER_123',
65
65|conversation_id:'CONV_456'
66
66|},
67
67|
68
68|// 可选：用户个人资料信息
69
69|userVariables:{
70
70|avatar_url:'https://example.com/avatar.jpg',
71
71|name:'John Doe'
72
72|}
73
73|}
74
74|`
75
75|```
76
76|1 获取你的嵌入令牌
77
77|
78
78|在你的 Dify 应用中，前往 ** 发布 → 嵌入 ** 找到你的唯一令牌。
79
79|
80
80|2 添加脚本
81
81|
82
82|在你网站的 HTML 中包含配置和 Dify 的嵌入脚本。
83
83|
84
84|3 自定义外观
85
85|
86
86|调整`containerProps`以匹配你网站的设计。
87
87|
88
88|4 测试功能
89
89|
90
90|打开你的网站并尝试聊天按钮，确保一切正常工作。
91
91|
92
92|
93
93|## Iframe 嵌入为了获得更集成的体验，可以将你的 Dify 应用直接嵌入到网页内容中：
94
94|
95
95|
96
96|```
97
97|`<iframe
98
98|src="https://udify.app/chatbot/YOUR_APP_TOKEN"
99
99|width="100%"

1
 1|# 访问控制
2
 2|
3
 3|> 原文：[访问控制](https://docs.dify.ai/zh/use-dify/publish/webapp/web-app-access)
4
 4|
5
 5|---
6
 6|
7
 7|## Documentation IndexFetch the complete documentation index at:[https://docs.dify.ai/llms.txt](https://docs.dify.ai/llms.txt)
8
 8|
9
 9|
10
10|> ⚠️ ⚠️ 本文档由 AI 自动翻译。如有任何不准确之处，请参考[英文原版](/en/use-dify/publish/webapp/web-app-access)。
11
11|
12
12|Web 应用访问控制决定了谁可以使用你发布的应用程序。默认情况下，新应用仅限特定团队成员访问——你可以精确选择谁有权限访问。
13
13|
14
14|
15
15|> 💡 只有工作空间所有者、管理员和编辑者角色才能创建和发布 Web 应用。
16
16|
17
17|
18
18|## 访问权限类型从工作室 → Web 应用访问权限配置访问权限，或在编辑应用时从发布面板进行配置。
19
19|
20
20|Dify Enterprise 提供四个访问级别：
21
21|
22
22|
23
23|### 平台内所有成员你的 Dify Enterprise 工作空间中的任何成员都可以访问该应用。用户必须使用其工作空间凭据进行身份验证——密码、验证码或 SSO。
24
24|
25
25|成员可以通过直接 URL 或工作空间 Explorer 页面访问应用。
26
26|
27
27|
28
28|> 💡 如果你从 Dify Enterprise v2.7.x 或更早版本升级且启用了 Web App SSO，你的应用在 v2.8.x 升级期间会自动切换为 ** 已认证的外部用户 ** 权限。
29
29|
30
30|
31
31|### 平台内特定成员 ** 新应用的默认设置。** 限制访问权限给工作空间内选定的组或个人成员。非常适合部门特定工具或敏感数据应用。
32
32|
33
33|
34
34|> 💡 如果没有选择任何组或成员，任何人都无法访问你的应用——包括你自己。
35
35|
36
36|
37
37|通过组或个人配置访问权限：
38
38|
39
39|
40
40|- 按组
41
41|- 按个人:first-child:not(p)]:mt-0 [&>:first-child:not(p)_img]:mt-0 [&>:first-child[data-table-wrapper]]:!pt-0" data-component-part="tab-content"> 添加整个组以实现自动权限管理。当有人加入组时，他们获得应用访问权限。当他们离开时，访问权限被撤销。
42
42|
43
43|
44
44|:first-child:not(p)]:mt-0 [&>:first-child:not(p)_img]:mt-0 [&>:first-child[data-table-wrapper]]:!pt-0 hidden" data-component-part="tab-content"> 授予特定人员访问权限。即使从相关组中移除，他们仍保留访问权限。其他组成员无法访问该应用。
45
45|
46
46|
47
47|> 💡 工作空间所有者、管理员和编辑者始终可以编辑工作空间中的任何应用。但是，他们仍需要被明确添加到访问列表中才能使用已发布的 Web 应用。
48
48|
49
49|
50
50|### 已认证的外部用户你的 Dify Enterprise 工作空间外的用户可以通过 SSO 身份验证访问应用。管理员通过第三方身份提供商管理外部用户，将他们与内部工作空间数据分开。
51
51|
52
52|
53
53|## 大型企业 IT 部门构建应用，其他部门无需加入 Dify 即可使用
54
54|
55
55|
56
56|## 外部合作伙伴为供应商、承包商或客户提供 AI 服务
57
57|
58
58|
59
59|## 客户支持面向公众的产品帮助和咨询工具
60
60|
61
61|
62
62|> 💡 如果此选项被禁用，请联系你的 Dify 管理员配置 Web 应用外部用户认证。
63
63|
64
64|
65
65|### 任何人 ** 无需身份验证。** 任何拥有 URL 的人都可以立即访问你的应用。用于公开演示、客户工具或开放资源。
66
66|
67
67|
68
68|## 查找你的应用团队成员可以在工作空间 Explorer 页面看到所有可访问的应用：
69
69|
70
70|
71
71|## 常见问题权限更改是否需要重新发布？
72
72|
73
73|不需要。更改立即生效。但是，有活动会话的用户可能需要等待其会话过期后新的限制才会生效。
74
74|
75
75|如何查看谁有访问权限？
76
76|
77
77|在应用发布设置的 ** 谁可以访问 Web 应用 ** 部分查看当前权限。
78
78|
79
79|我应该选择哪个权限级别？
80
80|
81
81|
82
82|- ** 所有成员 **：内部协作工具
83
83|- ** 特定成员 **：部门特定或敏感应用
84
84|- ** 外部用户 **：客户服务和合作伙伴工具
85
85|- ** 任何人 **：公开演示（谨慎使用）Web 应用权限是否影响 API 访问？
86
86|
87
87|不影响。API 访问由 API 密钥单独控制。更改 Web 应用权限不会影响现有的 API 功能。
88
88|

1
 1|# Web App 设置
2
 2|
3
 3|> 原文：[Web App 设置](https://docs.dify.ai/zh/use-dify/publish/webapp/web-app-settings)
4
 4|
5
 5|---
6
 6|
7
 7|## Documentation IndexFetch the complete documentation index at:[https://docs.dify.ai/llms.txt](https://docs.dify.ai/llms.txt)
8
 8|
9
 9|
10
10|> ⚠️ ⚠️ 本文档由 AI 自动翻译。如有任何不准确之处，请参考[英文原版](/en/use-dify/publish/webapp/web-app-settings)。
11
11|
12
12|Web App 设置控制你发布的应用程序对最终用户的外观和行为。每个 Dify 应用程序都会自动生成一个适应不同设备和屏幕尺寸的 Web 界面。
13
13|
14
14|
15
15|## 设置工作原理你的 Web 应用反映了你应用程序的当前配置。当你修改设置并点击”发布”时，更改会立即流向用户正在访问的实时 Web 应用程序。
16
16|
17
17|
18
18|> 💡 Web 应用默认情况下无需用户账户或登录即可工作，这使它们非常适合公共工具和演示。
19
19|
20
20|
21
21|## 品牌和外观让你的 Web 应用看起来专业且易于识别：
22
22|
23
23|
24
24|## 应用身份设置你的应用名称、描述和图标，以创造清晰的第一印象
25
25|
26
26|
27
27|## 视觉设计选择与你的品牌匹配的颜色、主题和布局选项
28
28|
29
29|
30
30|## 语言设置为你的目标受众配置界面语言
31
31|
32
32|
33
33|## 法律页面添加版权信息和隐私政策链接以符合合规要求
34
34|
35
35|
36
36|### 基本品牌元素 ** 应用图标和名称 **
37
37|
38
38|
39
39|- 你的图标会出现在浏览器标签页中，以及用户收藏你的应用时
40
40|- 选择一个清晰、易于识别的名称来解释你的应用功能
41
41|- 图标可以是图片或表情符号——选择符合你应用个性的 ** 描述和消息传达 **
42
42|
43
43|
44
44|- 编写简洁的描述，帮助用户理解你应用的用途
45
45|- 此文本会出现在应用的着陆页和搜索结果中
46
46|- 为获得最佳效果，请保持在 160 个字符以内 ** 视觉一致性 **
47
47|
48
48|
49
49|- 选择与你的品牌一致的颜色
50
50|- 在选择明亮或暗色主题时考虑你的受众
51
51|- 在不同设备上测试你的应用，确保在各处都看起来良好
52
52|## 访问和隐私控制控制谁可以使用你的应用以及如何使用：
53
53|
54
54|公共访问（默认）
55
55|
56
56|任何拥有 URL 的人都可以立即使用你的应用。非常适合演示、公共工具以及与大量受众分享。
57
57|
58
58|访问控制
59
59|
60
60|要求身份验证或限制使用特定用户。对内部工具或高级功能很有用。
61
61|
62
62|隐私设置
63
63|
64
64|配置数据处理，添加隐私政策链接，并设置版权信息以符合法律合规要求。
65
65|
66
66|
67
67|## 功能继承你的 Web 应用会自动包含你在应用程序配置中启用的功能：
68
68|
69
69|** 交互功能 **：
70
70|
71
71|
72
72|- 对话开启器和建议的后续操作
73
73|- 对话前表单用于上下文收集
74
74|- 语音输入和语音转文字能力
75
75|- 来源引用与归属和参考链接
76
76|- 反馈收集和评分系统 ** 功能性 **：
77
77|
78
78|
79
79|- 所有工作流步骤和 AI 模型配置
80
80|- 知识库集成和工具连接
81
81|- 自定义提示词和响应格式
82
82|- 速率限制和使用控制
83
83|> 💡 在你的应用配置中禁用功能会立即从发布的 Web 应用中移除它们。
84
84|
85
85|
86
86|## 应用类型和行为你的 Web 应用会根据你的应用程序类型自动适应其界面：
87
87|
88
88|
89
89|- 对话应用程序
90
90|- 工作流应用程序:first-child:not(p)]:mt-0 [&>:first-child:not(p)_img]:mt-0 [&>:first-child[data-table-wrapper]]:!pt-0" data-component-part="tab-content">** 界面 **： 具有消息历史记录的对话式风格 ** 功能 **： 持久会话、对话管理、实时响应 ** 最适合 **： 客户支持、咨询工具、交互式助手
91
91|
92
92|:first-child:not(p)]:mt-0 [&>:first-child:not(p)_img]:mt-0 [&>:first-child[data-table-wrapper]]:!pt-0 hidden" data-component-part="tab-content">** 界面 **： 基于表单的结果显示 ** 功能 **： 单次运行、批处理、结果保存 ** 最适合 **： 内容生成、数据处理、分析工具
93
93|
94
94|在分享你的 Web 应用之前：
95
95|
96
96|1 测试用户体验
97
97|
98
98|在不同设备和浏览器上尝试你的应用，确保运行顺畅。
99
99|

1
 1|# 工作流 Web App
2
 2|
3
 3|> 原文：[工作流 Web App](https://docs.dify.ai/zh/use-dify/publish/webapp/workflow-webapp)
4
 4|
5
 5|---
6
 6|
7
 7|## Documentation IndexFetch the complete documentation index at:[https://docs.dify.ai/llms.txt](https://docs.dify.ai/llms.txt)
8
 8|
9
 9|
10
10|> ⚠️ ⚠️ 本文档由 AI 自动翻译。如有任何不准确之处，请参考[英文原版](/en/use-dify/publish/webapp/workflow-webapp)。
11
11|
12
12|工作流 Web App 将你的 Dify 工作流转换为生产就绪的应用程序，可以处理从单次运行到大规模批处理操作的各种任务。用户可以获得清晰的输入界面、实时处理反馈和全面的结果管理功能。
13
13|
14
14|
15
15|## 工作流应用如何工作当你发布工作流时，Dify 会自动创建一个网页界面，该界面：
16
16|
17
17|
18
18|- ** 收集输入参数 **：通过基于工作流起始变量的表单
19
19|- ** 处理请求 **：使用你完整的工作流逻辑
20
20|- ** 处理结果 **：具有内置的保存、复制和管理功能
21
21|- ** 自动扩展 **：从单次运行扩展到批处理数百个项目
22
22|> 💡 与维护对话上下文的聊天应用不同，工作流应用设计用于产生特定输出的离散任务。
23
23|
24
24|
25
25|## 单次执行一次运行一个工作流，获得即时结果和反馈
26
26|
27
27|
28
28|## 批处理通过 CSV 上传 / 下载同时处理数百个输入
29
29|
30
30|
31
31|## 结果管理使用内置存储保存、整理和导出输出
32
32|
33
33|
34
34|## 生成类似内容自动生成成功输出的变体
35
35|
36
36|
37
37|## 单次执行工作流应用的默认模式处理带有实时处理的单个请求：
38
38|
39
39|
40
40|** 用户体验 **：
41
41|
42
42|
43
43|- ** 填写输入表单 **- 用户根据你工作流的起始变量提供参数
44
44|- ** 点击运行 **- 工作流执行，并显示实时进度指示
45
45|- ** 查看结果 **- 输出显示，可立即访问复制、保存和反馈选项
46
46|- ** 采取操作 **- 用户可以保存重要结果、提供反馈或生成类似输出每个结果都包含内置操作：
47
47|
48
48|
49
49|- ** 复制 **- 一键复制到剪贴板，方便分享
50
50|- ** 保存 **- 将结果存储在应用的已保存项目中，供以后访问
51
51|- ** 反馈 **- 点赞 / 点踩评级，帮助改进你的工作流
52
52|- ** 生成类似内容 **- 基于当前结果生成变体（如果启用）
53
53|## 批处理当你需要对多个输入运行相同的工作流时，批处理可以同时处理数百次执行：
54
54|
55
55|
56
56|> 💡 非常适合为多个主题生成内容、处理客户数据或分析大型数据集等任务。
57
57|
58
58|
59
59|### 设置批量运行 1 切换到批处理模式
60
60|
61
61|点击”批量运行”标签以访问批处理功能。
62
62|
63
63|
64
64|2 获取 CSV 模板
65
65|
66
66|下载模板文件以查看工作流输入变量所需的列结构。
67
67|
68
68|
69
69|3 准备你的数据
70
70|
71
71|使行都将成为一次工作流执行。
72
72|
73
73|4 上传并运行
74
74|
75
75|上传你完成的 CSV 文件并开始批处理。
76
76|
77
77|
78
78|### 批处理优势
79
79|- ** 并行执行 **- 多个工作流运行同时进行
80
80|- ** 进度跟踪 **- 完成状态的实时更新
81
81|- ** 批量导出 **- 完成后将所有结果下载为 CSV 文件
82
82|- ** 错误处理 **- 失败的项目会清楚地标记错误详情
83
83|> 💡 CSV 文件必须使用 Unicode 编码以防止导入失败。从 Excel 或类似工具保存时，请明确选择”Unicode (UTF-8)“编码。
84
84|
85
85|
86
86|## 结果管理工作流应用包含全面的结果管理功能，帮助用户整理和重复使用输出：
87
87|
88
88|
89
89|### 保存结果
90
90|
91
91|** 保存工作原理 **：
92
92|
93
93|
94
94|- 用户点击任何想要保留的结果上的”保存”
95
95|- 保存的项目出现在专用的”已保存”标签中
96
96|- 每个保存的结果包含原始输入和完整输出
97
97|- 用户可以整理保存的结果并随时访问
98
98|> 💡 保存的结果在用户会话间持久保存，使工作流应用对构建个人输出库非常有用。
99
99|