首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >微信小程序添加悬浮在线客服会话按钮

微信小程序添加悬浮在线客服会话按钮

作者头像
ytkah
发布于 2018-09-28 07:03:08
发布于 2018-09-28 07:03:08
3.8K01
代码可运行
举报
文章被收录于专栏:ytkahytkah
运行总次数:1
代码可运行

  微信为小程序提供客服消息能力,小程序用户可以方便快捷地与小程序服务提供方进行沟通,并且已经做成了组件的形式,直接就可以调用。客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话。那么如何自定义成悬浮客服会话按钮呢?随Z5Win一起来看看

1.我们可以定义contact-button的样式,加一个class。这个客服组件可以放在一个固定模板里,方便每个页面都调用到。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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或其他文件里增加样式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.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”属性

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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文件里

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
calling: function () {
wx.makePhoneCall({
phoneNumber:10086,
})
}

微信小程序添加悬浮在线客服会话按钮就实现了,感兴趣的朋友可以试试

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-08-27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
基于微信小程序云开发(校园许愿墙app)妄想替代学校的表白墙
随着移动端的不断发展,人们大部分的办公及生活应用都开始趋向于移动端。然而在2017年“微信之父”张小龙带领团队,开发了一款叫做微信小程序的东西,它的出现打破了人们认识移动端的隔膜,由以前的需要先下载app然后在开始工作的老式模式,逐渐的趋向于小程序app(无需下载)的形式。
淼学派对
2022/11/20
1.8K0
基于微信小程序云开发(校园许愿墙app)妄想替代学校的表白墙
微信小程序上传图片和文件
要有遥不可及的梦想,也要有脚踏实地的本事。———– Grapefruit.Banuit Gang(香柚帮)
全栈程序员站长
2022/09/07
2.5K0
微信小程序地图实时定位_小程序获取当前位置定位信息
因为小程序更新了获取地理位置API接口,需要先在app.json中配置一下permission字段 ,不然会报微信小程序getLocation 需要在app.json中声明permission字段
全栈程序员站长
2022/11/10
4.9K0
微信小程序地图实时定位_小程序获取当前位置定位信息
微信小程序客服分享悬浮按钮代码
以下代码可用于在微信小程序中的客服咨询与用户分享操作。按钮通过设置 plain='true' 来使其显示为简单的图标按钮,按钮的位置和样式通过 CSS 进行了详细的定制,确保在不同屏幕大小和设备上都能良好显示和使用,以下为参考代码。
oszz资源分享
2024/09/26
4430
微信小程序button组件样式
需要使用微信小程序button组件的open-type来实现授权之类的操作时,发现样式并不是自己想要的,然后改起来也并不是很方便,下面让我们一起看一下:
韦弦zhy
2018/09/11
13.7K0
微信小程序button组件样式
小程序中客服的实现加页面UI
这里需要注意如果你的按钮画出来不是圆形的多半是没有合理调整样式,需要样式穿透!important
用户6493868
2022/03/07
6220
微信小程序|页面动态更新数据
每一个小程序都是由很多的数据构成的,这些信息数据构成页面内容再通过视图展现给大家。大家平时所使用的微信小程序都是实时更新的将最新的数据内容分享给大家。如果没有进行数据的更新,它可能就会被大众所淘汰。那么如何对小程序的数据进行页面动态更新呢?
算法与编程之美
2020/04/28
8.4K0
WeChat 从一个简单的“Welcome”页面来开启小程序之旅吧
本次的系列博文的知识点讲解和代码,主要是来自于 七月老师 的书籍《微信小程序开发:入门与实践》,由个人总结并编写,关于更多微信小程序开发中的各项技能,以及常见问题的解决方案,还请大家购买书籍进行学习实践,该系列博文的发布已得到七月老师的授权许可
Nian糕
2018/08/21
1.3K0
WeChat 从一个简单的“Welcome”页面来开启小程序之旅吧
微信小程序编写课程笔记
app.json用 对象:字符串数组 储存 用户可能访问的路径。(注意是相对于app.json这个文件的路径。)
OliverHan
2023/02/27
7920
微信小程序编写课程笔记
基于微信小程序云开(统计学生信息并导出excel)
一、微信小程序是什么? 微信小程序是一种不需要下载安装即可使用的应用,它实现了应用的随开随用,用户只需要用微信扫一扫或者通过微信搜一下即可打开应用,使用完即可关闭,还可以把小程序添加到桌面,真正的做到了便捷方便,用完就走。
淼学派对
2022/11/20
1.1K0
基于微信小程序云开(统计学生信息并导出excel)
微信小程序向左滑动删除操作(类仿微信、QQ)
上一个小程序的项目里面做过这个功能,当时没有记录下来,今天特意做了一个小的demo放在了github上面,下次在开发中遇到的话就可以直接拿下来代码复用了。效果很简单,类似于微信扣扣删除聊天栏的效果,想左滑动,出现删除按钮,点击即可删除。
王小婷
2018/12/24
3.7K1
小程序开发总结04 - 特殊样式处理
微信小程序中的button组件有特定的css,背景可用background:none;去掉,但边框直接用border:none;无法去除
CS逍遥剑仙
2018/06/23
1.1K0
小程序开发总结04 - 特殊样式处理
微信小程序实战--集阅读与电影于一体的小程序项目(一)
真正的数据肯定不可能像上面那样写在wxml文件里面,而是从服务器加载的数据,下面模拟从服务器加载数据。
zhang_derek
2018/08/30
1.2K0
微信小程序实战--集阅读与电影于一体的小程序项目(一)
微信小程序(逻辑层的全部知识点)保姆级讲解
小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。
淼学派对
2022/11/20
1.4K0
微信小程序(逻辑层的全部知识点)保姆级讲解
小程序跳转公众号的方法
随着小程序不断的发展,现在个人的小程序也开放了很多功能了,个人小程序直接打开公众号链接。在群里看到的一款小程序,点击可以直接阅读文章了,所以琢磨了一下,写了一些源码。
王小婷
2020/11/30
5.6K0
基于微信小程序云开(统计学生信息并导出excel)3.0版
一、微信小程序是什么? 微信小程序是一种不需要下载安装即可使用的应用,它实现了应用的随开随用,用户只需要用微信扫一扫或者通过微信搜一下即可打开应用,使用完即可关闭,还可以把小程序添加到桌面,真正的做到了便捷方便,用完就走。
淼学派对
2022/11/20
7550
基于微信小程序云开(统计学生信息并导出excel)3.0版
使用uni-app开发微信小程序之登录模块
从微信小程序官方发布的公告中我们可获知:小程序体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败,需使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作:
wfaceboss
2019/04/08
5.8K1
使用uni-app开发微信小程序之登录模块
【微信小程序】welcome页面
app.js、app.json和app.wxss。一个小程序项目必须有这3个描述App的文件,它们必须放在应用程序的根目录下,否则小程序会提示找不到app.json文件。
颜颜yan_
2022/12/01
9750
【微信小程序】welcome页面
小程序商品规格属性界面布局,实现每种属性选择一个
kiki.
2022/09/29
1.1K0
小程序商品规格属性界面布局,实现每种属性选择一个
小程序模板语法样式与页面配置
在 data 中定义数据,在 WXML 中使用数据。使用Mustache{{}}语法:
timerring
2023/06/09
7910
小程序模板语法样式与页面配置
推荐阅读
相关推荐
基于微信小程序云开发(校园许愿墙app)妄想替代学校的表白墙
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档