====== 微信小程序接入 ======

===== 概述 =====

环信客服云支持微信小程序接入，绑定后您可以使用环信客服云统一接收与回复通过小程序咨询的消息。小程序属于微信渠道，小程序用户产生的会话消息将以微信渠道的形式在客服工作台进行展示和统计。

===== 授权模式接入 =====

步骤如下：

1、 登录环信客服云，进入“管理员模式 > 渠道管理 > 微信小程序”。

{{:cs:releasenote:微信小程序1.png?nolink|微信小程序1}}

2、 点击“添加微信小程序”。

{{:cs:releasenote:微信小程序2.png?nolink|微信小程序2}}

3、 选择“第三方平台授权（推荐）”。

{{:cs:releasenote:微信小程序3.png?nolink|微信小程序3}}

4、 点击“登录授权”，进入微信公众平台，扫描二维码授权第三方平台“环信移动客服”。

{{:cs:releasenote:微信小程序4.png?nolink|微信小程序4}}

5、 绑定成功。

===== 开发者模式接入 =====

集成步骤如下：

**第1步：获取微信小程序的基本信息。**

进入微信公众平台获取“小程序名称”、“原始ID”、“AppID”和“AppSecret”。

1. 进入“设置 > 基本设置”页面获取“小程序名称”和“原始ID”。

{{ :cs:300visitoraccess:001.png?nolink&950 |}}

{{ :cs:300visitoraccess:002.png?nolink&950 |}}

2. 进入“开发-开发管理-开发设置”页面获取“AppID”和“AppSecret”。

{{ :cs:300visitoraccess:003.png?nolink&950 |}}

**第2步：在环信客服云添加微信小程序。**

在环信客服云添加微信小程序，填写小程序的基本信息，生成服务器URL。

1. 进入“管理员模式 > 渠道管理 > 微信小程序”页面，点击“添加微信小程序”，并点击“小程序开发者授权”。

{{:cs:releasenote:微信小程序2.png?nolink|微信小程序2}}

2. 在“添加微信小程序”页面，填写小程序名称、原始ID、AppID、AppSecret，并点击下一步。

{{:cs:300visitoraccess:30wechat:wechat-miniprogram1.png?nolink|填写小程序的基本信息}}

3. 获取环信生成的服务器URL。

{{:cs:300visitoraccess:30wechat:wechat-miniprogram7.png?nolink|生成服务器URL}}

**第3步：配置微信小程序的消息推送。**

进入微信公众平台，配置微信小程序的消息推送。然后，将小程序的Token（令牌）和EncodingAESkey填入环信客服云，完成微信小程序的配置。

1. 进入微信公众平台的“开发-开发管理-开发设置”页面，在“消息推送”区域，填入上一步生成的服务器URL，设置Token（令牌），并生成EncodingAESkey。

<WRAP round tip>
注意：选择消息加密方式为“安全模式”，数据格式为“XML”。
</WRAP>


{{:cs:300visitoraccess:30wechat:wechat-miniprogram5.png?nolink|配置微信小程序的消息推送}}

2. 进入环信客服云，填写微信小程序的Token（令牌）和EncodingAESkey，并点击下一步，完成绑定微信小程序。

{{:cs:300visitoraccess:30wechat:wechat-miniprogram6.png?nolink|绑定微信小程序}}

**第4步：在微信小程序上配置客服按钮。**

在微信小程序的源码中添加如下代码，配置客服按钮。完成后，微信用户即可点击该按钮发起咨询。

<code>
<button open-type="contact" bindcontact="handleContact">客服</button>
</code>

基于微信小程序推出的新特性，客服端可以获取和展示微信用户的昵称和头像以及其他属性信息。如需获取和展示微信用户的昵称和头像以及其他信息，可在微信小程序的源码中添加如下代码。

<code>
<button open-type="contact" session-from='{"nickName":"{{userInfo.nickName}}","avatarUrl":"{{userInfo.avatarUrl}}","trueName":"李小环","phone":"186158282828","qq":"88888888","weixin":"lixiaohuan","email":"huan@163.com","companyName":"环信","description":"精品美妆店铺\n会员id：55555\n购买产品：护肤霜"}'>联系客服</button>
</code>

注：
  - 获取昵称和头像，需要首先获取小程序userInfo
  - nickName不允许为空
  - session-from字段传key:value形式的json字符串
3. 参数说明：
^名称^类型^说明^
|trueName| String |姓名|
|phone| String |手机|
|qq|String|QQ号|
|weixin| String |微信号|
|email| String |邮箱|
|companyName|String|公司|
|description|String|描述，可传递访客来源属性等，如：店铺及商品信息或店铺及订单信息|


**新增 String routingRuleFlag 业务标识路由**

在路由时，如会话中带业务标识（EXT扩展字段），则查询是否有绑定的技能组或客服，有绑定技能组则走指定；如没有带业务标识或没查到绑定技能组，则按照会话分配规则走。

<code>
<button open-type="contact" session-from='{"nickName":"{{userInfo.nickName}}","avatarUrl":"{{userInfo.avatarUrl}}","trueName":"李小环","phone":"186158282828","qq":"88888888","weixin":"lixiaohuan","email":"huan@163.com","companyName":"环信","description":"精品美妆店铺\n会员id：55555\n购买产品：护肤霜","routingRuleFlag": "业务路由标识"}'>联系客服</button>
</code>

====获取accessToken ====

<WRAP round tip>
注意：如需使用开发者模式访问微信小程序接口，为防止accessToken发生冲突（发生冲突时，客服系统可以收到访客的消息，但是访客收不到客服发送的消息），请调用环信提供的接口获取微信小程序accessToken。接口如下：
</WRAP>

根据tenanId,appId,secret从环信获取微信小程序的accessToken信息.

  * Path:http://kefu.easemob.com/v1/weixin/tenants/{tenantId}/xcx/accesstoken
  * HTTP Method：GET
  * Request Parameters：grant_type=client_credential&appid={appid}&secret={secret}
  * 可能的错误码：400（无效信息）。

Curl示例：
<code>
curl -X GET \
  'http://kefu.easemob.com/v1/weixin/tenants/20016/xcx/accesstoken?grant_type=client_credential&appid=wx676137238b282f12&secret=d036a38695bb6fe5d17d77ff8fa65f5c' \
</code>

参数说明：
^名称^类型^是否非空(Y:是;N:否)^说明^
|tenantId|int|Y|租户ID|
|appId| String |Y|小程序的appId|
|secret| String |Y|小程序的secret|

Response示例：
<code>
{
    "access_token": "19_9AUeL6YO4WGI99DU-SHWhxOPCpgniqdSmQVU7BHAR4J62DHP4QE7G6LOsg4xRiRLTFPH4ybxiXAjIrU2cDKcP3qWiWvbxAibJ1Aw7--sZ2S0rwgG6f4Ya5-WdV1D4c_c598vXvhXNU8QFxpHSWGbAJAAEO",
    "expires_in": 7200
}
</code>

参数说明：
^名称^类型^说明^
|access_token|String|要获取的accessToken|
|expire_in| int |到期时间，最大值为7200s|

错误码说明:

^错误码^错误信息^注释^
|400|“invalid grant_type hint”.“invalid tenantId or appId or secret”.|无效信息|
===== H5网页接入 =====


使用H5集成环信网页访客端，需要小程序注册类型为非个人类型或非海外类型，个人类型与海外类型的小程序暂不支持使用。

步骤如下：

1、登录小程序后台“开发管理>开发设置>业务域名”，下载“校验文件”，并提供该原始文件、域名与租户ID给环信。

 {{:cs:300visitoraccess:业务域名.png?400|}}
\\ 注：
\\ 域名配置使用网页访客端的对应客服系统二级域名或客户集成网站，如：leoli.kefu.easemob.com；xxx.com。

\\ 2、登录小程序后台“开发管理>开发设置>业务域名”，配置使用网页访客端的对应客服系统二级域名或客户集成网站。

\\ 3、在小程序web_view中使用即可。

===== 小程序视频客服支持同步客户信息 =====

客户通过小程序视频联系客服时，支持自动同步客户信息。客服接待时能第一时间了解客户情况，进一步提升服务效率。集成方式如下：

第一步 在globalData 里增加visitor字段，建议传ID，名称会变

{{:cs:releasenote:图片007.png?nolink&600|}}

第二步 在小程序视频demo的index文件里增加相关代码

{{:cs:releasenote:图片008.png?nolink&600|}}

===== 支持指定技能组、 指定客服=====

第一步 在在globalData 里增加字段

{{:cs:增加字段.jpg?nolink&600|}}

第二步 在小程序视频demo的index文件里增加相关代码

{{:cs:增加相关代码.jpg?nolink&600|}}

===== 后续操作 =====

更多操作请参考[[cs:300visitoraccess:mini-program|微信小程序集成]]