小程序客服接入

【提醒】七鱼提供了获取小程序的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"
        });
    }
})

更新说明

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

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

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