微信小程序添加悬浮在线客服会话按钮
微信小程序添加悬浮在线客服会话按钮
ytkah
发布于 2018-09-28 15:03:08
发布于 2018-09-28 15:03:08
代码可运行
运行总次数：0
代码可运行
微信为小程序提供客服消息能力，小程序用户可以方便快捷地与小程序服务提供方进行沟通，并且已经做成了组件的形式，直接就可以调用。客服会话按钮，用于在页面上显示一个客服会话按钮，用户点击该按钮后会进入客服会话。那么如何自定义成悬浮客服会话按钮呢？随Z5Win一起来看看
1.我们可以定义contact-button的样式，加一个class。这个客服组件可以放在一个固定模板里，方便每个页面都调用到。
<view>
<contact-button class="img-plus-style zindex100 yc"></contact-button>
<image src="../../images/kefu.png" class="img-plus-style"></image>
</view>2.在app.wxss或其他文件里增加样式
.img-plus-style {
height: 70rpx;
width: 70rpx;
position: fixed;
bottom: 200rpx;
right: 13rpx;
opacity: 0.7
}
.zindex100{z-index: 100}
.yc{opacity: 0}3.上传自定义的客服图标
4.当然你也可以调用拨打电话的功能，只要在图片里加一个bindtap=”calling”属性
<view>
<contact-button class="img-plus-style zindex100 yc"></contact-button>
<image src="../../images/kefu.png" class="img-plus-style" bindtap="calling"></image>
</view>然后再定义一个calling的js function，比如在tel.js文件里
calling: function () {
wx.makePhoneCall({
phoneNumber: ‘10086’,
})
}微信小程序添加悬浮在线客服会话按钮就实现了，感兴趣的朋友可以试试
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-08-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
