# 安装并使用 Chat SDK
本文介绍如何安装并使用扣子 Chat SDK，开发者可以参考本文档在自己开发的网站或 App 中快速实现智能对话功能。适用于智能客服、答疑助手或企业内部的 IT 支持机器人等场景。
## 前置条件
### 浏览器兼容性
Chat SDK 的运行环境要求如下表所示。
| **浏览器** | **版本限制** |
| --- | --- |
| Chrome | 87.0 及以上 |
| Edge | 88.0 及以上 |
| Safari | 14.0 及以上 |
| Firefox | 78.0 及以上 |
### 获取访问密钥
访问密钥用于 Chat SDK 的身份认证与鉴权。根据使用场景选择合适的鉴权方式，各鉴权方式的区别请参见[鉴权方式概述](https://docs.coze.cn/api/open/docs/developer_guides/authentication)。
| **场景** | **推荐方案** | **说明** | **参考文档** |
| --- | --- | --- | --- |
| 开发调试 | 个人访问令牌（PAT） | 快速跑通 Chat SDK 的整体流程。 | [添加个人访问令牌](https://docs.coze.cn/api/open/docs/developer_guides/pat) |
| 生产环境 | 服务访问令牌（SAT） | 操作更简单，能够有效简化授权流程，适合需要长期稳定访问且无需进行会话隔离的场景。
1. 在智能体的编排页面，单击**发布**，进入**发布**页面。
2. 在**发布**页面，单击**安装**。
页面将展示安装代码，安装代码中默认使用最新版本的 Chat SDK 配置。
3. 复制此安装代码。
请妥善保存此代码用于步骤三。
1. 在扣子应用的编排页面右上角，单击发布下拉按钮查看指定版本的发布状态。
2. 确认 Chat SDK 发布成功后，单击**安装指引**。
3. 根据页面提示复制安装代码。此代码将在后续的配置中使用。
### 步骤三：安装 SDK
将步骤二中复制的安装代码粘贴到网页中，例如 标签内，通过 `script` 标签加载 Chat SDK 的 js 代码。
示例代码如下：
示例代码中的版本号 `1.2.0-beta.20 `为示例，请以 Chat SDK 最新的版本号为准，版本信息请参见[Chat SDK 发布历史](https://docs.coze.cn/api/open/docs/developer_guides/web_sdk_changelog)。
### 步骤四：初始化配置
通过调用 CozeWebSDK.WebChatClient 初始化客户端。当前页面中聊天框包括 PC 和移动端两种布局样式，在 PC 端中，聊天框位于页面右下角，移动端聊天框会铺满全屏。
#### 智能体配置
调用 CozeWebSDK.WebChatClient 时，你需要配置 `config`（智能体信息）和 `auth`（鉴权信息）。
* **config**：必选参数，表示智能体的配置信息。
调用智能体时，需要设置以下参数：
| **参数** | **是否必选** | **数据类型** | **描述** |
| --- | --- | --- | --- |
| type | 必选 | String | Chat SDK 调用的对象。 在调用智能体时，该参数保持默认值 **bot**。
```TypeScript
// 在WebChatClient参数中，添加ui.asstBtn配置
const cozeWebSDK = new CozeWebSDK.WebChatClient({
config: {
botId: '740849137970326****',
isIframe: false,
},
auth: {
type: 'token',
token: 'pat_zxzSAzxawer234zASNElEGALlq7hcOqMcPFV3wEVDiqjrg****',
onRefreshToken: async () => 'pat_zxzSAzxawer2OqMcPFV3wEVDiqjrg****',
},
ui: {
// 悬浮球配置
asstBtn: {
isNeed: true // 展示悬浮球
}
}
});
```
```TypeScript
// 在WebChatClient参数中，添加ui.asstBtn配置
const cozeWebSDK = new CozeWebSDK.WebChatClient({
config: {
botId: '740849137970326****',
isIframe: false,
},
auth: {
type: 'token',
token: 'pat_zxzSAzxawer234zASNElEGALlq7hcOqMcPFV3wEVDiqjrg****',
onRefreshToken: async () => 'pat_zxzSAzxawer2OqMcPFV3wEVDiqjrg****',
},
ui: {
// 悬浮球配置
asstBtn: {
isNeed: false // 隐藏悬浮球
}
}
});
```
隐藏悬浮球时，你可以通过以下方式显示聊天框或隐藏聊天框。
```HTML
{
cozeWebSDK.showChatBot();
}}>显示聊天框
{
cozeWebSDK.hideChatBot();
}}>隐藏聊天框
```
Chat SDK 悬浮球的位置默认在页面右下角，不支持移动，如果需要调整悬浮球的位置，你可以隐藏默认的悬浮球，自定义悬浮球的位置和样式，具体请参见[Chat SDK 悬浮球位置如何移动？](https://docs.coze.cn/api/open/docs/developer_guides/chat_sdk_faq#d5f79f31)。
### 底部文案
聊天框底部会展示对话服务的提供方信息，默认为`Powered by coze. AI-generated content for reference only.`。开发者通过 `ui.footer` 参数隐藏此文案或改为其他文案，支持在文案中设置超链接。
底部文案默认展示效果如下：
`footer` 参数配置说明如下：
| **参数** | **数据类型** | **是否必选** | **示例** | **描述** |
| --- | --- | --- | --- | --- |
| isShow | Boolean | 可选 | true | 是否展示底部文案模块。 A B ` |
配置示例如下：
```TypeScript
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: 'John',
},
// 配置聊天窗口的整体 UI 效果，包括应用图标、页面布局、语言属性等。
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 及关闭按钮。展示效果类似如下：
您可以通过 `ui.header` 参数配置是否展示顶部标题栏和关闭按钮，header 参数配置说明如下：
| **参数** | **数据类型** | **是否必选** | **描述** |
| --- | --- | --- | --- |
| isShow | Boolean | 可选 | 是否展示顶部标题栏，默认为 true。
```TypeScript
const chatBot = new CozeWebSDK.WebChatClient({
config: {
bot_id: '740849137970326****',
},
auth: {
type: 'token',
token: 'pat_zxzSASNElEglZxcmWJ5ouCcqeMtogsA1sqJGA4lq7hceqMc5FV3wEVDiqjrg****',
onRefreshToken: async () => 'pat_zxzSASNElEglZxcmWJ5ouCcqeMtogsA1sqJGA4lq7hceqMc5FV3wEVDiqjrg****',
},
ui: {
asstBtn: {
isNeed: false,
},
chatBot: {
el: document.getElementById('id1')
}
}
});
function onClick() {
chatBot.showChatBot();
}
```
### 消息评价
你可以在 `chatBot` 参数中配置是否允许用户对智能体的回答进行评价（点赞 / 点踩），默认禁用评价功能。
| **参数** | **数据类型** | **是否必选** | **描述** |
| --- | --- | --- | --- |
| **feedback** | Object | 可选 | 用于配置用户对智能体的回答进行评价（点赞 / 点踩）。 |
| **feedback.isNeedFeedback** | Boolean | 可选 | 聊天界面中是否显示用户反馈（点赞 / 点踩）按钮。
| **参数** | **数据类型** | **是否必选** | **描述** |
| --- | --- | --- | --- |
| isNeed | boolean | 可选
## 完整示例代码
以下是一段完整的 Chat SDK 调用智能体的代码示例。
```HTML
Hello World
```
## 相关文档
如果需要将不同业务侧用户的会话互相隔离开来，每个用户只能看到自己和智能体的对话历史，请参见[如何实现会话隔离](https://docs.coze.cn/api/open/docs/developer_guides/session_isolation)。