更新项目代码:新增彩种模块、组件优化、管理后台功能完善

This commit is contained in:
lihanqi
2026-02-13 17:43:41 +08:00
parent d395295aa0
commit 3d7358079a
146 changed files with 48171 additions and 8804 deletions

View File

@@ -1,715 +1,79 @@
配置流程
步骤一:发布智能体或 AI 应用
在智能体或 AI 应用的发布页面,选择 Chat SDK并单击发布。发布的详细流程可参考
发布应用为 Chat SDK
发布智能体到 Chat SDK
步骤二:获取安装代码
进入发布页面复制 SDK 安装代码。
步骤三:安装 SDK
你可以直接在页面中通过 script 标签的形式加载 Chat SDK 的 js 代码,将步骤二中复制好的安装代码粘贴到网页的 <body> 区域中即可。
步骤二中复制好的安装代码示例如下:
示例代码中的版本号 1.2.0-beta.15 为示例,请以 Chat SDK 最新的版本号为准版本信息请参见Chat SDK 发布历史。
步骤四:配置聊天框
安装 Chat SDK 后,您现在可以初始化客户端。在页面中通过调用 CozeWebSDK.WebChatClient 来生成聊天框,当前页面中聊天框包括 PC 和移动端两种布局样式。在 PC 端中,聊天框位于页面右下角,移动端聊天框会铺满全屏。
智能体配置
调用 CozeWebSDK.WebChatClient 时,你需要配置以下参数:
config必选参数表示智能体的配置信息。
智能体需要设置的参数如下:
参数
是否必选
数据类型
描述
type
必选
String
Chat SDK 调用的对象。 在调用智能体时,该参数保持默认值 bot。
botId
必选
String
智能体的 ID。在智能体编排页面的 URL 中,查看 bot 关键词之后的字符串就是智能体 ID。例如https://www.coze.cn/space/341****/bot/73428668*****,智能体 ID 为 73428668*****。
isIframe
可选
Boolean
是否使用 iframe方式来打开聊天框默认为 false。
true使用 iframe 打开聊天框。
false推荐非 iframe 方式打开聊天框。通过该方式可以规避小程序中 webview 的域名限制。
Chat SDK 1.2.0-beta.3 及以上版本支持该参数。
botInfo.parameters
可选
Map[String, Any]
给智能体中的自定义参数赋值并传给对话流。
如果在对话流的开始节点设置了自定义输入参数,你可以通过 parameters 参数指定自定义参数的名称和值ChatSDK 会将自定义参数的值传递给对话流。具体用法和示例代码可参考为自定义参数赋值。
仅单 Agent对话流模式的智能体支持该配置。
auth表示鉴权方式。当未配置此参数时表示不鉴权。为了账号安全建议配置鉴权请将 auth.type 设置为 token在 token 参数中指定相应的访问密钥,并通过 onRefreshToken 监听获取新的密钥,当 token 中设置的访问密钥失效时Chat SDK 能够自动重新获取新的密钥。调试场景可以直接使用准备工作中添加的访问密钥,快速体验 Chat SDK 的效果;正式上线时建议通过 SAT 或 OAuth 实现鉴权逻辑,并将获取的 OAuth 访问密钥填写在此处。
示例如下:
const cozeWebSDK = new CozeWebSDK.WebChatClient({
config: {
// 智能体 ID
botId: '740849137970326****',
isIframe: false,
// 给自定义参数赋值并传给对话流
botInfo: {
parameters: {
user_name: 'John'
}
}
},
auth: {
// Authentication methods, the default type is 'unauth', which means no authentication is required; it is recommended to set it to 'token', indicating authentication through PAT (Personal Access Token) or OAuth
type: 'token',
// When the type is set to 'token', it is necessary to configure a PAT (Personal Access Token) or OAuth access token for authentication.
token: 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
// When the access token expires, use a new token and set it as needed.
onRefreshToken: () => 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
}
});
《精彩猪手》会员服务协议
如果要实现不同业务侧用户的会话隔离,即每个用户只能看到自己和智能体的对话历史,你需要将鉴权方式配置为 OAuth JWT 鉴权,通过 session_name 参数实现会话隔离,具体请参见如何实现会话隔离。
欢迎使用《精彩猪手》数据服务!
《精彩猪手》是一款彩票数据姿态逻辑分析推测工具,是各位会员朋友的超级数据助理。在开始使用我们的服务之前,请会员仔细阅读并充分理解本《会员服务协议》(以下简称 “本协议”)的全部内容。
本协议是会员与我们(西安溢彩数智科技有限公司)之间关于使用本服务的法律协议。一旦会员使用本服务,即表示会员已同意接受本协议的约束。如果会员不同意本协议的任何条款,请不要使用本服务。
一、定义
1.本服务:指我们通过网站、应用程序或其他相关平台向会员提供的《精彩猪手》数据服务,包括但不限于彩票开奖信息查询、姿态逻辑数据分析报告、个性化推导推测辅助,以及会员行为统计、经验技巧交流等。
2.会员:指承认本协议,接受本服务的自然人。具体包括一般会员和付费会员。
3.个人信息:指以电子或者其他方式记录的与已识别或者可识别的自然人有关的各种信息,不包括匿名化处理后的信息。
4.知识产权:包括但不限于著作权、专利权、商标权、商业秘密等。
二、服务内容及门槛
1.我们将尽力为会员提供稳定、高效的服务。服务内容包括但不限于:
1.1既定彩票开奖信息查询浏览;
1.2既定彩票开奖数据姿态逻辑分析及报告;
1.3按期次更新的号球动态数据,以及通过“本期”已出的开奖号球,进行“下期”开奖号球的个性化推测逻辑辅助;
1.4根据首球与随球的关联线索,启发复式/胆拖的投注参考;
1.5推测行为统计、分析、备份;
1.6进行规律总结、技巧探索、经验交流。
2.我们会根据实际情况对服务内容进行调整、更新。如有重大变更,我们将通过企业公众号、企业微信、短信等方式通知会员,需要会员及时接收。如会员在服务内容发生变更后继续使用本服务,视为会员接受变更后的协议内容。
3.会员理解并同意,使用本服务可能需要会员具备相应的设备、软件、网络环境和一定的专业知识,相关费用由会员自行承担。
三、会员账号
1.会员可以通过免费注册的方式获取本服务账号。在注册过程中,会员需提供真实、准确、完整的信息,并确保信息的及时更新。
2.会员应妥善保管账号及密码,不将账号出借、转让、赠予或共享给他人使用。因会员自身原因导致账号泄露或被他人使用的后果,由会员自行承担。
3.若会员发现账号存在异常或安全问题,请立即通知我们,我们将尽力协助处理,但对于非因我们原因导致的损失,我们不承担责任。
4.会员在使用账号过程中应遵守法律法规及本协议约定,不得利用账号从事违法、违规,或损害他人权益的行为,否则我们有权暂停或终止会员的账号使用,由此造成的损失由会员自行承担。
四、会员权利与义务
1.权利
1.1有权在遵守本协议的前提下,按照我们提供的方式使用服务。
1.2对我们提供的服务质量有权提出合理的意见和建议。
2.义务
2.1遵守国家法律法规及互联网相关规定,不得利用本服务从事违法犯罪活动。
2.2不得干扰、破坏本服务的正常运行,不得对服务进行反向工程、反编译、反汇编等行为。
2.3不得发布、传播任何侵犯他人知识产权、隐私或其他合法权益的信息。
2.4不得恶意注册账号、发送垃圾信息或进行其他滥用服务的行为。
2.5如因会员的行为导致我们或第三方遭受损失,责任方会员应承担相应的赔偿责任。
五、隐私政策
1.我们十分重视对会员个人信息保护,将谨慎收集、安全存储、妥善使用会员的个人信息。
2.会员同意我们为提供服务、改进服务,包括遵守法律法规的需要,对会员的个人信息进行合理的调用,过程中我们将采取合理措施确保信息安全。
六、知识产权
我们对本服务及相关内容(包括但不限于软件、数据、文字、图片、音频、视频等)享有知识产权。未经我们书面许可,会员不得擅自复制、改编,或创造基于本服务的衍生品。
扣子应用配置
调用 CozeWebSDK.WebChatClient 时,你需要配置以下参数:
config必选参数表示应用的配置信息
参数
是否必选
数据类型
描述
type
必选
String
Chat SDK 调用的对象。 集成扣子应用时,应设置为 app表示通过 Chat SDK 调用扣子应用。
isIframe
非必选
Boolean
是否使用 iframe方式来打开聊天框默认为 true
true使用 iframe 打开聊天框
false推荐非 iframe 方式打开聊天框。通过该方式可以规避小程序中 webview 的域名限制。
Chat SDK 1.2.0-beta.3 及以上版本支持该参数
七、责任限制与免责
1.本服务所提供的各项数据分析报告,均为根据彩票历史数据、统计学、数学和数据科学原理,通过计算机技术进行建模分析而得出。我们仅对数据的及时性、客观性承担责任,但对任何经过会员主观干预之后而产生的行为结果,无法承担相应的后果。
2.会员应当理解并知晓,彩票本身就是概率游戏,彩票开奖也是纯粹的随机事件。因此,本服务仅具备参考和辅助功效,会员必须对自己的判断和选择结果承担最终责任
3.我们将尽力确保服务的正常运行,但由于互联网的复杂性和不确定性,可能会出现服务中断、延迟、错误等情况。对于因不可抗力、技术故障、网络攻击等不可预见、不可避免的原因导致的服务问题,我们不承担责任。
4.我们对会员通过本服务获取的第三方信息的准确性、完整性、可靠性不承担保证责任,会员应自行判断并承担使用风险。
5.在任何情况下,我们对会员因使用本服务而产生的直接、间接、偶然、特殊或后果性损失(包括但不限于数据丢失、业务中断、收入和利润损失等),无论基于合同、侵权或其他理论,均不承担超过会员实际支付的服务费用的赔偿责任。
八、收费及其规则
1.本服务采用会员制运营模式。所有会员分为普通会员与VIP会员两种类型。
2.本服务对普通会员仅提供一般的基础数据服务。
3.本服务对VIP会员在提供一般基础数据服务的基础上还提供个性化的智推、精推特色辅助服务。
4.本服务对VIP会员实行付费服务。付费形式分为包月付费和包年付费两种。
5.包月付费每月10元不足一个月时按一个月计算。
6.包年付费每年100元。若因会员原因中途提出终止协议需要发生退款时所退款项均按包月付费标准进行折算。
7.出现业务退款情形时,所退款项只限原路退回付款账号。
8.所有会员在服务有效期内使用本服务额定内容的时段和频次均不受限
9.会员可以根据自己的实际需要随时选择成为VIP会员
九、协议变更与终止
1.我们有权根据法律法规变化、业务发展需要等对本协议进行变更。变更后的协议将在相关平台以显著方式公布,自公布之日起生效,公布后即视为已通知会员。若会员在协议变更后继续使用服务,视为会员接受变更后的协议;若会员不同意变更,有权停止使用本服务
2.出现以下情况下,我们有权终止本协议及停止会员继续使用服务:
2.1会员严重违反本协议约定。
2.2法律法规要求我们终止服务。
2.3因不可抗力等不可预见、不可避免的原因导致服务无法继续提供。
2.4协议终止后,我们有权根据法律法规要求,对会员的相关信息进行封存处理:
十、争议解决
1.本协议的签订、履行、解释及争议解决均适用 《中华人民共和国民法典》。
2.如双方在本协议履行过程中发生争议,应首先通过友好协商解决;协商不成的,任何一方均有权向有管辖权的人民法院提起诉讼。
十一、其他条款
1.本协议构成会员与我们之间关于本服务的完整协议。未经我们书面同意,会员不得转让本协议项下的任何权利、利益和义务。
2.本协议各条款的标题仅为方便阅读而设,不影响条款的具体含义及解释。
3.若本协议任何条款被认定为无效或不可执行,不影响其他条款的效力及执行。
4.我们未行使或执行本协议任何权利或条款,不构成对该权利或条款的放弃。
5.本协议自会员成功注册《精彩猪手》服务相关账号之日即刻生效。
6.任何有关本协议项下服务的问题,会员可通过本公司企业微信进行咨询。
appInfo
必选
String
扣子应用的详细信息。
确保该应用已经发布为 Chat SDK。
appInfo.appId
必选
String
AI 应用的 ID。 在扣子应用中打开工作流或对话流URL 中 project-ide 参数之后的字符串就是 appId。
appInfo.workflowId
必选
String
工作流或对话流的 ID。 在扣子应用中打开工作流或对话流URL 中 workflow 参数之后的字符串就是 workflowId。
appInfo.parameters
可选
Map[String, Any]
给应用中的自定义参数赋值并传给对话流。
如果在对话流的开始节点设置了自定义输入参数,你可以通过 parameters 参数指定自定义参数的名称和值ChatSDK 会将自定义参数的值传递给对话流。具体用法和示例代码可参考为自定义参数赋值。
auth表示鉴权方式。当未配置此参数时表示不鉴权。为了账号安全建议配置鉴权请将 auth.type 设置为 token在 token 参数中指定相应的访问密钥,并通过 onRefreshToken 监听获取新的密钥,当 token 中设置的访问密钥失效时Chat SDK 能够自动重新获取新的密钥。调试场景可以直接使用准备工作中添加的访问密钥,快速体验 Chat SDK 的效果;正式上线时建议通过 SAT 或 OAuth 实现鉴权逻辑,并将获取的 OAuth 访问密钥填写在此处。
示例如下:
const cozeWebSDK = new CozeWebSDK.WebChatClient({
config: {
type: 'app', // 应用类型
isIframe: false, // 是否在iframe中运行
appInfo: { // 应用配置信息
appId: '744189632066042****',
workflowId: '744229754050396****',
parameters: { // 给自定义参数赋值并传给对话流
user_name: 'John'
}
}
},
auth: {
// Authentication methods, the default type is 'unauth', which means no authentication is required; it is recommended to set it to 'token', indicating authentication through PAT (Personal Access Token) or OAuth
type: 'token',
// When the type is set to 'token', it is necessary to configure a PAT (Personal Access Token) or OAuth access token for authentication.
token: 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
// When the access token expires, use a new token and set it as needed.
onRefreshToken: () => 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
}
});
步骤五:配置属性
扣子 Chat SDK 支持多种属性配置,开发者可以按需调整对话框的多种展示效果,例如展示的用户信息、对话框 UI 效果、悬浮球展示、底部文案等。
你可以在 WebChatClient 方法中添加各种属性,实现对应的效果。目前支持的属性如下:
功能
属性
说明
智能体配置
config
指定对话的智能体或扣子应用,支持设置是否使用 iframe方式来打开聊天框
鉴权
auth
指定鉴权方式。默认不鉴权,支持通过 PAT 、SAT 或 OAuth 鉴权。
用户信息
userInfo
用于设置对话框中的显示用户信息,包括对话框中的用户头像、用户昵称、用户的业务 ID。
UI 效果
ui.base
用于添加聊天窗口的整体 UI 效果,包括应用图标、页面展示模式(移动端或 PC 端)、系统语言属性、聊天框页面层级。
悬浮球
ui.asstBtn
控制是否在页面右下角展示悬浮球。默认展示,用户点击悬浮球后将弹出聊天窗口。
底部文案
ui.footer
隐藏底部文案或改为其他文案,支持在文案中设置超链接。
顶部标题栏配置
ui.header
用于控制是否展示顶部的标题栏和关闭按钮,默认展示。
聊天框
ui.chatBot
用于控制聊天框的 UI 和基础能力,包括:
标题、大小、位置等基本属性
限制在聊天框中上传文件、语音输入、显示工具调用信息
步骤六:销毁客户端
你可以添加一个 destroy 方法销毁客户端。
<script>
const client = new CozeWebSDK.WebChatClient(options);
client.destroy();
</script>
属性配置
智能体或应用配置
config 参数用于指定智能体。智能体需要设置的参数如下:
参数
是否必选
数据类型
描述
bot_id
必选
String
智能体 ID。
进入智能体的开发页面,开发页面 URL 中 bot 参数后的数字就是智能体ID。例如https://www.coze.cn/space/341****/bot/73428668*****智能体ID 为 73428668*****。
确保该智能体已经发布为 Chat SDK。
isIframe
非必选
Boolean
是否使用 iframe方式来打开聊天框默认为 true。
true使用 iframe 打开聊天框。
false推荐非 iframe 方式打开聊天框。通过该方式可以规避小程序中 webview 的域名限制。
Chat SDK 1.2.0-beta.3 及以上版本支持该参数。
扣子应用需要设置的参数如下:
参数
是否必选
数据类型
描述
type
必选
String
Chat SDK 调用的对象。
默认为 bot表示通过 Chat SDK 调用智能体。
集成扣子应用时,应设置为 app表示通过 Chat SDK 调用扣子应用。
appInfo
必选
String
扣子应用的详细信息。
确保该应用已经发布为 Chat SDK。
appInfo.appId
必选
String
AI 应用 ID。 在扣子应用中打开工作流或对话流URL 中 project-ide 参数之后的字符串是 appId。
appInfo.workflowId
必选
String
工作流或对话流 ID。 在扣子应用中打开工作流或对话流URL 中 workflow 参数之后的字符串是 workflowId。
isIframe
非必选
Boolean
是否使用 iframe方式来打开聊天框默认为 true。
true使用 iframe 打开聊天框。
false推荐非 iframe 方式打开聊天框。通过该方式可以规避小程序中 webview 的域名限制。
Chat SDK 1.2.0-beta.3 及以上版本支持该参数。
鉴权
auth 属性用于配置鉴权方式。不添加此参数时表示不鉴权,也可以通过此参数指定使用 PAT 或 OAuth 鉴权。配置说明如下:
参数
数据类型
是否必选
描述
type
String
必选
可指定为 token通过访问密钥鉴权支持的访问密钥包括 PAT、SAT 和 OAuth 访问密钥。关于访问密钥的详细说明可参考鉴权方式概述。
token
String
type为 token 时必填
type 为 token 时,指定使用的访问密钥。调试场景可以直接使用准备工作中添加的访问密钥,快速体验 Chat SDK 的效果;正式上线时建议通过 SAT 或 OAuth 实现鉴权逻辑,并将获取的 OAuth 访问密钥填写在此处。
onRefreshToken
Function
type为 token 时必填
token 中设置的访问密钥失效时,使用新密钥。建议按需设置。
以使用 PAT 鉴权为例,配置鉴权的方式如下:
const cozeWebSDK = new CozeWebSDK.WebChatClient({
config: {
botId: '740849137970326****',
isIframe: false,
},
auth: {
type: 'token',
token: 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
onRefreshToken: async () => 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
}
});
以使用 OAuth 鉴权为例,配置鉴权的方式如下:
const cozeWebSDK = new CozeWebSDK.WebChatClient({
config: {
botId: '740849137970326****',
isIframe: false,
},
auth: {
type: 'token',
token: 'czs_RQOhsc7vmUzK4bNgb7hn4wqOgRBYAO6xvpFHNbnl6RiQJX3cSXSguIhFDzgy****',
onRefreshToken: async () => 'czs_RQOhsc7vmUzK4bNgb7hn4wqOgRBYAO6xvpFHNbnl6RiQJX3cSXSguIhFDzgy****',
}
});
用户信息
userInfo 参数用于设置对话框中的显示用户信息,包括对话框中的用户头像和账号。同时,此处指定的用户 ID 也会通过发起对话 API 传递给扣子服务端。
参数
数据类型
是否必选
描述
url
String
必选
用户头像的 URL 地址,必须是一个可公开访问的地址。
nickname
String
必选
用户的昵称。
id
String
可选
用户的 ID也就是用户在你的网站或应用中的账号 ID。未指定 ID 时Chat SDK 会根据用户使用的设备随机分配一个用户 ID。
你可以在智能体的分析 > 消息链路页面查看不同用户 ID 的对话记录。详细说明可参考消息日志。
配置示例如下:
const cozeWebSDK = new CozeWebSDK.WebChatClient({
config: {
botId: '740849137970326****',
isIframe: false,
},
auth: {
type: 'token',
token: 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
onRefreshToken: async () => 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
},
// 用户信息
userInfo: {
id: '12345',
url: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
nickname: 'UserA',
},
});
UI 效果
ui.base 参数用于添加聊天窗口的整体 UI 效果,包括应用图标、页面展示模式、语言属性等。
参数
数据类型
是否必选
描述
icon
String
可选
应用图标,必须是一个可访问的公开 URL 地址。如果不设置,则使用默认扣子图标。
扣子企业版支持将 icon 修改为自定义的品牌 Logo扣子团队版和个人版不支持自定义品牌。
layout
String
可选
聊天框窗口的布局风格,支持设置为:
mobile移动端风格聊天框窗口铺满移动设备全屏。
pcPC 端风格,聊天框窗口位于页面右下角。
未设置此参数时,系统会自动识别设备,设置相应的布局风格。
lang
String
可选
系统语言,例如工具提示信息的语言。
en默认英语
zh-CN中文
zIndex
number
可选
开发者自行控制用于调整聊天框的页面层级。详细信息可参考MDN-zIndex。
示例代码如下:
const cozeWebSDK = new CozeWebSDK.WebChatClient({
config: {
botId: '740849137970326****',
isIframe: false,
},
auth: {
type: 'token',
token: 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
onRefreshToken: async () => 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
},
userInfo: {
id: '123',
url: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
nickname: '3qweqweqwe',
},
ui: {
base: {
icon: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
layout: 'pc',
zIndex: 1000,
}
},
});
悬浮球
asstBtn 参数用于控制是否在页面右下角展示悬浮球。默认展示,用户点击悬浮球后将弹出聊天窗口。
若设置为不展示悬浮球,开发者需要通过以下方法控制聊天框的展示或隐藏效果。
显示聊天框cozeWebSDK.showChatBot()
隐藏聊天框cozeWebSDK.hideChatBot()
参数
数据类型
是否必选
描述
isNeed
boolean
是否在页面右下角展示悬浮球。
true默认展示悬浮球。
false不展示悬浮球。
以不展示悬浮球为例,示例代码如下:
const cozeWebSDK = new CozeWebSDK.WebChatClient({
config: {
botId: '740849137970326****',
isIframe: false,
},
auth: {
type: 'token',
token: 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
onRefreshToken: async () => 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
},
userInfo: {
id: '123',
url: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
nickname: '3qweqweqwe',
},
ui: {
base: {
icon: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
layout: 'pc',
zIndex: 1000,
},
asstBtn: {
isNeed: false,
},
},
});
不展示悬浮球时,你可以通过以下方式显示聊天框或隐藏聊天框。
<body>
<button onClick={() => {
cozeWebSDK.showChatBot();
}}>显示聊天框</button>
<button onClick={() => {
cozeWebSDK.hideChatBot();
}}>隐藏聊天框</button>
</body>
底部文案
聊天框底部会展示对话服务的提供方信息默认为Powered by coze. AI-generated content for reference only.。开发者通过 footer 参数隐藏此文案或改为其他文案,支持在文案中设置超链接。
底部文案默认展示效果如下:
footer 参数配置说明如下:
参数
数据类型
是否必选
描述
isShow
boolean
可选
是否展示底部文案模块。
true展示。此时需要通过 expressionText 和 linkvars 设置具体文案和超链接。
false不展示。expressionText 和 linkvars 设置不生效。
expressionText
String
可选
底部显示的文案信息。支持添加以下格式的内容:
纯文本:直接输入文本信息。
链接:通过双大括号({{***}} )设置链接。双大括号中的字段会被替换 linkvars中的内容替换掉。仅支持设置一个链接。
linkvars
Object
可选
底部文案中的链接文案与链接地址。
替换规则name与"{{***}}"中的字段保持对应关系,同时用 a 标签替换掉该文本text 为 a 标签的文案link 为跳转的链接地址。
配置示例如下:
const cozeWebSDK = new CozeWebSDK.WebChatClient({
config: {
botId: '740849137970326****',
isIframe: false,
},
auth: {
type: 'token',
token: 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
onRefreshToken: async () => 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
},
userInfo: {
id: '123',
url: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
nickname: '3qweqweqwe',
},
ui: {
base: {
icon: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
layout: 'pc',
zIndex: 1000,
},
asstBtn: {
isNeed: true,
},
footer: {
isShow: true,
expressionText: 'Powered by {{name}}&{{name1}}',
linkvars: {
name: {
text: 'A',
link: 'https://www.test1.com'
},
name1: {
text: 'B',
link: 'https://www.test2.com'
}
}
}
}
},
});
此配置的对应的展示效果如下:
顶部标题栏配置
聊天框顶部默认展示智能体名称、icon、及关闭按钮。展示效果类似如下
Chat SDK 1.1.0-beta.3 及以上版本支持该配置。
您可以通过 header 参数配置是否展示顶部标题栏和关闭按钮header 参数配置说明如下:
参数
数据类型
是否必选
描述
isShow
Boolean
可选
是否展示顶部标题栏,默认为 true。
true展示。
false不展示。
isNeedClose
String
可选
是否展示顶部的关闭按钮,默认为 true。
true展示。
false不展示。
配置示例如下:
const cozeWebSDK = new CozeWebSDK.WebChatClient({
config: {
botId: '740849137970326****',
isIframe: false,
},
auth: {
type: 'token',
token: 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
onRefreshToken: async () => 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGA*********',
},
userInfo: {
id: '123',
url: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
nickname: '3qweqweqwe',
},
ui: {
base: {
icon: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
layout: 'pc',
zIndex: 1000,
},
asstBtn: {
isNeed: true,
},
header: {
isShow: true,
isNeedClose: true,
},
},
});
聊天框
chatBot 参数用于控制聊天框的 UI 和基础能力,包括标题、大小、位置等基本属性,还可以指定是否支持在聊天框中上传文件。此参数同时提供多个回调方法,用于同步聊天框显示、隐藏等事件通知。
配置说明如下:
参数
数据类型
是否必选
描述
title
String
可选
聊天框的标题,若未配置,使用默认名称 Coze Bot。
uploadable
Boolean
可选
是否开启聊天框的上传能力。
true默认聊天框支持上传文件。选择此选项时应确认模型具备处理文件或图片的能力例如使用的是多模态模型或添加了多模态插件。
false聊天框不支持上传文件。
width
Number
可选
PC 端窗口的宽度,单位为 px默认为 460。
建议综合考虑各种尺寸的屏幕,设置一个合适的宽度。
此配置仅在 PC 端且未设置 el 参数时生效。
el
Element
可选
设置聊天框放置位置的容器Element
开发者应自行设置聊天框高度、宽度,聊天框会占满整个元素空间。
Chat SDK 会自动控制聊天框的显示隐藏,但是对于宿主的 element 元素不会做控制,开发者按需在 onHide、onShow 回调时机中来控制宿主元素的显示隐藏。
isNeedAudio
Boolean
可选
设置聊天框中是否允许语音输入。
true支持用户通过语音输入。
false仅支持打字输入不支持语音输入。
默认值:
非 Iframe 模式(聊天框集成在主页面中): 默认值为 true。
ifreme 模式(聊天框作为独立窗口嵌入主页面): 默认值为 false。
isNeedFunctionCallMessage
Boolean
可选
设置是否在聊天框中显示插件工具调用的信息。
true默认值聊天框中将显示调用的插件工具。
false聊天框中不显示插件工具调用的信息。
相关回调:
onHide当聊天框隐藏的时候会回调该方法。
onShow: 当聊天框显示的时候,会回调该方法。
onBeforeShow: 聊天框显示前调用,如果返回了 false则不会显示。支持异步函数。
onBeforeHide: 聊天框隐藏前调用,如果返回了 false则不会隐藏。支持异步函数。
在以下示例中,聊天框标题为 Kids' Playmate | Snowy并开启上传文件功能。
对应的代码示例如下:
const cozeWebSDK = new CozeWebSDK.WebChatClient({
config: {
botId: '740849137970326****',
isIframe: false,
},
auth: {
type: 'token',
token: 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
onRefreshToken: async () => 'pat_zxzSAzxawer234zASNElEglZxcmWJ5ouCcq12gsAAsqJGALlq7hcOqMcPFV3wEVDiqjrg****',
},
userInfo: {
id: '123',
url: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
nickname: '3qweqweqwe',
},
ui: {
base: {
icon: 'https://lf-coze-web-cdn.coze.cn/obj/coze-web-cn/obric/coze/favicon.1970.png',
layout: 'pc',
zIndex: 1000,
},
asstBtn: {
isNeed: true,
},
footer: {
isShow: true,
expressionText: 'Powered by {{name}}&{{name1}}', linkvars: {
name: {
text: 'A',
link: 'https://www.test1.com'
},
name1: {
text: 'B',
link: 'https://www.test2.com'
}
}
},
chatBot: {
title: "Kids' Playmate | Snowy",
uploadable: true,
width: 800,
el: undefined,
onHide: () => {
// todo...
},
onShow: () => {
// todo...
},
},
},
});
通过 chatbot 的 el 参数设置组件的示例代码如下:
相关操作
更新 SDK 版本
扣子 Chat SDK 将持续更新迭代,支持丰富的对话能力和展示效果。你可以在 Chat SDK 的 script 标签中指定 Chat SDK 的最新版本号,体验和使用最新的 Chat SDK 对话效果。
在以下代码中,将 {{version}} 部分替换为 Chat SDK 的最新版本号。你可以在Chat SDK 发布历史中查看最新版本号。
解绑 Chat SDK
如果不再需要通过 Chat SDK 使用 AI 应用,可以在发布页面点击解绑按钮。一旦解绑,智能体或应用就无法通过集成的 Web 应用程序使用。 如果您想恢复 Web 应用程序的访问,需要再次将智能体或应用发布为 Chat SDK。
示例
以下是一段完整的 Chat SDK 调用智能体的代码示例。
<!doctype html>
<html lang="en">
<head>
<style>
/* 自定义悬浮入口的位置 */
#position_demo {
position: absolute;
right: 10px;
bottom: 20px;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<div id="position_demo"></div>
<script src="https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.2.0-beta.8/libs/cn/index.js"></script>
<script>
const cozeWebSDK = new CozeWebSDK.WebChatClient({
config: {
// 智能体 ID
botId: '742477211246629****',
},
auth: {
//鉴权方式默认type 为unauth表示不鉴权建议设置为 token表示通过PAT或OAuth鉴权
type: 'token',
//type 为 token 时需要设置PAT或OAuth访问密钥
token: 'pat_82GrrdfNWPMnlcY58r98Rzqiev2s5NyrqCR8Ypbh5hOomzZN4ivb325PZAd****',
//访问密钥过期时,使用的新密钥,可以按需设置。
onRefreshToken: () => 'pat_82GrrdfNWPMnlcY58r98Rzqiev2s5NyrqCR8Ypbh5hOomzZN4ivb325PZAdZ****',
},ui:{
chatBot: {
title: "智能客服",
uploadable: true
}}
});
</script>
</body>
</html>
相关文档
西安溢彩数智科技有限公司
2025年12月31日