免费为您的网页创建在线客服，扣子(COZE) WEB SDK图文利用教程
大家好，我是斜杠君。本教程是《AI应用开发系列教程之扣子(Coze)实战教程》，如果想学习AI应用搭建，请关注我，获取免费教程。https://i-blog.csdnimg.cn/direct/b7a8d4da944148f0ad687dede7f5ddbd.png最近，扣子(COZE) 的 Web SDK 正式上线了。有同砚问"Web SDK"如何利用？本日，斜杠君就带大家学习COZE 「Web SDK」的利用方法。
一、 什么是扣子 Web SDK
扣子 Web SDK是一个 JavaScript 库，您可以利用它将 Bot 集成到您的 Web 应用程序中。集成后，Bot 的终端用户可从网页与 Bot 对话。
二、扣子 Web SDK 利用
我们用一个例子来演示一下web SDK的功能。
创建Bot我们先创建一个叫做「扣子小助手」的应用。这个应用的作用是：当网页上有人咨询相关扣子的题目时，扣子小助手会解答用户的题目，就是一个在线客服。
https://i-blog.csdnimg.cn/blog_migrate/1de3e5e23afd49d5b9424bba087f9915.png
创建知识库为「扣子小助手」创建一个的知识库，用来让小助手从知识库中获取数据。
https://i-blog.csdnimg.cn/blog_migrate/e44557424ed8ea1274ae37837af4a81e.png
这里，我把我的网站上的COZE教程内容录入到知识库。
https://i-blog.csdnimg.cn/blog_migrate/9d4466826a0a6a50507638e9c2ea45d3.png
把知识库添加到Bot创建知识库的方法我们在之前的文章中讲过。如果不会的同砚关注斜杠君的公众号，为你发送免费教程。
https://i-blog.csdnimg.cn/blog_migrate/0c0b5aa0bc2dfcdf193a52842c5aaf70.png
编排人设与复兴逻辑
https://i-blog.csdnimg.cn/blog_migrate/43a0d81dec1a9faaed378a41279d0640.png
调试Bot接下来测试一下，可以看到，调用知识库没题目，答复内容还不错。
https://i-blog.csdnimg.cn/blog_migrate/fd5b4d42247585a96ec5fc6de3d6f5e3.png
这样一个简单的「COZE小助手」就创建好了。
接下来就是本节要讲的重点内容了。
三、发布为 Web SDK
把Bot发布为Web SDK。
点击「发布」按钮。
https://i-blog.csdnimg.cn/blog_migrate/5ec91d4180990620d98ba6151d89bf3d.png
这里选择Web SDK。
https://i-blog.csdnimg.cn/blog_migrate/e4b8941d7f79d7994b67ea1859003e20.png
这里留意，要点击「安装」查看JS代码。
https://i-blog.csdnimg.cn/blog_migrate/b5857e4d271221f6e09b0bd07e64f9d2.png
代码是这样的，点击「复制」按钮。
https://i-blog.csdnimg.cn/blog_migrate/e5ae18ffde263ce70b6626e09dfbdf4c.png
解释一下：上面的内容是一段JS代码，只要我们把这段代码放到我们网站的前端页面上，就可把「COZE小助手」Bot调用出来了。
四、添加代码到网站
把这段JS代码放到网站上有多种方式，我这里说下最常用的两种：
1. 一样平常情况下，大部门网站现在用的都是内容管理体系，不同的体系加代码的方式不一样。我们只需要在自己的后台，找到对应加代码的地方，粘贴上就可以了。
2. 如果你的网站是静态网页，需要利用FTP工具连接到服务器，找到对应的静态文件，然后把代码粘贴到对应的文件上，也是可以的。
这里以我的网站为例，把代码粘贴到我网站的后台。
https://i-blog.csdnimg.cn/blog_migrate/9946f85f49947a42d1aceaf1fabb66c3.png
这里是按照我的网站添加方式，把JS参加到了网站里。
五、查看效果
可以发现首页多了一个扣子的图标。
https://i-blog.csdnimg.cn/blog_migrate/3becf364c1b8b85bfb4217bf26b0caed.png
点击这个图标，就可以调用出聊天窗口了。
我们来问「COZE小助手」一个题目，看一看效果。
https://i-blog.csdnimg.cn/blog_migrate/6a97a61cc56b7dc07328f4c6cf23b72c.png
怎么样，效果还不错吧 ~
好了，关于扣子 Web SDK 的利用就和大家分享到这里，如果大家想在自己的网站上也安装一个聊天的呆板人，那就快动手试试吧 ~
请关注我，我是斜杠君，连续和大家分享AI应用干货知识。本文是《AI应用开发系列教程之扣子(Coze)实战教程》中的内容，关注我获取完整版教程，完全免费学习。如果想学习Coze，参加斜杠君的免费交流群，备注「斜杠君」，邀请你进群，和大家一起讨论Coze的应用知识。
https://i-blog.csdnimg.cn/direct/8fe86255fd7940b28e82680c792ab349.png
精选推荐:
「智能体+RPA」AI自动化创作解决方案，案例演示「COZE+影刀RPA小红书发布助手」
最新扣子(Coze)实战案例：扣子卡片的制作及利用，完全免费教程
扣子工作流实战案例教程，手把手教你搭建一个图书管理工作流
最新扣子(Coze)实战案例：图像流工具节点示例详解
最新扣子(Coze)实战教程：如何创建扣子插件，完全免费，快来学习吧~
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]