手把手带你学扣子Coze之Chat SDK部署指南

最新推荐文章于 2025-05-07 17:16:33 发布

落笔画忧愁e

最新推荐文章于 2025-05-07 17:16:33 发布

阅读量4.1k

点赞数 20

文章标签：扣子商店 Coze插件 Coze

本文链接：https://blog.youkuaiyun.com/weixin_47115107/article/details/146284985

版权

快速将智能体部署到自己的网页上，实现免登录访问

介绍部分建议查看官方文档：https://www.coze.cn/open/docs/developer_guides/install_web_sdk

看完后直接跳到最后，查看示例代码

扣子Chat SDK 是一个 JavaScript 库，集成了扣子 OpenAPI 的对话、文件上传等能力，便于开发者高效、便捷、快速地搭建一个聊天应用。集成扣子 Chat SDK 之后，用户可通过网页悬浮窗方式与 AI 应用对话。

比如我们的知识库AI助手

点开后可以直接进行对话而不需要登录

支持功能

功能	说明
多形态支持	通过 Chat SDK，可以在你的应用程序中和扣子应用、智能体实时对话。
鉴权能力	通过扣子访问令牌进行 OpenAPI 的鉴权，支持个人访问密钥（PAT）、普通 OAuth 访问密钥及入驻渠道的 OAuth 访问密钥。
用户识别	和 AI 应用对话的用户身份是用户在开发者网站上的身份。开发者可以向 Chat SDK 提供 AI 应用用户的身份信息，也可以在 Chat SDK 的 UI 中显示不同的用户信息，包括头像、用户名、ID 等。
交互能力	Chat SDK 为开发者提供了以下两种打开聊天窗的方式。* 完全由 Chat SDK 接管，页面中会自动加载一个悬浮球，用户点击悬浮球会展示出聊天框。为开发者提供显示隐藏聊天框的能力，开发者可根据情况自主决定聊天框的显示和隐藏。
展示效果	支持调整聊天框中展示的用户信息、UI 效果、悬浮球效果、底部文案等配置，例如对话窗口的应用图标、悬浮球的展示或隐藏、自定义底部文案、开启或关闭上传能力等。

安装

在网页中引用以下代码

<script src="https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.1.0-beta.0/libs/cn/index.js"></script>

获取Token

这里以获取个人访问令牌为例，实际使用中应该使用OAuth JWT令牌

点击侧边栏-扣子API-个人访问令牌-添加新令牌

您可以根据需求自定义以下设置：

名称与过期时间：支持用户自定义命名和设置有效期限
权限配置：四个必选权限
1. Bot管理权限
2. 会话权限
3. 消息权限
4. 文件权限
团队空间访问：选择智能体所在的工作空间即可

完成设置后，请点击"确定"按钮保存配置。

记录这个令牌，只显示一次，关闭后就没有了。

配置

在你的网页上面配置聊天框

添加以下代码

<script>

const cozeWebSDK = new CozeWebSDK.WebChatClient({

config: {

// 智能体 ID

botId: '740849137970326****',

},

auth: {

// 鉴权方式

type: 'token',

// 鉴权密钥

token: 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',

// 备用密钥

onRefreshToken: () => 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',

}

});

</script>

完整代码参考

鉴权方式为token，这个不要改。

token就是咱们前面获取的那一段令牌

获取智能体ID

在工作空间点开智能体

查看地址栏，最后的一段数字就是智能体ID

将这些信息修改到代码中即可。

加下来，打开网页，就能看到右下角有一个按钮

点击按钮，即可打开

这是系统默认的初始页面，目前已经可以正常使用。

但当前存在一个需要改进的问题：所有用户访问时看到的内容是完全相同的。举例来说，用户A的聊天记录可能会被用户B看到，这显然不符合隐私保护的要求。

为了解决这个问题，我们需要实现会话隔离功能。关于会话隔离的具体实现方法，我们将在后续单独撰写一篇详细的教程文章进行说明。

界面配置

这个页面大部分的内容都是可以修改的

用户信息

参数	数据类型	是否必选	描述
url	string	必选	用户头像的 URL 地址，必须是一个可公开访问的地址。
nickname	string	必选	用户的昵称。
id	string	必选	用户的 ID，也就是用户在你的网站或应用中的账号 ID。未指定 ID 时，Chat SDK 会根据用户使用的设备随机分配一个用户 ID。你可以在智能体的分析>消息链路页面查看不同用户 ID 的对话记录。

UI效果

属性	参数	数据类型	是否必选	描述
base	icon	string	可选	应用图标，必须是一个可访问的公开 URL 地址。如果不设置，则使用默认扣子图标。
	layout	string	可选	聊天框窗口的布局风格，支持设置为：mobile：移动端风格，聊天框窗口铺满移动设备全屏。pc：PC 端风格，聊天框窗口位于页面右下角。未设置此参数时，系统会自动识别设备，设置相应的布局风格。
	lang	string	可选	系统语言，例如工具提示信息的语言。en：（默认）英语zh-CN：中文
	zIndex	number	可选	开发者自行控制，用于调整聊天框的页面层级。
header	isShow	boolean	可选	是否展示顶部标题栏（不包括关闭按钮）。默认为 true，表示展示。
header	isNeedClose	boolean	可选	是否展示右上角的关闭页面按钮。默认为 true，表示展示。

悬浮球

参数	数据类型	是否必选	描述
isNeed	boolean	否	是否在页面右下角展示悬浮球。* true：（默认）展示悬浮球。 * false：不展示悬浮球。

底部文案

参数	数据类型	是否必选	描述
isShow	boolean	可选	是否展示底部文案模块。true：展示。此时需要通过 expressionText 和 linkvars 设置具体文案和超链接。false：不展示。expressionText 和 linkvars 设置不生效。
expressionText	string	可选	底部显示的文案信息。支持添加以下格式的内容：纯文本：直接输入文本信息。链接：通过双大括号（{{***}} ）设置链接。双大括号中的字段会被替换 linkvars中的内容替换掉。仅支持设置一个链接。
linkvars	Object	可选	底部文案中的链接文案与链接地址。替换规则：name与"{{***}}"中的字段保持对应关系，同时用 a 标签替换掉该文本，text为 a 标签的文案，link为跳转的链接地址。

聊天框

参数	数据类型	是否必选	描述
title	string	可选	聊天框的标题，若未配置，使用默认名称Coze Bot。
uploadable	boolean	可选	是否开启聊天框的上传能力。* true：（默认）聊天框支持上传文件。选择此选项时，应确认模型具备处理文件或图片的能力，例如使用的是多模态模型，或添加了多模态插件。 * false：聊天框不支持上传文件。
el	Element	可选	设置聊天框放置位置的容器（Element）。* 开发者应自行设置聊天框高度、宽度，聊天框会占满整个元素空间。 * Chat SDK 会自动控制聊天框的显示隐藏，但是对于宿主的 element 元素不会做控制，开发者按需在 onHide、onShow 回调时机中来控制宿主元素的显示隐藏。
width	number	可选	PC 端窗口的宽度，单位为 px，默认为 460。建议综合考虑各种尺寸的屏幕，设置一个合适的宽度。此配置仅在 PC 端且未设置 el 参数时生效。