在线客服对接

本文档共分为场景概述及对接步骤两部分。目录如下:

1.应用场景及优势

1.1 在线客服应用场景:

<1 网站在线客服

主要应用于:以网上贸易为主的B2C电子商务性质的网站和网店、以咨询为主的网站、有意识塑造电子商务品牌形象的企业站点、B2B门户网站。

<2 H5在线客服

主要应用于:您自己的官网,微信商城,APP等任何可以发起https请求打开新的h5界面地方。您也可以将此链接分享到各种社交平台,让用户随时随地都能联系到您。

<3 移动APP客服

主要应用于:有开发自己APP的客户,适用于安卓和IOS原生代码开发的应用。

1.2 在线客服优势:

  • 降低运营成本

  • 进行无缝沟通

  • 保证监控管理

  • 更灵活的多网站管理

2.在线客服对接步骤

七陌系统提供在线客服对接。当客户点击网站上对接好的在线客服功能按钮的时候,可以直接在网页上与客服进行交流。具体对接步骤如下所示:

2.1 第一步:添加互联网渠道技能组

温馨提示:互联网渠道技能组可用于"网站/wap/H5客服"、"移动APP客服"、"微信客服"、"微博客服"这4类渠道。

注意:一定要给技能组分配坐席,否则会话是无法接入的。

2.2 第二步:添加在线客服

七陌在线客服共分为网站在线客服与移动在线客服两类,网站在线客服包括代码植入和h5链接两种方式,移动在线客服包括安卓和IOS两类的SDK。

<1.网站在线客服

<1.1 网站在线客服配置界面

首先在设置-渠道设置-网站/wap/H5客服菜单栏点击添加即可看到如下图所示界面,将基本设置和接入样式设置各项填完后保存并进入下一步:

基本设置如下图所示:



字段的详细解释请参考如下表格:

字段 含义
网站名称 网站的名称(必填)
网站域名 网站的域名(非必填)
网页标题 网页标题的设置用于测试和H5链接引出后对应网页的标题名称显示。默认:im
接入技能组 选择网站在线客服的接入技能组(必填,可多选)
启用智能机器人 选择是否开启智能机器人功能。
是否启用满意度调查 选择是否开启智能满意度调查功能。
是否启用访客浏览轨迹回放 选择是否开启访客浏览轨迹回放功能。
设置主动会话模式 开启自动邀请后,访客进入网站则会立刻弹出在线咨询的聊天框

接入样式设置如下图所示:

字段的详细解释请参考如下表格:

字段 含义
企业简称 企业的简称,会显示在logo下方;(必填)
企业头像 企业的图标,如不传则默认为容联七陌的logo
是否显示座席名字 选择是否给访客显示坐席名字
客服欢迎词 访客接入会话后看到的欢迎语;默认:您好欢迎光临
聊天框颜色 聊天框的颜色风格,根据网站选择不同风格。
聊天框位置 可选择页面左侧和页面右侧
侧边距 距离页面左侧或者右侧的距离

接下来点击接入代码按照配置提示完成代码植入即可完成对接。(注意:请采用引入js的方式,不要将js代码下载后再放到项目中,这样会导致版本升级时出问题)

注:

1、访客端提供了一个变量来标志是否加载完成可以弹出了,变量名为 qimoChatLoaded ,挂在window空间下,window.qimoChatLoaded可以访问到,为true的时候说明加载完成了。

2、我们还支持客服按钮自定义功能,即隐藏默认按钮,添加自定义样式按钮,参考接入代码:自定义客服按钮。

3、【chrome浏览器无法点击图片按钮】点击无效是因为我们使用的上传iframe设置了透明度opacity为0,在chrome当前页面与iframe页面不同域的情况下不允许与iframe交互,所以无法使用我们的上传功能, 建议在样式里加上 #qimo_upload { opacity: 0.01 !important; } 就可以使用上传了

4、访客端调用这个方法可以关闭聊天窗口qimosdk.closeChatBox()。

5、新消息来的时候会往外抛一个事件unreadMessageCount(未读消息数),如果h5是被iframe加载进去的话,可以在父页面捕捉这个事件,代表有新消息来了。

6、监听事件showNewMessage,这个事件的参数会把当前来的新消息带过来,在iframe外面就可以知道新来了什么消息。参数里包含了消息的类型 contentType 比如说评价消息,图片消息 ,文件消息等等,以及消息的内容content,以及消息的时间

<1.2 配置参数说明

//以下代码以及参数仅供参考,实际参数以配置完接入号后配置说明页面中的参数为准。  
<script type='text/javascript' src='http://webchat.7moor.com/javascripts
/7moorInit.js?accessId=5d8477d0-79a7-11e5-a21d-a319553981f9&autoShow=true'
 async='async'></script>    
参数名 描述
accessId 在线客服唯一编码,用于识别对接账号,无需改动
autoShow 控制默认按钮是否显示,默认为true(显示),需要自定义按钮样式则改为false

<1.3 在线客服配置测试:

完成配置在线客服接入号之后可以使用提供的测试功能

测试在线客服对接效果:

接入代码中还提供了检测网站植入代码的功能:

<1.4 在线客服其他功能-自定义按钮

完成上述的步骤后,如果您想自定义客服按钮,将上述步骤代码里的autoShow的值改为false。自定义完您的客服按钮后,将下面的代码做为客服按钮的点击事件。

例如:

<button onclick=“qimoChatClick();”>在线咨询</button> 

注意:qimoChatClick事件不管autoShow的值是否为false都可以调用

<1.5 在线客服其他功能-自定义客户id

以下代码为可选部分,且二选其一即可,如果您想自定义自己的用户id(默认由系统随机生成用户id),将这段代码放在全局,且在上面那段js脚本之前,并赋予qimoClientId变量一个值,该值为string类型或json类型.string类型则该值为用户id。用户id必须唯一; 自定义用户昵称nickName时,必须定义用户ID userId

<script type='text/javascript'>  
        var qimoClientId = '123abc';// 自定义用户的唯一id  
</script>  

//或  

<script type='text/javascript'>  
        var qimoClientId = {userId: '123abc', nickName:'test',agent:'8001',customField: {"姓名":"Nick","身份证号":"13112519930101XXXX"}};
    // 自定义用户的唯一id  
</script>

<1.6 在线客服其他功能-发送商品链接

注意:发送商品链接url地址或者文本里含有 ‘%’、‘&’这种字符的 需要转一下码,encodeURIComponent()。

配置代码:

  var m7CardInfo = {
    "left":{
        "url": "https://www.7moor.com/wp-content/uploads/2017/03/publicT_03.png"  // 左侧图片地址,可不填
    },
    "right1": {
        "text": "紧凑型SUV家庭首选旅行必备家用汽车紧凑型SUV家庭首选旅行必备家用汽车",  // 首行文字内容,展示时超出两行隐藏,卡片上单行隐藏
        "color": "#595959",                 // 字体颜色,支持十六位 #ffffff 格式的颜色,不填或错误格式默认#595959
        "fontSize": 12                      // 字体大小, 默认12 , 请传入number类型的数字

    "right2": {
        "text": "内饰做工精细,外观大气",        // 第二行文字内容,展示时超出两行隐藏,卡片上单行隐藏
        "color": "#595959",                 // 字体颜色,支持十六位 #ffffff 格式的颜色,不填或错误格式默认#595959
        "fontSize": 12                      // 字体大小, 默认12 , 请传入number类型的数字
    },
    "right3": {
        "text": "¥169997-210000",           // 第三行文字内容,展示时超出两行隐藏,卡片上单行隐藏
        "color": "#ff6b6b",                 // 字体颜色,支持十六位 #ffffff 格式的颜色,不填或错误格式默认#ff6b6b
        "fontSize": 14                      // 字体大小, 默认14 , 请传入number类型的数字
    },
    "extraInfos": ['随时随地-连接企业与客户'],             // 额外信息,访客不可见,座席点击卡片上的更多可见,可不填,字符串形式的文本数组
    "url": "https://www.7moor.com/"                     // 点击可跳转的链接
}

接入说明:

1、PC接入,需要在客户页面上定义一个名为 m7CardInfo的对象,对象字段以上述说明为准。

2、 wap接入,定义一个 cardInfo对象,包裹在otherParams 里 通过连接方式传入。形如: &otherParams={"cardInfo":{}}

发送前访客端展示:

发送后坐席端展示:

<2 APP集成在线客服

<2.1.SDK集成配置

操作步骤:管理员账号进入设置功能 — 渠道设置 — 移动APP客服 — 移动APP客服账户管理。点击添加即可看到如图所示界面

企业简称:企业的简称(必填)

app名称:要对接app的名称;(必填)

接入技能组:接收客户消息的客服技能组,第一步添加的多渠道技能组(必选)

客服欢迎词:客户打开在线客服对话框首先看到的话;

是否启用满意度调查:选择是否开启满意度调查功能。

启用智能机器人:选择是否开启智能机器人功能。

企业推送接收url:App接收离线消息的服务器地址,不填写则默认不推送。

企业推送接收url接口说明如下:

接口采用httppost方式发送数据,数据格式为Json,例如:

data:{
    dateTime:"2017-08-15 16:02:24",
    content:"您好,请问有什么可以帮您",
    contentType:"text",
    UserId:"1e29be40-2930-11e6-b8cf-a923f8fdcf8e"
}

返回数据格式为json,例如:

{success:true}

配置参数说明如下:

Object 说明 备注
dateTime 消息的发送时间 消息提示内容
content 消息提示内容 当消息类型为图片或语音时,消息内容为消息的网络地址
contentType 消息类型 text:文本voice:语音image:图片
userId 要发送给的用户的id

如图配置完成后,保存并进入下一步。

2.3 第三步:添加多级结束会话

配置结束会话类别,可配置多级分类

操作步骤:管理员账号进入设置功能 — 渠道设置 — 在线咨询全局设置 — 结束会话类别配置。

注:结束会话种类至少要有一个,否则坐席将不能结束会话。

返回顶部