本文档共分为场景概述及对接步骤两部分。目录如下:
<1网站在线客服
主要应用于:以网上贸易为主的B2C电子商务性质的网站和网店、以咨询为主的网站、有意识塑造电子商务品牌形象的企业站点、B2B门户网站。
<2H5在线客服
注意:APP集成客服的情况下,如果APP是原生代码,则建议使用SDK集成的方式接入。如果非原生代码,则必须用h5模式接入,不能使用引入js的方式
七陌系统提供在线客服对接。当用户点击网站上对接好的在线客服功能按钮的时候,可以直接在网页上与客服进行交流。具体对接步骤如下所示:
注意:技能组中至少分配一个坐席,否则会导致消息接入后无法领取就直接关闭了。
进入菜单,设置》渠道设置》网站/wap/H5客服,点击【添加】按钮。
基本设置如下图所示:
字段的详细解释请参考如下表格:
接入样式设置如下图所示:
配置完成后,点击保存。2.3引入js方式对接及对接参数设定
进入菜单,设置》渠道设置》网站/wap/H5客服》网站/WAP/H5客服账号管理,点击【接入代码】按钮,将第一段js复制下来放到网页的head标签或者body标签里。
(注意:不要将js代码下载后再放到项目中,这样会导致版本升级时出问题)
A、引入js中的参数参数名描述accessId在线客服唯一编码,用于识别对接账号,无需改动autoShow控制默认按钮是否显示,默认为true(显示),需要自定义按钮样式则改为false
A、在“网站/WAP/H5客服账号管理”栏点击【测试】按钮可以测试在线客服对接后的效果。
B、在“网站/WAP/H5客服账号管理”栏点击【接入代码】按钮后,检测接入网站是否植入成功。只是作为参考,具体对接后能正常使用在线咨询即可。
C、自定义在线客服按钮
将引入js里的参数autoShow的值改为false,隐藏默认按钮;在自定义的按钮上添加点击事件:onclick=“qimoChatClick();”例如:
D、自定义用户信息及扩展信息上传
以下代码为可选部分,且二选其一即可,如果您想自定义自己的用户id(默认由系统随机生成用户id),将这段代码放在全局,且在上面那段js脚本之前,并赋予qimoClientId变量一个值,该值为string类型或json类型。
a、string类型则该值为用户id,用户昵称则自动生成,规则:用户id+随机字符串。用户id必须唯一即不同访客需要传不同id,并且id不能传中文,否则会出现聊天记录与别的用户串联。
注意:发送商品链接url地址或者文本里含有‘%’、‘&’这种字符的需要转一下码,encodeURIComponent()。且m7CardInfo是一个json对象,当前js段必须放在引入js段前面。
配置代码:
发送后坐席端展示:
E、在线客服其他功能-发送商品链接-新版
参数说明:
2.4h5外链方式对接及对接参数设定
重要:a、如果需要自定义访客名称(nickName),则访客id(clientId)必传。b、若只定义了访客id,则后台显示的访客名称为访客id+@随机字符串。c、otherParams里的自定义参数名和参数值必须是双引号。d、otherParams中的cardInfo对象,是存放发送商品信息的json对象
B、自定义用户信息及扩展信息上传
C、发送商品链接
注意:发送商品链接url地址或者文本里含有‘%’、‘&’这种字符的需要转一下码,encodeURIComponent()。参数值格式与引入js方式一致,但是是通过cardInfo参数拼接在链接上上传,且cardInfo参数是otherParams参数的子参数。
D、发送商品链接-新版
注:该功能用于坐席给访客发送除卡片外其他类型消息
文件消息示例:
缺点:接入浏览器会导致APP的apk安装包增大。针对手机安卓5以上版本,华为、小米、魅族、oppo、三星等主流手机,原生浏览器接入H5页面无功能影响;
1、用户可以看到别人的聊天记录.
【解决办法】:自定义用户Id的时候把用户ID固定了导致;用户id是区别用户的标识,如果固定了则表示为同一用户,所以可以看到别人的聊天记录,如果想定义就不用传,系统会自动生成用户id和用户昵称。
2、判断聊天窗口是否加载完成.
【解决办法】:访客端提供了一个变量来标志是否加载完成可以弹出了,变量名为qimoChatLoaded,挂在window空间下,window.qimoChatLoaded可以访问到,为true的时候说明加载完成了。
3、如何手动调用方法实现关闭聊天窗口.
【解决办法】:调用qimosdk.closeChatBox()。
4、vue网站调用qimoChatClick事件无效.
【解决办法】:vue页面调用qimoChatClick事件需要使用window.qimoChatClick()来调用。
7、require.js对接商品卡片信息无效.
【解决办法】:require.js集成商品卡片信息,需要把m7CardInfo变量挂在window命名空间下,否则无法读取变量
8、在APP端聊天窗口大小展示不正常.
【解决办法】:调整APP端页面的缩放,以及确认网站是否有做移动端适配。
9、在移动端访问无法发送图片或无法滑动手机
【解决办法】:调整移动端webview的页面兼容。
10、发送商品卡片点击跳转链接,想要监听。
【解决办法】:可以监听message。样式一卡片判断返回的‘m7ProductClick’这个事件,样式二卡片判断返回的‘m7GoodsClick’这个事件。
11、获取当前访客端会话未读消息数。
【解决办法】:请求方法:window.getUnReadMsgCount(userId,callback),userId:当前会话的访客id,如果不填的时候,置为空或者false,不传id是按照cookie中存储的sid查询的,cookie里的sid是上次会话的sid,想区分用户来查未读消息,就指定自定义访客id;callback:请求回调。
12、获取当前访客端会话未读消息详情列表。
【解决办法】:请求方法:window.getUnReadMsgList(userId,page,callback),userId:当前会话的访客id,如果不填的时候,置为空或者false,不传id是按照cookie中存储的sid查询的,cookie里的sid是上次会话的sid,想区分用户来查未读消息,就指定自定义访客id;page:请求的详情的页数,每页10条数据;callback:请求回调。
13、js引入方式想动态修改AccessID。
【解决办法】:
window.qimosdk.reInit({accessId:'后台获取的accessId',otherParams:encodeURIComponent(JSON.stringify({nickName:'测试8002',agent:'8000',peerId:'',customField:encodeURIComponent(JSON.stringify({扩展字段:'b'})})),clientId:{userId:'访客id'}},function(){window.qimoChatClick()}
14、app引入在线客服h5链接,需要下载视频功能。
【解决办法】:在h5链接后拼接参数videoDownloadBtn=true,访客可在视频消息旁看到下载按钮,点击后h5会回抛链接地址,app根据链接地址调取资源下载即可。app端可通过onDownloadVideo方法获取链接地址,具体可向技术人员咨询参考demo。
15、app引入在线客服h5链接,需要自定义权限弹窗以及说明。
【解决办法】:在h5链接后拼接参数useJsUpload=true,点击上传图片等按钮的时候h5会调用app内的checkPermission方法,app在checkPermissio这个方法同意权限之后,我们会调用js的方法initAllUpload,具体代码交互可向技术人员咨询参考demo。
16、在线客服h5链接、js引入需要修改访客端主题颜色。
【解决办法】:在客服链接后拼接参数customColor=十六进制颜色码即可,具体可向技术人员咨询。
17、app引入在线客服h5链接,访客需要结束会话。
【解决办法】:点击h5结束会话按钮后(右上角“X”),调用app的方法onCloseEvent,用于关闭app的webview界面。
1、坐席无法结束待处理中会话,提示【请联系管理员设置会话结束类别】
【解决办法】:管理员账号进入设置功能—>渠道设置—>在线咨询全局设置—>结束会话类别配置,至少添加一个会话结束种类。
2、会话接入后直接关闭了,不能领取
【解决办法】:查看该渠道配置中是否开启日程,开启日程后日程中无任何配置;技能组中是否有分配坐席;技能组中的坐席是否有在线。
3、访客端提示会话被系统终结
4、访客端进入咨询后回复的都是无厘头话术
【解决办法】:是否开启了机器人且开启了机器人的寒暄库
5、配置了智能机器人却没有用
【解决办法】:查看在对应的渠道上是否添加了机器人;机器人问答库中是否至少添加了一个问答。
6、机器人回复、知识库、欢迎语出现乱码或标签
【解决办法】:把原来的内容复制到记事本,然后删除重新添加,内容必须从记事本复制到内容框。
7、IE浏览器访客端无法打开聊天窗口
【解决办法】:系统兼容ie8以上ie11以下,建议使用Google浏览器。