微信小程序客服系统-对接消息推送-对接模板订阅消息-嵌入webview客服链接

想要给自己的小程序增加客服系统功能

小程序客服对接导自己的系统等需求,可以参照我开发的客服系统,实现私有化部署搭建对接的微信小程序

小程序消息推送对接

首先登录小程序后台
在小程序后台==>开发管理==>开发设置==>服务器域名部分,配置好自己的域名

再往上翻,开发者ID部分,把AppID AppSecret 找个文档记下来,ip白名单我先给关上了

 

在小程序后台==>开发管理==>开发设置==>消息推送中补全信息,这个时候如果提交会报token校验失败,需要回到客服系统去配置相应的信息

功能==>客服==>小程序客服,配置好自己的客服人员

客服系统配置

上面就是小程序后台部分的配置,接下来返回我的客服系统后台,去配置相应的信息

设置==>找到下面三个小程序的配置项,补充完善信息

此时在小程序的客服组件里,就能收到来自我客服系统的消息回复了,并且不影响客服人员使用微信自带工具接入

配置订阅模板消息

微信小程序想要对接独立在线客服系统,除了使用小程序消息推送接口外,还可以使用webview嵌入的形式嵌入聊天链接。

但是,使用webview嵌入的形式,当用户离开页面以后,就收不到客服回复的消息了

所以,我们需要当用户离开聊天页面后,客服回复消息,使用小程序的订阅模板来进行通知。

我们前往小程序后台,去开启一下订阅消息,并且选用一个模板。

在公共模板库里搜索一下,选用“咨询回复通知”

 配置一下字段,我们就需要三个字段就可以了,分别是,“回复内容”  “回复时间”  “回复者”

这样会得到模板ID,后面我们会通过这个模板ID进行发送

现在,我们去小程序端,增加一下订阅事件

在小程序端向用户发起消息请求,需要注意请求需要放在触发事件中,不能凭空(onload、onshow或者其他情况)触发。

页面xml

<button bindtap="sendreq">开始订阅</button>

页面js

const app = getApp()
Page({
  sendreq(){
    wx.requestSubscribeMessage({
      tmplIds: ['这里替换成你的模板ID'],
      success (res) {
        console.log(res)
        // res包含模板id,值包括'accept'、'reject'、'ban'、'filter'。
        // 'accept'表示用户同意订阅该条id对应的模板消息
        // 'reject'表示用户拒绝订阅该条id对应的模板消息
        // 'ban'表示已被后台封禁
        // 'filter'表示该模板因为模板标题同名被后台过滤。
      }
    })
  }
})

只有这样订阅过以后,才能给这个用户发送模板消息

再去客服后台配置下面的内容
订阅消息模板ID
订阅消息模板跳转pages路径

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,针对你的问题,我可以给你一些思路和实现方式。 在微信小程序中,我们可以使用自定义组件来封装一些常用的UI组件或者业务逻辑组件,具体可以参考微信小程序官方文档中的自定义组件部分。而在H5页面中,我们可以使用微信小程序的web-view组件嵌入小程序页面,从而实现小程序组件在H5页面中的调用。 下来,我们需要在小程序中定义一个自定义组件,并将其封装为一个可以在web-view中调用的方法。具体实现步骤如下: 1. 在小程序中定义自定义组件,并实现相应的业务逻辑。 2. 在自定义组件中添加一个事件监听器,用来收来自web-view的消息。 3. 在web-view中使用postMessage()方法发消息给小程序,消息内容为需要调用的方法名及相应的参数。 4. 在自定义组件中根据收到的消息内容,调用相应的方法并返回结果给web-view。 下面是一个简单的示例代码: 小程序端代码: ```javascript // 定义自定义组件 Component({ methods: { // 自定义方法 add: function(a, b) { return a + b; }, // 监听web-view发消息 onMessage: function(e) { // 解析消息内容 var data = JSON.parse(e.detail.data); // 调用相应的方法并返回结果 if (data.method == 'add') { var result = this.add(data.a, data.b); wx.webViewPostMessage({ data: JSON.stringify({ method: 'add', result: result }) }); } } } }) ``` H5页面端代码: ```javascript // 获取web-view组件 var webview = document.getElementById('webview'); // 发消息给小程序 webview.contentWindow.postMessage(JSON.stringify({ method: 'add', a: 1, b: 2 }), '*'); // 监听小程序返回的消息 window.addEventListener('message', function(e) { // 解析消息内容 var data = JSON.parse(e.data); // 处理返回结果 if (data.method == 'add') { console.log('1 + 2 = ' + data.result); } }); ``` 通过以上代码实现,我们就可以在H5页面中调用小程序中封装的方法了。需要注意的是,为了保证安全性,我们在发消息时需要指定目标源,所以在postMessage()方法中需要指定'*'或者目标web-view的src属性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值