小程序客服系統(tǒng)

2023-08-26 10:37 作者:雪狼2333 0人讀過 | 我要投稿

微信小程序?qū)佑袃煞N方式：webview組件嵌入頁面，小程序客服組件對接消息

使用webview組件嵌入聊天頁面形式。這種形式更加的靈活可控，可以傳遞更多的信息給到客服，例如可以把用戶的手機號，所在頁面的產(chǎn)品信息等帶入進來。

嵌入頁面形式

增加展示點擊按鈕，并且獲取到昵稱頭像，嵌入聊天頁面。

wxml部分

<view class="page-body"> ?<button ?open-type="getUserInfo" bindgetuserinfo="getPerson">聯(lián)系客服</button> ?<view wx:if="{{url}}"> ? ?<web-view ?src="{{url}}"></web-view> ?</view> </view>js部分 Page({ ?data: { ? ?url:"" ?}, ?//按鈕回調(diào)的方法 ?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 () { ?}, })

?

離線通知

如果需要離線通知，需要按照下面的方式對接
利用小程序的訂閱消息，可以在訪客離開頁面后，也能收取通知

小程序的訂閱消息，分為一次性訂閱消息和長期訂閱消息，長期訂閱消息只對政務民生、醫(yī)療、交通、金融、教育等線下公共服務開放，一般情況下我們用不了。

一次性訂閱消息用于解決用戶使用小程序后，后續(xù)服務環(huán)節(jié)的通知問題。用戶自主訂閱后，開發(fā)者可不限時間地下發(fā)一條對應的服務消息；每條消息可單獨訂閱或退訂。

注意：授權一次，發(fā)送一條，多了發(fā)不了

配置訂閱模板消息

微信小程序想要對接獨立在線客服系統(tǒng)，除了使用小程序消息推送接口外，還可以使用webview嵌入的形式嵌入聊天鏈接。

但是，使用webview嵌入的形式，當用戶離開頁面以后，就收不到客服回復的消息了

?

所以，我們需要當用戶離開聊天頁面后，客服回復消息，使用小程序的訂閱模板來進行通知。

我們前往小程序后臺，去開啟一下訂閱消息，并且選用一個模板。

?

在公共模板庫里搜索一下，選用“咨詢回復通知”

?

?配置一下字段，我們就需要三個字段就可以了，分別是，“回復內(nèi)容”? “回復時間”? “回復者”

?

這樣會得到模板ID，后面我們會通過這個模板ID進行發(fā)送

代碼部分的參考

?<view class="listItem"> ? ? ?<view class="right"><button type="primary" size="mini" bindtap="callKefu">在線咨詢</button> ? ? ?</view> ? ?</view>js部分。這里面就是拼接我的客服系統(tǒng)聊天界面鏈接，重要的是visitor_id參數(shù)部分，按照我的要求是 ? mini|商戶ID|openid ，這樣我在客服系統(tǒng)那里，好拿到openid去發(fā)送訂閱消息 ?//咨詢店鋪客服 ?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部分 <view wx:if="{{url}}"> ? ?<web-view ?src="{{url}}"></web-view> </view> ?/** ? * 生命周期函數(shù)--監(jiān)聽頁面加載 ? */ ?onLoad(options) { ? ?console.log(options.url); ? ?this.setData({ ? ? ?url:decodeURIComponent(options.url), ? ?}); ?},