免费为您的网页创建在线客服,扣子(COZE) WEB SDK图文使用教程

news/2025/3/16 10:07:59/文章来源:https://www.cnblogs.com/tommywow/p/18343593

🧙‍♂️ 大家好,我是斜杠君,手把手教你搭建扣子AI应用

📜 我的教程《AI应用开发系列教程之扣子(Coze)实战教程》上线了,完全免费学习。

image

最近,扣子(COZE) 的 Web SDK 正式上线了。有同学问"Web SDK"如何使用?今天,斜杠君就带大家学习COZE 「Web SDK」的使用方法。

一、 什么是扣子 Web SDK

扣子 Web SDK是一个 JavaScript 库,您可以使用它将 Bot 集成到您的 Web 应用程序中。集成后,Bot 的终端用户可从网页与 Bot 对话。

二、扣子 Web SDK 使用

我们用一个例子来演示一下web SDK的功能。

> 创建Bot

我们先创建一个叫做**「扣子小助手」**的应用。这个应用的作用是:当网页上有人咨询相关扣子的问题时,扣子小助手会解答用户的问题,就是一个在线客服。

> 创建知识库

为「扣子小助手」创建一个的知识库,用来让小助手从知识库中获取数据。

这里,我把我的网站上的COZE教程内容录入到知识库。

> 把知识库添加到Bot

创建知识库的方法我们在之前的文章中讲过。如果不会的同学关注斜杠君的公众号,为你发送免费教程。

> 编排人设与回复逻辑

> 调试Bot

接下来测试一下,可以看到,调用知识库没问题,回答内容还不错。

这样一个简单的「COZE小助手」就创建好了。

接下来就是本节要讲的重点内容了。

三、发布为 Web SDK

把Bot发布为Web SDK。

点击「发布」按钮。

这里选择Web SDK。

这里注意,要点击「安装」查看JS代码。

代码是这样的,点击「复制」按钮。

解释一下:上面的内容是一段JS代码,只要我们把这段代码放到我们网站的前端页面上,就可把「COZE小助手」Bot调用出来了。

四、添加代码到网站

把这段JS代码放到网站上有多种方式,我这里说下最常用的两种:

  1. 一般情况下,大部分网站现在用的都是内容管理系统,不同的系统加代码的方式不一样。我们只需要在自己的后台,找到对应加代码的地方,粘贴上就可以了。

  2. 如果你的网站是静态网页,需要使用FTP工具连接到服务器,找到对应的静态文件,然后把代码粘贴到对应的文件上,也是可以的。

这里以我的网站为例,把代码粘贴到我网站的后台。

这里是按照我的网站添加方式,把JS加入到了网站里。

五、查看效果

可以发现首页多了一个扣子的图标。

点击这个图标,就可以调用出聊天窗口了。

我们来问「COZE小助手」一个问题,看一看效果。

怎么样,效果还不错吧 ~

好了,关于扣子 Web SDK 的使用就和大家分享到这里,如果大家想在自己的网站上也安装一个聊天的机器人,那就快动手试试吧 ~

请关注我,我是斜杠君,持续和大家分享AI应用干货知识。我的《AI应用开发系列教程之扣子(Coze)实战教程》上线了,关注我获取完整版教程,完全免费学习。

image

精选推荐:

「智能体+RPA」AI自动化创作解决方案,案例演示「COZE+影刀RPA小红书发布助手」

最新扣子(Coze)实战案例:扣子卡片的制作及使用,完全免费教程

扣子工作流实战案例教程,手把手教你搭建一个图书管理工作流

最新扣子(Coze)实战案例:图像流工具节点示例详解

最新扣子(Coze)实战教程:如何创建扣子插件,完全免费,快来学习吧~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/778212.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Mysql的length函数,char_length函数与字符,字节的区别

在存储中,1个英文单词或1个英文字符为1个1字节,1个中文或1个中文字符为3个字节在Mysql5.0之前,VARCHAR(20)中的20表示20个字节,英文可以存储20个,但中文只能存储6个在Mysql5.0之后,varchar(20)中的20表示20个字符,不管中文还是英文都可以存储20个length()函数是查找字节…

技术的八荣八耻

1. 以接口兼容为荣,以接口裸奔为耻以接口兼容为荣,怎么理解呢?很多bug都是因为修改了对外旧接口,但是却不做兼容导致的。关键这个问题多数是比较严重的,可能直接导致系统发版失败的。新手程序员很容易犯这个错误。所以我们修改老接口的时候,一般要做好兼容。如果你的需求…

解决windows报错:该文件没有与之关联的应用来执行该操作

报错截图:解决方案 1、新建txt文件2、复制内容到txt文件 taskkill /f /im explorer.exe reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Shell Icons" /v 29 /d "C:\Windows\system32\imageres.dll,154" /t reg_sz /f …

tomcat10 springboot项目部署成功但springboot没有启动日志问题

问题描述项目在tomcat8可以启动成功,请求也可以正常处理,在tomcat10上只有部署成功信息比如: deployWAR Deployment of web application archive [/data1/WWW/webapps/XXX.war] has finished in [127] ms, 但是没有springboot启动的信息。 该问题 不属于springboot打包为war包…

Centos7 安装 Imc

centos 7 安装 imc 注意:安装的时候必须选择图形化安装。即安装系统的时候,“软件选择”那块选择“带 GUI 的服务器”。关闭 selinux 和 防火墙 systemctl stop firewalld systemctl disable firewalld setenforce 0 sed -i "s/^SELINUX=enforcing/SELINUX=disabled/g&q…

USB协议基础篇

初次接触USB的同学,可能会被里面各种名词给搞晕,下面就来梳理一下这些知识,希望能帮助大家理解USB。一,从最常见的名词说起 1.1 什么是USB 这个我就不多解释了,直译就是通用串行总线。再不明白的就百度。 1.2 USB协议版本USB 1.0/1.1(low/full speed),传输速率最大为12Mb…

【YashanDB数据库】statement级别的触发器在jdbc接口调用executeBatch时被多次触发

问题现象 某客户使用jdbc接口向yashandb的表A插入数据。 表A上有一个语句级触发器,其内容为在触发时执行alter sequence操作;另外还有一个insert时的行级触发器,其内容为将每行的部分列赋给新值,这些新值要么来自sequence.nextval,要么来自于current_timestamp。 客户向表…

Redis分布式锁防止缓存击穿

一、Nuget引入 StackExchange.Redis、DistributedLock.Redis依赖 二、使用 StackExchange.Redis 对redis操作做简单封装public class RedisHelper { private static ConnectionMultiplexer _redis; private static string _connectionString;// 静态构造函数,确保在程序启动时…

新西兰 WHV 打工度假签证 All In One

新西兰 WHV 打工度假签证 All In One New Zealand WHV (Working Holiday Visas)新西兰 WHV 打工度假签证 All In OneNew Zealand WHV (Working Holiday Visas)打工度假常见问题答疑我们为你整理一些关于新西兰打工度假签证的常见问题及解答,希望能够帮助准备中的你。我该如何申…

词云图大师(WordCloudMaster)上线Web端!

我们非常激动地宣布,词云图大师(WordCloudMaster)现已正式上线Web端!这一全新版本为用户带来了更多的便捷和功能,让创建和分享词云变得更加轻松。无论是企业、教育机构还是个人用户,都可以通过Web端实现快速生成和定制属于自己的词云图。 https://studio.wordcloudmaster…

图表全能王(ChartStudio) 上架VisionPro!

图表全能王(ChartStudio) - 终极图表制作工具!支持条形图、折线图、面积图、柱形图、条形图、饼图、玫瑰图、雷达图、牛肉图、风琴图、旭日图、桑基图等图表。 https://apps.apple.com/app/chartstudio-data-analysis/id6474099675 https://apps.apple.com/cn/app/%E5%9B%BE%E…

H5页面能否获取手机的ip

在HTML5中,出于安全和隐私的考虑,浏览器不允许网页直接访问设备的本地IP地址。不过,可以通过一些方法间接获取到用户的公网IP地址,但这些方法通常依赖于服务器端的配合。 以下是几种获取用户公网IP地址的方法: 1. 使用WebRTC WebRTC(Web Real-Time Communications)提供了…