> ## Documentation Index
> Fetch the complete documentation index at: https://docs.coze.cn/llms.txt
> Use this file to discover all available pages before exploring further.
扣子 Chat SDK是一个 JavaScript 库，您可以使用它将智能体集成到您的 Web 应用程序中。集成后，用户可从网页与智能体对话。
:::notice 注意
1.0.0-beta.4 版本之前的 Chat SDK 为历史版本，开发者无需鉴权即可集成 SDK。历史版本 Chat SDK 仅提供基础的对话能力，安全性及扩展性较低，后续将不再维护和更新。推荐你使用最新版本的 Chat SDK [安装并使用 Chat SDK](/developer_guides/install_web_sdk)，体验更安全、更友好的智能对话服务。
:::
# 前提条件 {#255a8caa}
已经在扣子平台创建了智能体。
# 安装 SDK {#48857df1}
按照以下步骤通过将 JavaScript 库添加到您的 Web 应用程序来安装 SDK。
1. 登录[扣子](https://www.coze.com/)平台。
2. 查找要部署为 Web 服务的目标智能体。
3. 在**编排**页面，复制并保存当前页面 URL 的最后一个字符串。
这个是智能体id，将在以后的配置中使用。
4. 点击**发布**。
5. 在**发布**页面，选择 Chat SDK **** 选择并单击**发布。**
发布 SDK 后才能在新的发布页面选择安装 SDK。
6. 回到智能体的编排页面，再次点击**发布**，进入**发布**页面。
7. 在**发布**页面，点击**安装**。
页面将展示智能体的安装代码。直接将代码粘贴到网页的 区域中即可。你也可以按需添加各种属性配置，支持属性可参考[初始化 SDK ](/developer_guides/web_sdk#5fd8c8c3)。
:::tip 说明
**{{version}}** 部分为 Chat SDK 的版本号，例如 `0.1.0-beta.5`。
:::
安装代码示例如下：
```HTML
```
# 初始化 SDK {#5fd8c8c3}
安装 Chat SDK 后，您现在可以初始化智能体客户端。将以下代码添加到您要初始化智能体客户端的页面中。
```HTML
```
options 参数包含 config 和 componentProps 两个属性，详细说明可参见下表。
| | | | | | \
|**属性** |**参数** |**是否必选** |**数据类型** |**描述** |
|---|---|---|---|---|
| | | | | | \
| config |bot_id |必选 |string |智能体ID。 |\
| | | | |进入智能体的 开发页面，开发页面 URL 中 bot 参数后的数字就是智能体ID。例如`https://www.coze.cn/space/341****/bot/73428668*****`，智能体ID 为`73428668*****`。 |\
| | | | |:::tip 说明 |\
| | | | |确保该智能体已经发布为 Chat SDK。 |\
| | | | |::: |
| | | | | | \
|componentProps |title |可选 |string |智能体名字，如果没有配置，使用默认名：扣子 Bot。 |
|^^| | | | | \
| |icon |可选 |string |智能体的显示图标，如果不设置，则使用默认扣子图标。 |
|^^| | | | | \
| |lang |可选 |string |\
| | | | |智能体的系统语言，例如智能体的工具提示。 |\
| | | | | |\
| | | | |* en：（默认）英语 |\
| | | | |* zh-CN：中文 |\
| | | | | |\
| | | | | |
|^^| | | | | \
| |layout |\
| | |可选 |string |智能体窗口的布局风格，支持设置为： |\
| | | | | |\
| | | | |* mobile：移动端风格。 |\
| | | | |* pc：PC 端风格。 |\
| | | | | |\
| | | | |未设置此参数时，系统会自动识别设备，设置相应的布局风格。 |
|^^| | | | | \
| |width |可选 |number |PC 端智能体窗口的宽度，单位为 px，默认为 460。 |\
| | | | |建议综合考虑各种尺寸的屏幕，设置一个合适的宽度。 |\
| | | | |仅在 layout = pc 时生效。 |
# 销毁 SDK 客户端 {#8004770a}
您可以添加一个 destroy 方法销毁智能体客户端。
```HTML
```
# **解绑智能体** {#029242fe}
如果你不需要智能体继续以 web 服务方式使用，在发布页面，点击**解绑**按钮。
:::tip 说明
一旦**解绑**，智能体就无法通过集成的 Web 应用程序使用。 如果您想恢复 Web 应用程序的访问，需要再次将智能体发布为 Chat SDK。
:::
# 示例 {#16f0e22b}
以下是一段完整的 Chat SDK 的代码示例。
```HTML
Hello Bot
//{{version}} 为 Chat SDK 的版本号，例如 0.1.0-beta.5。你可以在发布页面的安装代码中查看最新版本的version
```
在本地创建一个HTML文件，将上述代码复制进文件后，本地运行的效果如下所示。
:::tip 说明
注意将 bot_id 替换为已经发布为 Chat SDK 的智能体的 ID，{{version}} 替换为**发布**页面**安装**代码中的版本号。
:::
其中：
* 图标 1 是 **icon** 参数值。
* 图标 2 是 **title** 参数值。
* 图标 3 是 **lang** 参数控制的语言配置。
::::cols
@col 34
@col 65
::::