Sistema de servicio al cliente del miniprograma WeChat: dos formularios: integrado en la página para brindar más información y formulario de componente autónomo

Hay dos formas de conectar subprogramas WeChat: el componente de vista web está incrustado en la página y el componente de servicio al cliente del subprograma está conectado al mensaje.

Utilice el componente webview para incrustar el formulario de la página de chat. Este formulario es más flexible y controlable y puede transmitir más información al servicio de atención al cliente, por ejemplo, puede introducir el número de teléfono móvil del usuario, información del producto en la página, etc.

formulario de página incrustado

Se agregó un botón de clic en pantalla y se obtuvo el avatar de apodo incrustado en la página de chat.

parte wxml

<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 () {

  },
})

notificación fuera de línea

Si necesita notificaciones sin conexión, debe utilizar el mensaje de suscripción del subprograma de la siguiente manera y también puede recibir notificaciones después de que el visitante abandone la página.

Hay mensajes de suscripción únicos y mensajes de suscripción a largo plazo en el Mini Programa. Los mensajes de suscripción a largo plazo solo están abiertos a servicios públicos fuera de línea, como asuntos gubernamentales y medios de vida de las personas, atención médica, transporte, finanzas y educación. En general, no podemos usarlos.

El mensaje de suscripción única se utiliza para resolver el problema de notificación del enlace del servicio de seguimiento después de que el usuario utiliza el Mini Programa. Después de que el usuario se suscribe de forma independiente, el desarrollador puede enviar un mensaje de servicio correspondiente por tiempo ilimitado ; cada mensaje se puede suscribir o cancelar por separado.

Nota: Autorizar una vez, enviar uno, si hay demasiados no se puede enviar

Configurar mensajes de plantilla de suscripción

Si el subprograma WeChat desea conectarse a un sistema independiente de servicio al cliente en línea, además de utilizar la interfaz de envío de mensajes del subprograma, también puede incrustar un enlace de chat en forma de incrustación de vista web.

Sin embargo, al utilizar el formulario integrado de vista web, cuando el usuario abandona la página, no recibirá el mensaje de respuesta del servicio de atención al cliente.

Por lo tanto, necesitamos que el servicio de atención al cliente responda al mensaje después de que el usuario abandone la página de chat y utilice la plantilla de suscripción del subprograma para notificar.

Vayamos al fondo del subprograma, abramos el mensaje de suscripción y elijamos una plantilla.

Busque en la biblioteca de plantillas públicas y seleccione "Notificación de respuesta a consulta"

Configure los campos, necesitamos tres campos, a saber, "contenido de la respuesta", "tiempo de respuesta" y "encuestado".

Esto obtendrá el ID de la plantilla y lo enviaremos a través de este ID de plantilla más tarde.

Referencias a la sección del código.

  <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),
    });
  },

El mini programa viene con acoplamiento de componentes de servicio al cliente

Primero inicie sesión en el fondo del subprograma
en el fondo del subprograma ==> gestión de desarrollo ==> configuración de desarrollo ==> parte del nombre de dominio del servidor, configure su propio nombre de dominio