一、登录小程序授权微信客服
![图片[1]-微信小程序中添加微信客服实例-VUM星球](https://www.vumstar.com/wp-content/uploads/2024/01/20240111095201831-截屏2024-01-11-09.51.31-1024x904.png)
- 在里面申请接入就可以
![图片[2]-微信小程序中添加微信客服实例-VUM星球](https://www.vumstar.com/wp-content/uploads/2024/01/20240111095304230-截屏2024-01-11-09.52.17-1024x904.png)
二、登录企业微信后台,获取企业ID和客服ID
- 获取微信客服ID
![图片[3]-微信小程序中添加微信客服实例-VUM星球](https://www.vumstar.com/wp-content/uploads/2024/01/20240111095620697-截屏2024-01-11-09.55.53-1024x904.png)
![图片[4]-微信小程序中添加微信客服实例-VUM星球](https://www.vumstar.com/wp-content/uploads/2024/01/20240111095703960-截屏2024-01-11-09.56.42-1024x904.png)
![图片[5]-微信小程序中添加微信客服实例-VUM星球](https://www.vumstar.com/wp-content/uploads/2024/01/20240111095808330-截屏2024-01-11-09.57.16-1024x904.png)
- 获取企业ID
![图片[6]-微信小程序中添加微信客服实例-VUM星球](https://www.vumstar.com/wp-content/uploads/2024/01/20240111095928435-截屏2024-01-11-09.58.38-1024x904.png)
三、微信小程序开发工具调试
- 找到小程序客服页面,index.js页面加入微信客服调用接口wx.openCustomerServiceChat
![图片[7]-微信小程序中添加微信客服实例-VUM星球](https://www.vumstar.com/wp-content/uploads/2024/01/20240111100356587-截屏2024-01-11-10.01.42-1024x723.png)
- 在pages里面写入调用接口信息
// pages/kefu/index.js
Page({
// 其他页面方法...
// 跳转客服
toCustomerServicePages: function () {
wx.openCustomerServiceChat({
extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc92f0e9xxxxxxxx'},
corpId: 'wwa720b58451xxxxxxxx',
success(res) {}
})
}
})
- toCustomerServicePages 是跳转页面定义按钮名称
- extInfo: {url: ‘https://work.weixin.qq.com/kfid/kfc92f0e9xxxxxxxx’} 微信客服ID的链接
- corpId: ‘wwa720b58451xxxxxxxx’, 企业微信ID
![图片[8]-微信小程序中添加微信客服实例-VUM星球](https://www.vumstar.com/wp-content/uploads/2024/01/20240111101201216-截屏2024-01-11-10.01.42-1024x723.png)
- 客服页面做跳转按钮
<!-- pages/register/index.wxml -->
<view class="register" wx:if="{{isShow}}">
<image src="{{kefuimg}}"></image>
<view class="content">
<view class="btn">
<button class="confirm" type="primary" bindtap="toCustomerServicePages">在线客服</button>
</view>
</view>
</view>
- toCustomerServicePages 这里的名称定义要和index.js页面的保持一致
![图片[9]-微信小程序中添加微信客服实例-VUM星球](https://www.vumstar.com/wp-content/uploads/2024/01/20240111101850790-截屏2024-01-11-10.15.39-1024x604.png)
四、效果实现
- 点击小程序在线客服自动连接到微信客服
![图片[10]-微信小程序中添加微信客服实例-VUM星球](https://www.vumstar.com/wp-content/uploads/2024/01/20240111102419581-IMG_8597-1007x1024.jpg)
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
暂无评论内容