小程序客服接入

七鱼提供了两种小程序客服接入方式,分别为密钥接入和授权接入(推荐)

授权接入方式

在管理端设置页中,可以通过扫码指定权限的方式授权接入,这种方式更为方便,同时也有效避免Token冲突影响自身业务。

密钥接入方式

【提醒】七鱼提供了获取小程序的access_token接口《从七鱼获取微信小程序access_token》。企业可以通过此接口统一获取accesstoken,避免两方调用冲突以致access_token的获取次数超过微信每日2000次的上限,导致企业无法接收客服消息!

1、填写小程序信息
1.1获取小程序AppID(小程序ID),AppSecret(小程序密钥)

获取Appid

1.2点击【绑定微信小程序】按钮

绑定微信小程序

1.3输入小程序名称,APPID,APPSecret,点击【下一步】

输入小程序信息

2、完成消息推送配置
2.1复制消息推送URL(服务器地址)

复制消息推送URL

2.2小程序消息推送配置

开启消息推送
填写消息推送url

2.3信息填写完成后,在七鱼后台填写上一步的Token和EncodingASEKey,点击【提交】

提交

2.4回到微信小程序消息推送配置页,点击【提交】,即可完成消息推送配置

完成

3、小程序中添加客服入口

为正常获取到访客的头像和昵称,推荐在小程序中使用以下代码添加入口,并获取小程序用户的昵称头像以及会话来源页标题,会话来源页的标题需要开发者在页面手动配置,入口样式可以根据微信官方规则进行调整。
分配

<button
type="primary"
size="40"
session-from="nickName={{userInfo.nickName}}|avatarUrl={{userInfo.avatarUrl}}|referrerTitle={{ysf.title}}"
open-type="contact"
>联系客服</button>  

附:微信小程序接口文档

4、设置小程序客服消息分配机制

在【设置-高级设置-访客分配】处,可以设置微信小程序客服消息分配规则

5、测试是否接入成功
5.1 进入小程序点击客服入口,在聊天页面输入文字,测试七鱼后台是否接收到此消息
5.2 在七鱼后台发送消息,测试小程序客服中是否接收到此消息。

若消息接收没问题,则接入成功;若接收不成功,请从第一步开始仔细检查重新设置

获取小程序access_token

通过微信小程序发送消息,需要使用从微信获取的access_token,微信文档中建议开发者使用中控服务器统一获取和刷新access_token,七鱼提供两种中控服务器对接方式,分别支持七鱼或企业作为中控服务器来管理小程序的access_token,并对外提供获取微信小程序access_token接口。
以下分别阐述对接方式,可参考微信文档

七鱼作为中控服务器

若选择七鱼做为access_token中控服务器,就严禁企业再额外直接调用微信的access_token获取接口,此操作会导致我们缓存的access_token失效,导致发送消息失败。
接口请求说明

参数 参数类型 参数说明
appid String 小程序appid
secret String 小程序secret

请求地址:

 POST https://qiyukf.com/openapi/wechat/miniprogram/access_token?appKey=1064deea1c3624c9ee26d1de5ce8481f&time=1463216914&checksum=e72be4487b6fc03e0f914fc11e4053d771598d93
 Content-Type:application/json;charset=utf-8

接口返回示例:

 {
   "code": 200,
   "message": "{\"expires_in\":7144,\"access_token\":\"10_819-492EoXNz8u_2Crfx8da3BrSOSHtbT9O71OtwvxjWCvb2zk7FW8cYFqJLMpY1Wd8o61XnGTGiTH6-kCLg_DwZelsveq4mc92DKHCQaUDaGtRiZvQ-2OG9PtvNtrpmxHIe-omOptweBhjIFXPfAIAOGY\"}"
 }

返回格式说明:

参数名 类型 参数说明
code int 返回码
message String access_token获取结果

message中,expires_in为access_token在微信服务器的有效时间,单位为秒,access_token为获取到的微信凭证。企业所有获取access_token的地方都可直接来七鱼服务器调用本接口获取,企业亦可根据返回的有效时间在自己服务器缓存access_token,避免多次http调用,但若发现当前缓存的access_token失效(调用微信小程序发消息接口会有失效错误码40001,详细见微信文档),需再次请求本接口,获取最新access_token。

示例请求代码:

 public void testGetWxMiniAccessToken() throws Exception {
         String url = "http://qiyukf.com/openapi/wechat/miniprogram/access_token?appKey=消息接口AppKey&time=%d&checksum=%s";
         JSONObject params = new JSONObject();
         params.put("appid", "appid");
         params.put("secret", "appsecret");
         long time = System.currentTimeMillis() / 1000;
         String checksum = QiyuPushCheckSum.encode("消息接口AppSecret", MD5.md5(params.toJSONString()).toLowerCase(), time);
         System.out.println(checksum);
         url = String.format(url, time, checksum);
         String response = HttpClientPool.getInstance().postMethod(url, params.toJSONString());
         System.out.println(response);
     }

企业作为中控服务器

若企业有自身管理access_token的业务需求,则七鱼支持设置从企业那里获取access_token,可在管理后台设置页面设置使用企业自己服务器做为access_token中控服务器,而后七鱼就会使用企业接口获取access_token。
接口调用说明

请求头参数说明

参数 参数类型 参数说明
appId String 企业分配给七鱼的appId
nonce String 描述信息
time Long 当前UTC时间戳,精确到秒数
checkSum String SHA1(appSecret + nonce + time),将三个参数按appSecret、nonce、 time,并转化成16进制的小写字符串作为checkSum

请求体参数说明

参数 参数类型 参数说明
appid String 需获取access_token的小程序apppid
secret String 需获取access_token的小程序secret

小程序行为轨迹

七鱼小程序SDK,可以收集访客的访问信息(例如PV,着陆页,停留时长等),并在 历史会话>访问轨迹中展示,下载接入demo

小程序SDK配置说明

1、获取和引入小程序SDK

下载SDK,将获取到 DATracker.js 文件后,把该文件放到小程序根目录 utils 目录下, 然后在 app.js 第一行引入 import DATracker from './utils/DATracker';

sdk初始化配置(必须)

//在app.js 第一行引入sdk
import DATracker from './utils/DATracker'
//sdk 初始化配置, 其中 88888 替换对应的 appkey
DATracker.init('8888',{
    appid: 'wx86de6fef8b5524df',  
    //在页面路由变动时,发送页面标题的事件
    onPageShow: function(datracker, router, page) {
        datracker.track_pageview({data:page.data.ysf});      
    }
});  

在其他的Page里配置页面的标题

  Page({
    data: {
        ysf:{title: '首页'},
    }  
  })
2、小程序域名配置

登录公众平台-设置-开发设置-服务器域名配置中增加七鱼数据的域名:https://da.qiyukf.com
配置七鱼数据域名

3、检查是否接入成功

在小程序开发编辑器中,查看控制台中的Network是否有信息上报,且status状态为200。

页面访问轨迹

小程序SDK已经自动追踪了微信小程序中 PageonShow,这个会在每次打开页面都会调用一次,追踪用户的页面访问轨迹

自定义行为轨迹

在小程序 SDK 初始化成功后,即可以通过 DATracker.track() 记录用户的关键行为事件,开发者可以预先在需要追踪的关键行为出埋点


//自定义事件示例:
//在某个 Page 中
var app = getApp();
Page({
    data: {},
    Custom: function(){
        // 追踪浏览商品事件。
        app.DATracker.track('上报购买商品行为', {
            ProductId: '123456',
            ProductName: "MacBook Pro",
            ProductPrice: "¥123.45"
        });
    }
})

小程序卡片消息收发

访客端小程序卡片消息发送

小程序访客端支持小程序卡片消息发送,需要在客服会话消息button中增加两个字段,show-message-card显示会话内消息卡片, send-message-title会话内消息卡片标题。添加后,访客接入会话时,会出现会话页的小程序卡片的提示。

<button type="primary" size="40"
        session-from="nickName={{userInfo.nickName}}|avatarUrl={{userInfo.avatarUrl}}|referrerTitle={{ysf.title}|ysf.config={{ysf.config}}" 
        send-message-title="{{ysf.title}}"
        show-message-card="true"
        open-type="contact">
        点我给客服发送消息
</button>

工作台iframe自定义发送小程序卡片消息

对接入客服工作台的小程序可以发送自定义小程序卡片消息。用户可以通过在接入的iframe页面中将数据对象按找下面规则组装好后通过postMessage的方式发送到网易七鱼的系统。
基本的实现代码如下:

var data = {
    // 要发送到的卡片消息数据对象  
        "msgtype": "miniprogrampage",
        "title":"title",  
        "name": "name",
        "headimg": "headimg"
        "pagepath":"pagepath",
        "thumb_media_id":"thumb_media_id""thumburl": "http://****/888/1.jpg"
}
window.parent.postMessage(data, '*'); //将数据用postMessage的方式发送到七鱼

卡片消息的字段规则如下:

字段 类型 必须 描述
title string 标题
name string 小程序名称,主要用于客服工作台展示
headimg string 小程序头像,主要用于客服工作台展示
pagepath string 小程序页面路径
thumb_media_id string 小程序消息卡片的封面, image类型的media_id,通过新增素材接口上传图片文件获得,建议大小为520*416
thumburl string 小程序消息卡片的封面图片地址链接,主要用于展示在客服端工作台, 保证和封面id是同一个图片

更新说明

v4.1
1.支持小程序客服接入

v4.3
1.增加小程序SDK,记录小程序页面访问轨迹
2.支持调用企业接口获取Access_Token

v4.4
1.增加小程序自定义关键事件轨迹追踪

v4.5
1.支持小程序卡片的收发
2.增加授权接入方式