融云会话界面自定义功能_Web

最新推荐文章于 2022-04-20 15:22:24 发布

weixin_39950081

最新推荐文章于 2022-04-20 15:22:24 发布

阅读量219

点赞数

文章标签：融云会话界面自定义功能

本文链接：https://blog.csdn.net/weixin_39950081/article/details/111497737

版权

本文档介绍了如何在Web应用中自定义融云客服会话界面，包括下载客服插件、初始化配置、移动端适配、目录结构解析及商品信息消息的发送。同时提供了初始化配置的示例代码，强调了额外信息参数设置的重要性。

摘要由CSDN通过智能技术生成

Web

1、下载客服插件

下载融云客服插件包(项目源码 dist 目录)，放在自己项目目录中，在页面中引入以下资源：

2、初始化客服插件，初始化前，需要通过融云 Server API 接口获取 Token

RCS.init({

appKey: "x4vkb1qpv6hzk",// 应用 appkey

token: "xu3bupPl1BfQ6zuh4dt+XgjhgbU7wkXey1sSyxbY7BWzkNfuprj0izKgSClenbiWt6Co1VyMgB0maYIAzQF0S6Ua0Rxnr/45B1H0MUHEn6w=",// 当前游客或登录用户 token，通过调用 Server API 获取 Token 接口获取。

upload: {

fileServer: "http://upload.qiniu.com",// 文件服务器地址

isPrivate: false // 是否是私有云

},//非必填

target: document.getElementById("rcs-app"),// 要插入到的页面节点

customerServiceId: "KEFUxiaoqiaoPrestaShop1"// 通过“客服管理后台 - 坐席管理 - 技能组”，对应为技能组列表中的技能组 ID。

userIcon: 'http://7xo1cb.com1.z0.glb.clouddn.com/rongcloudkefu2.png',//用户默认头像，在用户没有头像的时候显示

csIcon: 'http://fsprodrcx.cn.ronghub.com/UQRxDVEHcD6_gHENUQRxDUs9XOZRBH25PGECfjBjFA/base64.png',//客服默认头像，在客服没有头像的时候显示，建议线上地址

showButton: true,

//是否需要按钮主动发起，设为false的时候，init()方法直接唤起聊天窗口,需客户自己编写按钮，点击之后调用init(),templates中的button模板不可用;设为true的时候，init()首先唤起客服咨询按钮，点击之后才连接客服，唤起聊天窗口，在进入页面之后就需调用init()方法。此参数是为了方便客户在点击客服按钮后自行获取token，在获取到token之后，执行init()即可。

connectingCallback: function(){

console.log('连接中');

},//连接中的执行的方法，例如显示加载页面,可不传

connectedCallback: function(){},//连接成功之后的方法，例如关闭加载页面,可不传

disconnectedCallback: function(){

alert('连接断开');

},//断开连接之后的操作,可不传

extraInfo: {

"userInfo": {

"name": ""//为用户名称

"requestInfo": {

"referrer": "", //为来源渠道号，该值通过“客服后台 - IM 客服管理 - 渠道 - App”渠道号列表中获取。

"define": ""//自定义信息，如：{carInfo:'宝马车系',userId:'user11',quInfo:'xxx'}

}

}//客服携带信息

});

客服移动端支持 H5 适配，支持各大主流浏览器包括：IOS Safari:3.2 以上，Android Browser:2.1 以上，Chrome for Android:12 以上，Firefox for Android:55，IE Mobile:10 以上， QQ 浏览器主流版本，微信浏览器主流版本。

提示

注：代码示例中参数 extraInfo 为用户的详细信息，此数据用于上传用户信息到客服后台，数据的 name 、portraitUrl 和 referrer 必须填写。

name 为用户名称

referrer 为来源渠道号，该值通过“客服后台 - IM 客服管理 - 渠道 - App”渠道号列表中获取。

define 自定义此属性的 JSON 结构后，需要在“客服后台 - IM 客服管理 - 设置 - 来访信息 - 自定义字段设置”中，设置其字段 ID，字段 ID 为 JSON 结构中 Key 值，否则无法在后台显示。

3、目录结构说明

dist

发布-合并压缩后的代码cs.html

示例页面

templates

HTML模板

cs.css