Embed
#嵌入
你可以轻松地将聊天小部件添加到你的网站中。只需复制提供的部件脚本，并将其粘贴到HTML文件中<body>和</body>标签之间的任意位置即可。
组件设置
以下视频展示了如何将小部件脚本注入到任何网页中。
{% embed url="https://github.com/FlowiseAI/Flowise/assets/26460777/c128829a-2d08-4d60-b821-1e41a9e677d0" %}使用特定版本
你可以指定要使用的flowise-embed的web.js版本。如需查看完整版本列表，请访问：https://www.npmjs.com/package/flowise-embed
<script type="module">
从以下链接导入Chatbot：https://cdn.jsdelivr.net/npm/flowise-embed@<some-version>/dist/web.js；
Chatbot.init({
chatflowid: '在此处输入您的聊天流程ID',，
apiHost: '在此处输入您的API主机',，
})
</script>{% 提示 样式="警告" %}
在Flowise v2.1.0版本中，我们修改了流式处理的工作方式。如果您的Flowise版本低于此版本，您可能会发现您的嵌入式聊天机器人无法接收消息。
你可以将Flowise更新到v2.1.0或以上版本
或者，如果出于某种原因您不想更新Flowise，您可以指定Flowise-Embed的最新v1.x.x版本。最后维护的web.js版本是v1.3.14
例如：
https://cdn.jsdelivr.net/npm/[email protected]/dist/web.js
聊天流程配置
你可以传递chatflowConfig JSON对象来覆盖现有配置。这与API中的https://github.com/zzzz1997/nvmmeai-doc/blob/master/using-flowise/broken-reference/README.md相同。
/// 译文内容：
---
根据上面的信息，执行如下指令：
缺失译文，请检查输入
<script type="module">
从以下链接导入Chatbot：https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js；
Chatbot.init({
chatflowid: '在此处输入您的聊天流程ID',，
apiHost: '在此处输入您的API主机',，
chatflowConfig: {
"sessionId": "123",，
"returnSourceDocuments": true
}
})
</script>观察者配置
这允许您根据聊天机器人中的信号观测结果，在父进程中执行代码。
<script type="module">
从'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js'导入Chatbot；
Chatbot.init({
chatflowid: '在此处输入您的聊天流程ID',，
apiHost: '请在此处输入您的API主机',，
观察者配置：{
// 用户输入已更改
observeUserInput: (userInput) => {
console.log({ userInput });；
},
// 机器人消息堆栈已更改
observeMessages: (messages) => {
console.log({ messages });；
},
// 机器人加载信号已改变
observeLoading: (loading) => {
console.log({ loading });；
},
},
})
</script>主题
你可以通过主题属性来更改嵌入式聊天机器人的整体外观，并启用如工具提示、免责声明、自定义欢迎消息等功能。这使你能够深度定制小部件的外观和感觉，包括：
按钮：位置、大小、颜色、图标、拖放行为和自动打开。
**提示框：**可见性、消息文本、背景颜色、文本颜色和字体大小。
免责声明：标题、消息、文本颜色、按钮颜色和背景颜色，包括一个模糊覆盖选项。
聊天窗口：标题、客服/用户消息显示、欢迎/错误消息、背景颜色/图片、尺寸、字体大小、启动提示、HTML渲染、消息样式（颜色、头像）、文本输入行为（占位符、颜色、字符限制、音效）、反馈选项、日期/时间显示以及底部自定义。
自定义CSS：直接注入CSS代码，以便更精细地控制外观，并根据需要覆盖默认样式（请参阅下面的说明指南）
<script type="module">
从以下链接导入Chatbot：https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js；
Chatbot.init({
chatflowid: '在此处输入您的聊天流程ID',，
apiHost: '请在此处输入您的API主机',，
主题：{
按钮：{
背景颜色：'#3B81F6'，
右：20，
底部：20，
size: 48, // 小 | 中 | 大 | 数字
dragAndDrop: true,，
图标颜色：'白色'，
customIconSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',，
autoWindowOpen: {
autoOpen: true, //控制窗口自动打开的参数
openDelay: 2, // 可选参数，延迟时间（秒）
autoOpenOnMobile: false, // 控制移动设备上自动打开窗口的参数
},
},
工具提示：{
显示提示：true，
提示信息：嗨，你好👋！',
工具提示背景颜色：'黑色'，
工具提示文本颜色：'白色'，
提示字体大小：16，
},
免责声明：{
标题：免责声明，
消息：使用此聊天机器人，即表示您同意<a target="_blank" href="https://flowiseai.com/terms">条款与条件</a>，
文本颜色：'黑色'，
按钮颜色：'#3b82f6'，
buttonText: '开始聊天',，
按钮文本颜色：'白色'，
blurredBackgroundColor: 'rgba(0, 0, 0, 0.4)', //覆盖在聊天界面上的模糊背景的颜色
背景颜色：'白色'，
},
customCSS: '', // 添加自定义CSS样式。使用!important来覆盖默认样式
聊天窗口：{
显示标题：是，
显示智能体消息：是，
标题：'Flowise Bot'，
titleAvatarSrc: 'https://raw.githubusercontent.com/walkxcode/dashboard-icons/main/svg/google-messages.svg',，
标题文本颜色：'#ffffff'，
标题背景颜色：'#3B81F6'，
欢迎信息：'您好！这是自定义的欢迎信息',，
错误信息：'这是一个自定义错误信息'，
背景颜色：'#ffffff'，
backgroundImage: '输入图片路径或链接', // 如果设置，这将覆盖聊天窗口的背景颜色。
高度：700，
宽度：400，
字体大小：16，
启动提示：['什么是机器人？', '你是谁？']，// 它覆盖了通过聊天流程设置的启动提示
启动提示字体大小：15，
clearChatOnReload: false, // 如果设置为 true，则页面重新加载时聊天内容将被清除
sourceDocsTitle: '来源：'，
renderHTML: true,，
机器人消息：{
背景颜色：'#f7f8ff'，
文本颜色：'#303235'，
showAvatar: true,，
头像源：'https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/parroticon.png'，
},
userMessage: {
背景颜色：'#3B81F6'，
文本颜色：'#ffffff'，
`showAvatar`设置为`true`，
头像源：'https://raw.githubusercontent.com/zahidkhawaja/langchain-chat-nextjs/main/public/usericon.png'，
},
文本输入：{
占位符：'请输入您的问题'，
背景颜色：'#ffffff'，
文本颜色：'#303235'，
发送按钮颜色：'#3B81F6'，
最大字符数：50，
maxCharsWarningMessage: '您已超过字符限制。请输入少于50个字符。'。',
autoFocus: true, // 如果未使用，则移动设备上禁用自动对焦，桌面设备上启用。true 表示两者都启用，false 表示两者都禁用。
sendMessageSound: true,，
// sendSoundLocation: "send_message.mp3", // 如果未使用此项，则当sendSoundMessage为true时，将播放默认音效。
receiveMessageSound: true,，
// receiveSoundLocation: "receive_message.mp3", // 如果未使用此项，则当receiveSoundMessage为true时，将播放默认音效。
},
反馈：{
颜色：'#303235'，
},
dateTimeToggle: {
日期：是，
时间：true，
},
页脚：{
文本颜色：'#303235'，
文本：“由...提供技术支持”，
公司：'Flowise'，
companyLink: 'https://flowiseai.com',，
},
},
},
});
</script>**注意：**请参阅完整的配置列表
自定义代码修改
要修改嵌入式聊天小部件的完整源代码，请按照以下步骤操作：
运行
yarn install以安装必要的依赖项然后你可以进行任何代码修改
运行
yarn build以获取更改将更改推送到已分叉的仓库
然后，你可以像这样使用自定义的
web.js作为嵌入式聊天：
将username替换为您的Github用户名，将forked-repo替换为您的forked repo。
</strong> 从“https://cdn.jsdelivr.net/gh/username/forked-repo/dist/web.js”导入Chatbot
Chatbot.init({
chatflowid: "你的聊天流程ID在这里",，
apiHost: "请在此处输入您的API主机",，
})
<script type="module"> 从“https://cdn.jsdelivr.net/gh/HenryHengZJ/FlowiseChatEmbed-Test/dist/web.js”导入Chatbot Chatbot.init({ chatflowid: "你的聊天流程ID在这里",， apiHost: "请在此处填写您的API主机地址",， })</script>{% 提示 样式="信息" %} unpkg是jsdelivr的一个替代选项。以下是一个示例：
https://unpkg.com/flowise-embed/dist/web.js{% 结束提示 %}
自定义CSS修改
现在，您可以直接添加自定义CSS来设计嵌入式聊天小部件的样式，无需自定义web.js文件（需使用v2.0.8或更高版本）。这使您能够：
为每个嵌入式聊天机器人赋予独特的外观和感觉
使用官方的
web.js——无需再进行自定义构建或托管以进行样式设置立即更新样式
使用方法如下：
<script src="https://cdn.jsdelivr.net/gh/FlowiseAI/FlowiseChatEmbed@main/dist/web.js"></script>
<script>
Chatbot.init({
chatflowid: "你的聊天流程ID在这里",，
apiHost: "请在此处填写您的API主机地址",，
主题：{
// ... 其他主题设置
自定义CSS：`
/* 您的自定义CSS代码在此 */
/* 使用 !important 来覆盖默认样式 */
`,
}
});
</script>CORS
在使用嵌入式聊天小部件时，您可能会遇到CORS问题，例如：
{% 提示 style="danger" %}
从源站“https://<your-flowise.com>”访问“https://<your-flowise.com>/api/v1/prediction/”以获取数据的行为已被CORS策略阻止：请求的资源上未出现“Access-Control-Allow-Origin”标头。
要修复此问题，请指定以下环境变量：
CORS_ORIGINS=*
IFRAME_ORIGINS=*例如，如果你正在使用npx flowise start
npx flowise start --CORS_ORIGINS=* --IFRAME_ORIGINS=*如果使用Docker，请将环境变量置于Flowise/docker/.env文件中
如果使用本地Git克隆，请将环境变量放置在Flowise/packages/server/.env文件中
视频教程
这两个视频将教你如何将Flowise小部件嵌入到网站中。
Last updated