微信小程序如何实现在线客服功能

其实只需要解决2个问题

  • 第一步，在微信小程序中添加联系在线客服按钮
  • 第二步，接入在线客服功能，设置【自动/人工/转人工】回复等

一、添加小程序客服按钮

① 在小程序中添加客服按钮功能，点此参考官方文档（开发者通过一行代码，实现客服功能。）

② 常见的客服按钮形式有2种：

1.初始样式的客服消息按钮（多以文字“联系客服”形式出现）

2.自定义图片样式的客服消息按钮（客服消息按钮与整体页面更和谐）

无论使用哪一种方法，用户都可以通过点击客服消息按钮，进入聊天界面，与你的小程序客服直接沟通。

小程序客服消息的2个会话入口

① 小程序内：在小程序内与客服会话，给小程序发消息

② 小程序外：已使用过的小程序客服消息，会显示在【小程序客服消息】内，用户可以直接查看以及回复。

小程序客服功能的使用限制

① 用户第一次进入小程序，需主动给小程序客服发消息，客服才能给用户发消息

② 时间条数限制：客服48小时内可向用户发送消息，且消息的条数不能连续超过5条

二、小程序在线客服功能接入

① 使用官方自带的公众平台网页版的客服工具 / 客服小助手 只能满足基本的需求

② 自研或接入第三方在线客服系统 （无需安装，随时沟通，功能丰富）

这里以专注于微信生态的客服系统——芝麻小客服为例讲解

01.自动回复：关键词回复，收到消息回复，系统提示等

02.转人工客服：提高接待效率

03.群发消息：客服消息群发，提升留存，用户活跃度

04.客服管理：添加客服，客服组，邀请用户评价等

05.用户管理：标签管理（标记意向、喜好风格、消费能力等），自动打标签，会话分类

06.客服数据数据：查看客服工作量（当天接待量，周，月，年对比，客服考勤，工作效率等）

07.消息推送：浏览器/手机 ，消息声音提醒，推送模板通知，提醒用户消息来访，用户来源，不漏消息！）

08.多客服智能接待：按照“分配率”等规则分配好客服给用户

09.快捷回复：将常见咨询的回答进行设置分组等，客服可一键发送文字、图片、图片，小程序卡片等多种形式，咨询高峰期也能轻松应对，减少复制粘贴回复。

10.统一后台：同一个后台 手机或电脑，处理小程序 / 公众号 / H5等多渠道的客服消息

更多功能，大家可以去尝试下。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序中添加客服按钮contact-button功能

    小程序的客服系统,是微信做的非常成功的一个功能,开发者可以很方便的通过一行代码,就可实现客服功能. 1. 普通客服按钮添加 <button open-type='contact' session-from=''>客服-联系我们</button> 2. 悬浮客服按钮添加,图片自定义 大家看地图的有个客服图片图片资源.大家去iconfont 网站去找一个就可以了 index.wxml <button class="kf_button" open-type=&q

  • 微信小程序中悬浮窗功能的实现代码

    问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view,而是view. 这是简化的代码结构: index.wxml: <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome"

  • 基于PHP实现微信小程序客服消息功能

    项目说明: 本项目是一个简单微信小程序客服消息类,实现客服消息相关功能.官方给的php示例有误,这里就不再吐槽了. 本示例是采用开发者服务器,没有采用云调用的形式. 官方文档: 客服消息指南 客服消息服务端 适用场景 客户消息流程图 使用步骤 1.开启客服消息 https://mp.weixin.qq.com/wxam... 登录-开发-开发设置-消息推送 []( https://raw.githubusercontent... 点击"启动" []( https://raw.githu

  • 微信小程序组件 contact-button（客服会话按钮）详解及实例代码

    微信小程序组件 contact-button contact-button 客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话. 属性名 类型 默认值 说明 size Number 18 会话按钮大小,有效值 18-27,单位:px type String default-dark 会话按钮的样式类型,有效值 default-dark, default-light session-from String   用户从该按钮进入会话时,开发者将收到带上本参数的事件推送.本

  • 微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能

    看了很多帖子,但是效果都不是很好.还是找微信小程序官方文档,自己写比较方便.自己动手丰衣足食!话不多说,上代码! 时空传送 先来个效果图 html <block wx:for='{{trendsList}}' wx:key='index'> <view class="box"> <view class="textFour_box {{item.seeMore?'three':''}}">{{item.text}}</view

  • 微信小程序后台持续定位功能使用详解

    微信小程序后台持续定位功能使用详解

    微信小程序团队在7月30日更新了 基础库 2.8.0 其中新添加了小程序后台持续定位功能和联系定位的接口 从上到下分别是 1.wx.onLocationChange//监听位置实时变化 2.wx.stopLocationUpdate//关闭监听实时位置变化,前后台都停止消息接收 3.wx.startLocationUpdate//开启小程序进入前台时接收位置消息 4.wx.startLocationUpdataBackground//开启小程序进入前后台时均接收位置消息 详细信息可查看https

  • 微信小程序在线客服自动回复功能(基于node)

    微信小程序在线客服自动回复功能(基于node)

    前言 我们知道H5页面经常需要将用户导流到APP,通过下载安装包或者跳转至应用宝市场/Appstore等方式进行导流.但是由于小程序嵌套webview时需要校验域名,因此跳转到第三方应用市场和Appstroe无法实现导流.那怎么办呢? 只能说道高一尺魔高一丈,看看微博小程序是怎么导流的: 曲线救国的方式,利用小程序的在线功能可以打开H5的方式,去进行下载引导. 于是,就引出了这次文档的主题,小程序在线客服自动回复功能. 阅读本文档之前,最好已经了解过小程序客服信息官方的相关文档: 客服消息使用指

  • 微信小程序自动客服功能

    微信小程序自动客服功能

    微信小程序最近比较火爆,所以抽空做了个客服机器人的小程序,来回答之前坦克游戏中的常见问题.当然这个小程序也很容易修改为其他类型的自动客服,需要做的仅仅是在olami平台加上相应的问题和答案. 整个小程序界面包含2个部分,一部分用于显示回答,一部分为输入框.小程序的核心就是向olami服务器发送http请求,然后处理结果并显示出来.olami接口的详细使用方法可以参考置顶的两篇博客.处理输入的代码如下: bindInput: function (e) { var that = this; var

  • 微信小程序如何实现在线客服功能

    微信小程序如何实现在线客服功能

    其实只需要解决2个问题 第一步,在微信小程序中添加联系在线客服按钮 第二步,接入在线客服功能,设置[自动/人工/转人工]回复等 一.添加小程序客服按钮 ① 在小程序中添加客服按钮功能,点此参考官方文档(开发者通过一行代码,实现客服功能.) ② 常见的客服按钮形式有2种: 1.初始样式的客服消息按钮(多以文字"联系客服"形式出现) 2.自定义图片样式的客服消息按钮(客服消息按钮与整体页面更和谐) 无论使用哪一种方法,用户都可以通过点击客服消息按钮,进入聊天界面,与你的小程序客服直接沟通.

  • 微信小程序实现简单input正则表达式验证功能示例

    微信小程序实现简单input正则表达式验证功能示例

    本文实例讲述了微信小程序实现简单input正则表达式验证功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 <input placeholder="输入内容" bindinput="check"></input> <view>输入结果:{{result}}</view> index.js文件 Page({ data:{ result:'' }, check:function(e

  • 微信小程序实现的picker多级联动功能示例

    微信小程序实现的picker多级联动功能示例

    本文实例讲述了微信小程序实现的picker多级联动功能.分享给大家供大家参考,具体如下: wxml部分: <picker mode="multiSelector" bindchange="bindjobcatchange" bindcolumnchange="bingjobcatcolumnchange" value="{{multiIndex}}" range="{{job_cat_list}}"

  • 微信小程序详解如何实现付款功能

    微信小程序详解如何实现付款功能

    目录 1 支付场景 2 创建数据源 2.1 商品数据源 2.2 订单数据源 3 创建连接器 4 创建应用 5 功能开发 5.1 首页 5.2 商品详情页 5.3 订单页 总结 1 支付场景 我们梳理一下支付场景是什么样子的,首先可以浏览商品,然后在商品的详情页里进行结算.结算的主要目的是生成订单,订单生成好之后就可以进行支付. 支付其实是先向微信支付提交一个在线订单,订单提交成功之后就可以调用支付接口来拉起支付界面. 拉起支付界面之后我们需要按照提示的金额进行付费,付费成功后我们更新一下订单的状

  • 微信小程序之发送短信倒计时功能

    微信小程序之发送短信倒计时功能

    点击后 代码 <form bindsubmit="formSubmit" bindreset="formReset"> <view class="fidpas"> <input type="number" class="fidpas_inp"placeholder-class="lgin_place" placeholder="请输入手机号&quo

  • 微信小程序实现多个按钮toggle功能的实例

    微信小程序实现多个按钮toggle功能的实例

    微信小程序实现多个按钮toggle功能的实例 如下图所示,实现该按钮toggle功能. 百度上很多都是只设置一个按钮的toggle,所以我现在来稍微总结下:多个按钮如何实现自身的toggle功能. 原理: 1,列表展示的时候,我们会用wx:for 来循环数据,那么我们就会得到相应的当前的第几个数据(即 wx:key="index") 2.在每一个数据里面添加一个toggle的属性,toggle=false  则不展示, 3.设置一个点击方法,获取当前按钮所在的是第几个数据,然后将相应的

  • 微信小程序获取手机号授权用户登录功能

    微信小程序获取手机号授权用户登录功能

    小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无效).将button中的open-type="getPhoneNumber",并且绑定bindgetphonenumber事件获取回调. <span style="font-size:14px;"><button open-type="get

  • 微信小程序使用audio组件播放音乐功能示例【附源码下载】

    微信小程序使用audio组件播放音乐功能示例【附源码下载】

    本文实例讲述了微信小程序使用audio组件播放音乐功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 复制代码 代码如下: <audio src="{{audioSrc}}" poster="{{audioPoster}}" name="{{audioName}}" author="{{audioAuthor}}" controls></audio> ② ind

  • 微信小程序使用video组件播放视频功能示例【附源码下载】

    微信小程序使用video组件播放视频功能示例【附源码下载】

    本文实例讲述了微信小程序使用video组件播放视频功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 复制代码 代码如下: <video src="../../pages/video/movie.mp4" binderror="videoErrorCallback"></video> ② index.js Page({ data:{ // text:"这是一个页面" }, vide

随机推荐