WeChat mini-program customer service system-two forms: embedded in the page to deliver more information and self-contained component form

There are two ways to connect WeChat applets: the webview component is embedded in the page, and the customer service component of the applet is connected to the message

Use the webview component to embed the chat page form. This form is more flexible and controllable, and can transmit more information to customer service, for example, it can bring in the user's mobile phone number, product information on the page, etc.

embedded page form

Added a display click button, and got the nickname avatar, embedded in the chat page.

wxml part

<view class="page-body">
  <button  open-type="getUserInfo" bindgetuserinfo="getPerson">联系客服</button>
  <view wx:if="{
      
      {url}}">
    <web-view  src="{
      
      {url}}"></web-view>
  </view>
</view>
js部分

Page({
  data: {
    url:""
  },
  //按钮回调的方法
  getPerson:function(e){
    console.log(e);
    var username=e.detail.userInfo.nickName;
    var  avator=e.detail.userInfo.avatarUrl;
    this.setData({
      url:"https://gofly.sopans.com/chatIndex?kefu_id=taoshihan&ent_id=5&visitor_name="+username+"&avator="+avator
    });

  },
  onLoad: function () {

  },
})

offline notification

If you need offline notifications, you need to use the subscription message of the applet in the following way , and you can also receive notifications after the visitor leaves the page

There are one-time subscription messages and long-term subscription messages in the Mini Program. Long-term subscription messages are only open to offline public services such as government affairs and people's livelihood, medical care, transportation, finance, and education. Generally, we cannot use them.

The one-time subscription message is used to solve the notification problem of the follow-up service link after the user uses the Mini Program. After the user subscribes independently, the developer can send a corresponding service message for an unlimited time ; each message can be subscribed or unsubscribed separately.

Note: Authorize once, send one, if there are too many, it cannot be sent

Configure Subscription Template Messages

If the WeChat applet wants to connect to an independent online customer service system, in addition to using the applet message push interface, it can also embed a chat link in the form of webview embedding.

However, using the webview embedded form, when the user leaves the page, he will not receive the reply message from the customer service

Therefore, we need the customer service to reply to the message after the user leaves the chat page, and use the subscription template of the applet to notify.

Let's go to the background of the applet, open the subscription message, and choose a template.

Search in the public template library and select "Consultation Reply Notification"

Configure the fields, we need three fields, namely, "reply content", "reply time" and "respondent"

This will get the template ID, and we will send it through this template ID later

References to the code section

  <view class="listItem">
      <view class="right"><button type="primary" size="mini" bindtap="callKefu">在线咨询</button>
      </view>
    </view>
js部分。这里面就是拼接我的客服系统聊天界面链接，重要的是visitor_id参数部分，按照我的要求是   mini|商户ID|openid ，这样我在客服系统那里，好拿到openid去发送订阅消息

  //咨询店铺客服
  callKefu(){
    this.subReplyNotice();
     var url=app.globalData.apiUrl+"/chatIndex?kefu_id="+this.data.kefu_name+"&ent_id="+this.data.ent_id+"&visitor_name="+this.data.nickname+"&avator="+this.data.avatar+"&visitor_id=mini|"+this.data.ent_id+"|"+this.data.openid;
     wx.navigateTo({
      url: "/pages/index/kefu?url="+encodeURIComponent(url)
    })
  },
  //订阅回复通知
  subReplyNotice(){
    wx.requestSubscribeMessage({
      tmplIds: ['Hk0zWtbgl0aci6b0UIWSUBywYzaglNqkw0KhzkbEuN4'],
      success (res) {
        console.log(res)
        // res包含模板id，值包括'accept'、'reject'、'ban'、'filter'。
        // 'accept'表示用户同意订阅该条id对应的模板消息
        // 'reject'表示用户拒绝订阅该条id对应的模板消息
        // 'ban'表示已被后台封禁
        // 'filter'表示该模板因为模板标题同名被后台过滤。
      }
    })
  },
webview的嵌入页面 pages/index/kefu   

wxml部分

<!--pages/index/kefu.wxml-->
<view wx:if="{
      
      {url}}">
    <web-view  src="{
      
      {url}}"></web-view>
</view>
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(options.url);
    this.setData({
      url:decodeURIComponent(options.url),
    });
  },

Mini program comes with customer service component docking

First log in to the background of the applet
in the background of the applet ==> development management ==> development settings ==> server domain name part, configure your own domain name