在小程序中加入客服消息按钮有两种方法:
方法一、插入固定样式的客服消息按钮:
只需要在 WXML 代码中插入以下标签:

 <contact-button></contact-button>

效果如下图:


这种方法生成的客服消息按钮样式已经被固定,且颜色只能选择黑白两色,只能自定义按钮的尺寸大小。

方法二、插入自定义样式的客服消息按钮:
使用 button 组件的 open-type 属性,可以在小程序界面中插入自定义样式的客服消息按钮。

<button open-type='contact'>联系客服</button>

效果如下图:


使用这种方法,可以在 WXSS 中为按钮添加自定义样式。

收发客服消息:
微信为小程序提供了「微信公众平台客服功能」,已经绑定为客服的人员,可以直接打开客服功能页面(mpkf.weixin.qq.com)扫码登录,就能与小程序用户进行沟通。
1、绑定客服人员
首先,小程序管理员需要为小程序绑定客服人员,客服人员才能进入客服功能,与小程序用户进行沟通。
具体绑定方法是:
a、使用小程序帐户,登录至微信公众平台(mp.weixin.qq.com)。
b、点击左侧边栏的「客服消息」链接,进入「客服消息」功能模块。
c、点击右侧的「添加」按钮,并在弹出框中,输入客服人员个人微信号。可以添加多个客服人员的微信号。
d、确认添加,点击「确定」即可。
2、进入客服
添加完成后,小程序的客服人员可以使用自己的个人微信,扫码登录进入「微信公众平台客服功能」。
客服功能使用起来非常简单,就像是在用微信网页版一样。只要小程序的用户发起会话,客服人员就可以在客服功能中与用户进行沟通。

客服消息限制:
1、客服人员必须在用户发送消息后的48小时内回复用户,否则将无法回复该用户。
2、用户通过客服消息按钮进入会话并向小程序客服发送一条消息后,只允许客服回复5条消息,即用户发一条消息,客服针对此条消息只能回复5条信息,除非用户再次回复,则可再回复5条信息。

微信小程序内置在线客服相关推荐

  1. 微信小程序增加悬浮在线客服

    例如在index首页增加客服代码及一键拨打电话 1.index.wxss或者app.wxss文件里增加样式 .img-plus-style { height: 70rpx; width: 70rpx; ...

  2. aos动画库反向播放,pdf复制出现乱码,微信小程序底部栏联系客服

    ​少小多才学,平生志气高.别人怀宝剑,我有笔如刀. 记录一些遇到的问题- 本文大概3000字,阅读大概需要9分钟 ** 本文目录 一.pdf复制出现乱码问号问题 二.aos动画库反向播放问题 三.微信 ...

  3. 微信小程序判断服务器返回值,让微信小程序内置函数返回promise的方法

    Promise API const promisic = function (func) { return function (params = {}) { return new Promise((r ...

  4. 关于微信小程序云开发---实现客服自动回复图片例子

    关于微信小程序云开发-实现客服自动回复例子 微信自带的云开发功能使前端工程师可以独立的开发出一款小程序,微信自带的云开发. 首先和开发其他平台的项目一样先看官方文档. 微信小程序开放文档 一. 什么是 ...

  5. 微信小程序跳转到客服会话,将内容带到服务窗口并发送给客服(只是曲线救国)

    最近有需求是这样的:通过微信小程序里面带的客服会话功能,将用户选择的不适症状发送给客服.拿到需求我首先进行了分析. 发现接入客服不难,只需要将按钮给上,设置open-type="contac ...

  6. 微信小程序:收藏、客服、分享、加入购物车、图片放大预览

    微信小程序:收藏.客服.分享.加入购物车.图片放大预览 微信小程序包含功能 ·轮播 ·图片放大预览 ·收藏 ·客服 ·加入购物车 在goods_detail下的index.wxml写页面代码 < ...

  7. 微信小程序怎么接入多客服系统

    最近有很多运营人说,微信公众号越来越难做了,打开率和分享率呈下滑趋势,发文就掉粉,随着小程序的功能不断优化,很多运营人纷纷投入小程序的怀抱.小程序将在今年彻底爆发,更多创业者.流量主会进场厮杀.所以只 ...

  8. 微信小程序例子——打开微信小程序内置地图

    1.效果展示 2.关键代码 .wxml布局文件代码 打开地图 .js逻辑文件代码 Page({ openMap:function(){ wx.getLocation({ type: 'gcj02', ...

  9. 微信小程序悬浮可拖动客服组件

    写了一个微信小程序里面的悬浮可拖动的客服组件,下次可以直接使用了. movable-area 和movable-view 用法参考微信官方手册:https://developers.weixin.qq ...

  10. 微信小程序云函数处理客服消息

    上传配置 temp-cloud-callback-config.json 已经废弃 后续会推出新的方式    --此路不通了 [20190620更] 需开发者工具版本:现在最新版本是RC v1.02. ...

最新文章

  1. Paper2:Fast 3D Line Segment Detection From Unorganized Point Cloud
  2. 免费的私人代码托管(bitbucket) 和 常用git指令
  3. Apache下实现禁止目录浏览
  4. 模糊测试(fuzz testing)介绍(一)
  5. 【推荐】让你事半功倍的交互体验自查清单
  6. 十、散列表(Hash Table)
  7. 演练:在 Windows 窗体中承载 Windows Presentation Foundation 复合控件 【转载】
  8. java ee基础知识_Java EE:基础知识
  9. 2010年复旦MBA预审说明
  10. protobuf windows lib链接库生成
  11. 你或许不知道SDP 但它能改变IaaS安全现状 - 2017.09.05
  12. 前端知识点回顾——Javascript篇(三)
  13. 多时相地图瓦片简单设想
  14. 【麒麟操作系统】查看和关闭139、445端口的方法
  15. Mbps、Kbps、bps、kb、mb单位换算及区别
  16. 1、基于51单片机智能水杯系统设计
  17. 1063: 最大公约与最小公倍
  18. NTFS删除及恢复分析
  19. 103.107.189.XXX机房服务器linux和windows系统的区别:
  20. hive 语句执行顺序

热门文章

  1. 【无标题】互联网广告投放优势和前景
  2. 为什么下载eclipse很慢很慢
  3. C语言基础丨(六)程序结构——顺序结构【1】
  4. 程序读取斗罗大陆热点词汇热度
  5. java8 treemap 排序_TreeSet 和TreeMap 排序
  6. 苹果铃声制作(流水是操作记录)
  7. 汉字转【pinyin】
  8. 有密码的压缩包怎么解密
  9. 通信线路工程验收规范_老杨一建通信学堂通信线路工程施工技术
  10. 1.3.9 快速生成树配置