多应用+插件架构,代码干净,支持一键云编译,码云点赞13K star,4.8-4.12 预售价格198元 广告
<br> [**点此进入芝麻小客服官网**](https://xiaokefu.com.cn/?source=kanyun_t_mia ) <br> >本功能支持小程序、小游戏及云客服H5、PC插件 支持传入的参数包括: 其中来源将显示在对话框顶部:(消息来自:XXX) ![](https://box.kancloud.cn/0d4f28a2cc3370b8cb5d3e026177122d_1184x274.png) 其余传入的数据,包括自定义客户字段,都将显示在接待界面客户资料区内; ``` 城市:city 省会:province 微信:weixin 电话:mobile 数字 年龄:age 数字 性别:sex 1或2 1是男 2是女 来源:source 备注:note 昵称:nickName 头像地址:avatarUrl 用户ID:openid 你可以通过这个id来指定唯一用户(只支持大小写字母、数字、下划线及中划线,且长度不能超过78个字符) 联合ID:unionid 主要用于对接页面等场景 标签ID:tag_id ``` ### **小程序代码:** 小游戏使用方法类似,请参考[官方文档](https://developers.weixin.qq.com/minigame/dev/api/open-api/customer-message/wx.openCustomerServiceConversation.html) ``` <button type='default' session-from='{"source":"来源","city":"重庆","province":"重庆","weixin":"微信号","mobile":"13275261763","age":"22","sex":"1","note":"备注","tag_id":"12312"}' open-type="contact" >传入参数演示</button> ``` **备注1:sesion-from最大字符串长度为1024,超过1024会被截取,导致json出错** **备注2:tag\_id 需要在芝麻小客服后台标签管理里面去获取对应的标签ID** ### **云客服H5代码:** 可以使用短连接传入参数,也可以使用长链接(短链接在浏览器内打开后的链接)传入参数; 假如你的长连接(就是渠道链接在浏览器中打开后的链接)为:https://xiaokefu.com.cn/api/mobileweb#/home?channel_id=78&channel_key=7810ic&wechatapp_id=14804 ,传参后为: ``` https://xiaokefu.com.cn/api/mobileweb#/home?channel_id=78&channel_key=7810ic&wechatapp_id=14804&city=1&province=1&weixin=1&mobile=13555555555&age=1&sex=1&source=1&note=1&nickName=昵称&avatarUrl=xxxx&openid=XXXXX ``` 短连接使用方法(不推荐):在短连接后,直接添加对应的参数; 假如你的短连接为:https://xiaokefu.com.cn/s/1012ivx ,传参后为: ``` https://xiaokefu.com.cn/s/1012ivx?city=1&province=1&weixin=1&mobile=13555555555&age=1&sex=1&source=1&note=1&openid=XXXXX ``` 另外,如果有些参数(比如手机号等涉及用户隐私的数据),不适合明文传参,可以通过以下方法将参数加密后传递(仅H5云客服支持): 1、将参数以json格式组装,示例如下: ~~~ {"nickName":"咸鱼","source":"咸鱼测试","note":"note","mobile":"12345231234","avatarurl":"https://wechatapi.xiaokefu.com.cn/static/avatar/137.png"} ~~~ 2、将组装好的json按RSA算法加密 **加密公钥如下:** ~~~ -----BEGIN PUBLIC KEY----- MIIEIjANBgkqhkiG9w0BAQEFAAOCBA8AMIIECgKCBAEA5QPmUXQbm9mOjwQNvFQg yqFLyElBsGUR98lXAFa3sgHnUMkYDa8+ca1QNoF8sNzhT3Ed1YzvGvsXr74x42rS 3QDNkg4ZHOkH+Hv5e1BFeKkc3sAeQQ4OqEGsyAZlFFS0etwhlpjRGMqaBSbRIa9M WfGL8sVp4j+k2m7NbHDVYT9PvxgQHXNxiDnWLV14fzAZ4xPRGQ2F/oZp0EpBdAtG 5VeEm2hfYHy4LQslJsfdacgzjA1d7Y82ixojmX988LvMo5huWY/AQUdqTEKPp2u3 LKW59d39LyS+vLhsAVYWUu3rNa/Nto4zmNrlWElk+JjO75FG2vv84l5AmZEsnIwZ 0BaEqKXztxjNIAPbY+nVyfqcZFDKnbBUhybGy8feHJNHtotDAlX1YJT7N5jWp2T3 qDRqun8KdLpo+NuCDMEb9gynqdUYtWg6XesNA9WU0/g5s7gVwwa329OtMysSIEui xZGCxl44oT02WvWLhYRq6g2D4Yl9OwsBKyXLvMsiN4krHnoRkrSQdtYglpWayLrd U1cYD4lmB5HAkc40wiSauD/si+/XB12clMFmjLR5272/xHSJ02ECcBooVB6zCXrF YYpwUWzxnnmavZFaSnKcFEqWxxmcQWW2j9Y/MClhX4rxzrFDfxK+ZoK1N8ERxjbJ EeE+eqXR9+lKb3hsDrDwl5M9JeeBxtHZ040pQI5d02ZuCofTcjUZF5AIuujrmhkk 6DzgTd3i86D2IRcioUSpsz+gGFITPvvJ3oM9+W/PBBqLDDmz89VLGrxgGTDBkihh /LlvqbxAV4r3CivrissAcEdQ+Qm4RIjEGmy5xgE+ZD0SDAwBjF9OVOBJEilDu2uy 1FOOS+N4vi2EFLwVTrVVSD3mZQnNfaJNENytZG1xmhg5KQNRX48iYMG1K3ocID9t aYFPg6zG7dQQoYRa57EJ1TTdvaim0aw6bs9GUs54gQU9/h7ets01YFGHFESle7If FGCqiey+fUXGW8zXZDU+YdrXYMSvDVRcs4uttH7BQjlXpKG99phMoznPRT4etDB3 /pW45vxV4h4QoFMq8UPwZpBoox56XhRXY8CeakpIRERB3TaxkK+VJvEMj5PfGf/O tZ1AvBIxqEK4LNR7ZCLEoLnkzNbQNOeWAAvneU/yN+X2v6fw4t8iOcGRbvtCWhbn kOtAxrkmN1J/4ffssbrTGUciWAinfjI/HAgiB4e36RKOpJah8ypAMhhJFGqLadOC fxhRD4xSH09zhFMqn2k5knW1WPCIaz1n5ERWe3FpZUHr6KTOsu2PMaeWYcTXJVpE pSkMxwf43ckdhMoEQ8YEPsn2Zledy9P+tjtr4n7QE2Izd+Qew1FNIRnLVgAMdf7V DwIDAQAB -----END PUBLIC KEY----- ~~~ **加密后示例数据如下:** ~~~ no9WiTz6E1eEZMaykwUhyweUQzWZqZnMAZ0twdzFl/A1VL+U0hcuCJbAhpwrRdoyY9gdlbeJMmrHZE658p8jm5TH3iUAiW2++LJaE486RJ3VwZKIRZz11AstNlwpDgN/lpfHaWguVD+6OqrM9V5tDnqbiKrkKtt/hI7YjbSNMVlSRfEVEFjYLhtV2G8l+7ej8rdFk/gaSvb7jvQttPYDkXcD1i7K/Fa5EYleP5pFYNuxL3b52yl2JeZFzwoTzfPs87Vl19ikLmTLJIFOCq0u/Bgwa8OP066jCKrek6uwCPiuo/HBfaWGbYRFXqBLbch9gM4Cs0DJiHM3ia60mZ1icLbZUvVbwc7qFb8JnwjhGoKC7KjYa679HaipLql9mmCOFYV1OaGjcE68RszBMV50TgB/HzPu/BOcbKa2DW+NBl4L7YrAKVdF//nbL5v5xB4/p4+ih+dAZn2TWF0RWwjahpRn8Ebd8y/Zw1i/YonnmeH3hj7zXXGs3/tHY3Y4P8R+9yTpgNP+/mXkW190nLOZ4LLGm37DEhlbLS7xVKYKnxrqMPN/PlEcem34Fe4AYLNL1Ihjm7Kc39Na6Feuwsr8v4UP3zobcqrgIzq00Xh09Uxyk61zMnLj1iRQVQOaTi7RoT93F1SwlS6vkh2thLSCXPsXN5YbMN4/vQDvmKl0BObzacVyBBxkPOKvpca+HFcMSNCWZ1L4sT+aZGxenRjeGu6RQzfAxRKAhigX1Zd02b9rUr77272qCrZOI83Q/VVw0p/vlYbh6Us3UMQ/Xm7b++t/qKmNj9pC8zMIkJQBEiPdvLgK8GXh9BQ0uUmMRofozddbNbyUfXkXHV6Mln5CRtZ1Hi4mR3HeT7g+GLW2eiOd6XR9Z3UOg8GcvYa4Ld1PqGdpMS7gjC553f0AB4eVONcW92kGs2ihFzk3tW0s86l3mltTzyTD60OngmhiG2wGiUQC4/0a32jVJzJE2uj/Ry/y9Dj6qivpo+/DjquKOEtfolomEdruoimBE/wg8HhOdr/5Umo89OKk8qb+7JYWeLLb8iBXJ90HCxtQO70diwCmvZXhCSwrsZ1AoqQOBT8kcIIAvvLGRS7ZPx+bPBlxBK56WUY/G4N2xvmWOoePGmlBnBm0IYTP7FTNuMsY1o/gwTyufPcWVz4AKdL0MEpq2tL9qqhlNLbeRaTTgMvYiTB3V2UlCLOQ8NnU7i7eJUVOSsTu7bWcn34rRH+Xp5r4HCnasfMtJkCD924zP8QCEIULi6im+7Zugz0mXqgz6OOXVUZ8rFkSwdn8nbIeZ1sLDAcivfQN93CRYz/kbbjFNXr4Wm1EQAgmyaOABVuUBejG44MlAiZvBe6/o+JU3zj71g== ~~~ 3、将加密后的数据,先进行base64_encode,然后urlencode。示例数据如下: ~~~ no9WiTz6E1eEZMaykwUhyweUQzWZqZnMAZ0twdzFl%2FA1VL%2BU0hcuCJbAhpwrRdoyY9gdlbeJMmrHZE658p8jm5TH3iUAiW2%2B%2BLJaE486RJ3VwZKIRZz11AstNlwpDgN%2FlpfHaWguVD%2B6OqrM9V5tDnqbiKrkKtt%2FhI7YjbSNMVlSRfEVEFjYLhtV2G8l%2B7ej8rdFk%2FgaSvb7jvQttPYDkXcD1i7K%2FFa5EYleP5pFYNuxL3b52yl2JeZFzwoTzfPs87Vl19ikLmTLJIFOCq0u%2FBgwa8OP066jCKrek6uwCPiuo%2FHBfaWGbYRFXqBLbch9gM4Cs0DJiHM3ia60mZ1icLbZUvVbwc7qFb8JnwjhGoKC7KjYa679HaipLql9mmCOFYV1OaGjcE68RszBMV50TgB%2FHzPu%2FBOcbKa2DW%2BNBl4L7YrAKVdF%2F%2FnbL5v5xB4%2Fp4%2Bih%2BdAZn2TWF0RWwjahpRn8Ebd8y%2FZw1i%2FYonnmeH3hj7zXXGs3%2FtHY3Y4P8R%2B9yTpgNP%2B%2FmXkW190nLOZ4LLGm37DEhlbLS7xVKYKnxrqMPN%2FPlEcem34Fe4AYLNL1Ihjm7Kc39Na6Feuwsr8v4UP3zobcqrgIzq00Xh09Uxyk61zMnLj1iRQVQOaTi7RoT93F1SwlS6vkh2thLSCXPsXN5YbMN4%2FvQDvmKl0BObzacVyBBxkPOKvpca%2BHFcMSNCWZ1L4sT%2BaZGxenRjeGu6RQzfAxRKAhigX1Zd02b9rUr77272qCrZOI83Q%2FVVw0p%2FvlYbh6Us3UMQ%2FXm7b%2B%2Bt%2FqKmNj9pC8zMIkJQBEiPdvLgK8GXh9BQ0uUmMRofozddbNbyUfXkXHV6Mln5CRtZ1Hi4mR3HeT7g%2BGLW2eiOd6XR9Z3UOg8GcvYa4Ld1PqGdpMS7gjC553f0AB4eVONcW92kGs2ihFzk3tW0s86l3mltTzyTD60OngmhiG2wGiUQC4%2F0a32jVJzJE2uj%2FRy%2Fy9Dj6qivpo%2B%2FDjquKOEtfolomEdruoimBE%2Fwg8HhOdr%2F5Umo89OKk8qb%2B7JYWeLLb8iBXJ90HCxtQO70diwCmvZXhCSwrsZ1AoqQOBT8kcIIAvvLGRS7ZPx%2BbPBlxBK56WUY%2FG4N2xvmWOoePGmlBnBm0IYTP7FTNuMsY1o%2FgwTyufPcWVz4AKdL0MEpq2tL9qqhlNLbeRaTTgMvYiTB3V2UlCLOQ8NnU7i7eJUVOSsTu7bWcn34rRH%2BXp5r4HCnasfMtJkCD924zP8QCEIULi6im%2B7Zugz0mXqgz6OOXVUZ8rFkSwdn8nbIeZ1sLDAcivfQN93CRYz%2FkbbjFNXr4Wm1EQAgmyaOABVuUBejG44MlAiZvBe6%2Fo%2BJU3zj71g%3D%3D ~~~ 4、在H5云客服的链接中拼接**固定参数zhima_params**,将加密好的数据作为参数zhima_params的值,示例如下: ~~~ https://xiaokefu.com.cn/api/mobileweb#/home?channel_id=78&channel_key=7810ic&wechatapp_id=14804&zhima_params=no9WiTz6E1eEZMaykwUhyweUQzWZqZnMAZ0twdzFl%2FA1VL%2BU0hcuCJbAhpwrRdoyY9gdlbeJMmrHZE658p8jm5TH3iUAiW2%2B%2BLJaE486RJ3VwZKIRZz11AstNlwpDgN%2FlpfHaWguVD%2B6OqrM9V5tDnqbiKrkKtt%2FhI7YjbSNMVlSRfEVEFjYLhtV2G8l%2B7ej8rdFk%2FgaSvb7jvQttPYDkXcD1i7K%2FFa5EYleP5pFYNuxL3b52yl2JeZFzwoTzfPs87Vl19ikLmTLJIFOCq0u%2FBgwa8OP066jCKrek6uwCPiuo%2FHBfaWGbYRFXqBLbch9gM4Cs0DJiHM3ia60mZ1icLbZUvVbwc7qFb8JnwjhGoKC7KjYa679HaipLql9mmCOFYV1OaGjcE68RszBMV50TgB%2FHzPu%2FBOcbKa2DW%2BNBl4L7YrAKVdF%2F%2FnbL5v5xB4%2Fp4%2Bih%2BdAZn2TWF0RWwjahpRn8Ebd8y%2FZw1i%2FYonnmeH3hj7zXXGs3%2FtHY3Y4P8R%2B9yTpgNP%2B%2FmXkW190nLOZ4LLGm37DEhlbLS7xVKYKnxrqMPN%2FPlEcem34Fe4AYLNL1Ihjm7Kc39Na6Feuwsr8v4UP3zobcqrgIzq00Xh09Uxyk61zMnLj1iRQVQOaTi7RoT93F1SwlS6vkh2thLSCXPsXN5YbMN4%2FvQDvmKl0BObzacVyBBxkPOKvpca%2BHFcMSNCWZ1L4sT%2BaZGxenRjeGu6RQzfAxRKAhigX1Zd02b9rUr77272qCrZOI83Q%2FVVw0p%2FvlYbh6Us3UMQ%2FXm7b%2B%2Bt%2FqKmNj9pC8zMIkJQBEiPdvLgK8GXh9BQ0uUmMRofozddbNbyUfXkXHV6Mln5CRtZ1Hi4mR3HeT7g%2BGLW2eiOd6XR9Z3UOg8GcvYa4Ld1PqGdpMS7gjC553f0AB4eVONcW92kGs2ihFzk3tW0s86l3mltTzyTD60OngmhiG2wGiUQC4%2F0a32jVJzJE2uj%2FRy%2Fy9Dj6qivpo%2B%2FDjquKOEtfolomEdruoimBE%2Fwg8HhOdr%2F5Umo89OKk8qb%2B7JYWeLLb8iBXJ90HCxtQO70diwCmvZXhCSwrsZ1AoqQOBT8kcIIAvvLGRS7ZPx%2BbPBlxBK56WUY%2FG4N2xvmWOoePGmlBnBm0IYTP7FTNuMsY1o%2FgwTyufPcWVz4AKdL0MEpq2tL9qqhlNLbeRaTTgMvYiTB3V2UlCLOQ8NnU7i7eJUVOSsTu7bWcn34rRH%2BXp5r4HCnasfMtJkCD924zP8QCEIULi6im%2B7Zugz0mXqgz6OOXVUZ8rFkSwdn8nbIeZ1sLDAcivfQN93CRYz%2FkbbjFNXr4Wm1EQAgmyaOABVuUBejG44MlAiZvBe6%2Fo%2BJU3zj71g%3D%3D ~~~ **使用H5云客服传参加密,请务必注意以下几点:** > 1、拼接后的json数据,最长不得超过1000个**字节**。如果长度超过1000个字节,可以考虑将部分无需加密的参数,直接以明文形式传递。 > 2、openid参数,不能放在加密参数中,必须以明文传递 > 3、注意对url的参数进行urlencode,防止解码失败 > 4、支持明文传参和加密两种方式混合使用,但是链接中有zhima_params,重复参数会优先取加密的参数。 ### **PC插件代码:** PC插件需要再JS中调用方法ZM.setUserInfo()。出了支持默认字段,也支持自定义客户字段。不同情况下使用示例如下: 1、触发事件时设置 ~~~javascript function onClick(){ ZM.setUserInfo({ province: '湖北省', // 省会: city: '黄石市', // 城市 weixin: 'xxx666', // 微信 mobile: '159xxxxxxx8', // 电话 数字 age: '30', // 年龄 数字 sex: '1', // 性别:1是男 2是女 source: '微博推广', // 来源 note: '从微博引流过来的', // 备注 nickName: '哈哈9999', // 昵称 openid: '123412edefg345234', // 用户ID tag_id: '244406' }) } ~~~ 2、接入或者页面加载时设置 ~~~javascript document.addEventListener("ZMReady",function(event){ window.ZM.setUserInfo({ province: '湖北省', // 省会: city: '武汉市', // 城市 weixin: 'xxx123', // 微信 mobile: '159xxxxxxx8', // 电话 数字 age: '30', // 年龄 数字 sex: '1', // 性别:1是男 2是女 source: '官网', // 来源 note: '官网云客服咨询', // 备注 nickName: '官网客户', // 昵称 openid: '123412edefg341234', // 用户ID }) }) ~~~ 3、使用`window.ZM.loaded`判断是否初始化完成 -------- ### **自定义客户字段** 如果小客服提供的客户字段不能满足需求,可以使用自定义客户字段功能 功能位置:后台--自定义客户字段 ![](https://img.kancloud.cn/bb/4b/bb4b20361eec89de88c0078d55d26af8_1527x682.png) 1. 可以设置每个字段的显示隐藏 2. 可以增加、编辑、删除自定义字段;注意:自定义字段一旦增加,只能编辑名称,不能编辑类型、字段ID以及选项。 3. 可以调整显示的位置顺序; 4. 自定义字段可以传递,传递方式跟上面的方法一致。比如某自定义字段ID为:ziduan1、ziduan2;在小程序入口处的传递方式是 ``` <button type='default' session-from='{"ziduan1":"字段值1","ziduan2":"字段值2"}' open-type="contact" >传入参数演示</button> ``` H5、插件的传递方式跟原本的传递方式保持一致。 <video style="width: 100%; height: 100%; object-fit: fill" controls="controls" poster="https://box.kancloud.cn/67b3e862f9930f84f9b9629c8aa1dba5_1911x1072.jpg" > <source src="https://ossxkf.oss-cn-beijing.aliyuncs.com/zidingyiziduan.mp4" type="video/mp4" /> </video> -------- ### **查看自己传递的参数** 在传递参数后,可以进入网页端后台--客服消息界面内查看传递的参数: 步骤:从传递参数的客服入口内咨询,进入客服消息界面找到咨询者,在右侧资料区底部查看参数: ![](https://img.kancloud.cn/8f/57/8f574ed84b63cbd8fe3d47a62e6c2cac_1911x928.png) ------ 常见问题: 1:小程序传递过来的参数无效? * 请确认从含有参数的入口点击了客服按钮进入; * 请确认完全按照我们传递参数的格式,单引号双引号不能变; * 请确认没有开启云函数的消息推送功能,其中不包含打开客服事件; 2:小程序传递过来的参数为空? 请确认传递过来的变量有值。 3:VUE的uniapp开发的小程序,编译无法通过? session-from 是个json ,我们的文档时针对原生小程序写的,‘{{  }}’这个语法是原生微信小程序里的,uniapp使用的时VUE的语法,绑定值的方式和原生小程序的语法稍微有写区别。 ![](https://img.kancloud.cn/80/d9/80d9f28c0803b7634f90a531c264fc34_1342x914.png) </h> </h> <br> <br> <br> <br><br> [**点此进入芝麻小客服官网**](https://xiaokefu.com.cn/?source=kanyun_b_mia ) 您有问题需要咨询的话,可以扫描下方二维码: </h> ![](https://img.kancloud.cn/04/a1/04a1fd65b5f5cfbc32ad431a32fabd2a_200x199.png) </h> </h>