发布和集成
Blaflow 提供了多种方式来发布和集成您的流程到外部应用程序中。无论您是想通过 API 端点暴露您的流程，将其作为聊天小部件嵌入到您的网站中，还是作为公共应用广场分享，本指南都涵盖了使您的流程可供用户访问的选项。
API 集成
嵌入代码参考
- 进入集成设置： 导航至【集成】界面。
- 选择 API 集成方式： 点击【API 集成】->【嵌入代码参考】。可切换标签页选择想要嵌入的语言。
- 选择 API 密钥： 在下拉框中，可选择相应的 API 密钥。 （提示：API 密钥需先在【API 密钥】界面创建并获取。）
- 复制集成代码： 点击【复制】按钮，系统将自动复制代码片段至剪贴板即可将代码集成至第三方平台。
API面板提供了用于将您的流程集成到外部应用程序的代码模板。
- Python
- JavaScript
- curl
Python标签显示使用 Python requests库与您的流程交互的代码。
- 将代码复制并粘贴到 Python 脚本中。
- 运行脚本。
_10python3 python-test-script.py --message="tell me about something interesting"
响应内容取决于您的流程。确保端点返回成功的响应。
JavaScript API标签显示在 JavaScript 中与您的流程交互的代码。
- 将代码复制并粘贴到 JavaScript 文件中。
- 运行脚本。
_10node test-script.js "tell me about something interesting"
响应内容取决于您的流程。确保端点返回成功的响应。
cURL标签显示向您的流程发送查询的示例代码。
复制代码并运行它以向您的流程发送查询并获取结果。
响应内容取决于您的流程。确保端点返回成功的响应。
临时覆盖
临时覆盖标签显示您的流程可用的参数。
修改参数会更改所有窗口中的代码参数。
例如，更改聊天输入组件的input_value会更改对该流程的/run端点的所有 API 调用中的该值。
通过 API 向您的流程发送文件
有关向 Blaflow API 发送文件的信息，请参阅API 示例。
Webhook cURL
当在工作区中添加Webhook组件时，API面板中会出现一个新的Webhook cURL标签，其中包含用于触发 webhook 组件的 HTTP POST 请求。例如：
_10curl -X POST \_10 "http://127.0.0.1:7860/api/v1/webhook/**YOUR_FLOW_ID**" \_10 -H 'Content-Type: application/json'\_10 -d '{"any": "data"}'
要测试流程中的Webhook组件，请参阅Webhook 组件。
API 密钥
- 进入集成设置： 导航至【集成】界面。
- 选择 API 密钥管理界面： 点击【API 集成】->【API 密钥】。
- 管理 API 密钥：
- 创建新 API 密钥： 点击【创建 API 密钥】，在创建弹窗内输入密钥名称，输入完成后点击【提交】按钮，即完成 API 密钥创建。
- 管理现有 API 密钥： 在表格中会列出所有创建的 API 密钥的基本信息。点击【复制】图标按钮直接复制该密钥到剪贴板，也可对密钥进行编辑、启用禁用和删除操作。
网页集成
嵌入代码参考
嵌入代码参考标签显示可以插入到 HTML 的<body>中以与您的流程交互的代码。
- 进入集成设置： 在应用编排界面，点击上方的【集成】标签页。
- 选择网页嵌入方式： 点击【网页集成】->【嵌入代码参考】。
- 选择渠道码： 在下拉框中，选择目标网站对应的渠道码名称。 （提示：渠道码需先在【渠道码管理】界面创建并获取。）
- 复制嵌入代码： 点击【复制】按钮，系统将自动复制代码片段。
- 部署到网站： 将复制的代码粘贴到您网站的目标页面代码中即可完成集成。
使用 React 嵌入聊天小部件
要使用 React 嵌入聊天小部件，请将此<script> 标签添加到 React index.html文件中的<body>标签内。
_10<script src="https://cdn.jsdelivr.net/gh/blaflow-ai/blaflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
- 声明您的 web 组件并将其封装在 React 组件中。
_20declare global {_20 namespace JSX {_20 interface IntrinsicElements {_20 "blaflow-chat": any;_20 }_20 }_20}_20_20export default function ChatWidget({ className }) {_20 return (_20 <div className={className}>_20 <blaflow-chat_20 chat_inputs='{"your_key":"value"}'_20 chat_input_field="your_chat_key"_20 flow_id="your_flow_id"_20 host_url="blaflow_url"_20 ></blaflow-chat>_20 </div>_20 );_20}
- 将组件放在代码中的任何位置以显示聊天小部件。
使用 Angular 嵌入聊天小部件
要在 Angular 中使用聊天小部件，请将此<script>标签添加到 Angular index.html文件中的<body>标签内。
_10<script src="https://cdn.jsdelivr.net/gh/blaflow-ai/blaflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
当您在 Angular 模板中使用自定义 web 组件时，如果 Angular 编译器默认不识别自定义元素，可能会显示警告。要抑制此警告，请将CUSTOM_ELEMENTS_SCHEMA添加到模块的@NgModule.schemas中。
CUSTOM_ELEMENTS_SCHEMA是一个内置模式，允许在 Angular 模板中使用自定义元素，并抑制与未知元素（如blaflow-chat）相关的警告。
- 打开要添加
blaflow-chatweb 组件的模块文件.module.ts。 - 在
.module.ts文件顶部导入CUSTOM_ELEMENTS_SCHEMA：
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
- 在'@NgModule'装饰器内的'schemas'数组中添加
CUSTOM_ELEMENTS_SCHEMA：
_12@NgModule({_12 declarations: [_12 // ... 其他组件和指令 ..._12 ],_12 imports: [_12 // ... 其他导入的模块 ..._12 ],_12 schemas: [_12 CUSTOM_ELEMENTS_SCHEMA, // 在此处添加CUSTOM_ELEMENTS_SCHEMA_12 ],_12})_12export class YourModule {}
- 在您的 Angular 项目中，找到添加了
CUSTOM_ELEMENTS_SCHEMA的模块所属的组件。在模板中，添加blaflow-chat标签以在组件视图中 包含聊天小部件：
_10<blaflow-chat_10 chat_inputs='{"your_key":"value"}'_10 chat_input_field="your_chat_key"_10 flow_id="your_flow_id"_10 host_url="blaflow_url"_10></blaflow-chat>
聊天小部件配置
使用小部件 API 自定义您的聊天小部件。
类型为 JSON 的属性需要作为字符串化的 JSON 传递，格式为{"key":"value"}。
| 属性 | 类型 | 必需 | 描述 |
|---|---|---|---|
| bot_message_style | JSON | 否 | 应用于机器人消息的自定义格式。 |
| chat_input_field | String | 是 | 定义聊天消息输入字段的类型。 |
| chat_inputs | JSON | 是 | 确定聊天输入元素及其各自的值。 |
| chat_output_key | String | 否 | 如果有多个输出可用，指定要显示哪个输出。 |
| chat_position | String | 否 | 在屏幕上定位聊天窗口（选项包括：top-left, top-center, top-right, center-left, center-right, bottom-right, bottom-center, bottom-left）。 |
| chat_trigger_style | JSON | 否 | 设置聊天触发按钮的样式。 |
| chat_window_style | JSON | 否 | 自定义聊天窗口的整体外观。 |
| error_message_style | JSON | 否 | 设置聊天窗口内错误消息的格式。 |
| flow_id | String | 是 | 标识组件关联的流程。 |
| height | Number | 否 | 设置聊天窗口的高度（像素）。 |
| host_url | String | 是 | 指定聊天组件通信的主机 URL。 |
| input_container_style | JSON | 否 | 应用于输入聊天消息的容器的样式。 |
| input_style | JSON | 否 | 设置聊天输入字段的样式。 |
| online | Boolean | 否 | 切换聊天组件的在线状态。 |
| online_message | String | 否 | 设置聊天组件在线时显示的自定义消息。 |
| placeholder | String | 否 | 设置聊天输入字段的占位符文本。 |
| placeholder_sending | String | 否 | 设置发送消息时显示的占位符文本。 |
| send_button_style | JSON | 否 | 设置聊天窗口中发送按钮的样式。 |
| send_icon_style | JSON | 否 | 设置聊天窗口中发送图标的样式。 |
| tweaks | JSON | 否 | 为关联的流程应用额外的自定义调整。 |
| user_message_style | JSON | 否 | 确定聊天窗口中用户消息的格式。 |
| width | Number | 否 | 设置聊天窗口的宽度（像素）。 |
| window_title | String | 否 | 设置聊天窗口标题栏中显示的标题。 |
外链分发
- 进入集成设置： 在应用编排界面，点击上方的【集成】标签页。
- 选择网页嵌入方式： 点击【网页集成】->【外链分发】。
- 选择渠道码： 在下拉框中，选择目标用户对应的渠道码。 （提示：渠道码需先在【渠道码管理】界面创建并获取。）
- 复制外链： 点击【复制】按钮，系统将自动复制外链。
- 分发给外部用户： 将复制的代码粘贴发送给外部用户即可完成分发，外部用户可通过该链接访问该智能体。
渠道码
- 进入集成设置： 在应用编排界面，点击上方的【集成】标签页。
- 选择渠道码管理界面： 点击【网页集成】->【渠道码】。
- 管理渠道码：
- 创建新渠道码： 点击【创建渠道码】，在创建弹窗内输入渠道码名称，输入完成后点击【提交】按钮，即完成渠道码创建。
- 管理现有渠道码： 在表格中会列出所有创建的渠道码的基本信息。点击【复制】图标按钮直接复制该渠道码到剪贴板，也可对渠道码进行编辑、启用禁用和删除操作。
