【每周一个小技巧】如何自定义客服、生活号组件的样式

简介: 【每周一个小技巧】如何自定义客服、生活号组件的样式

开发过客服、生活号的小伙伴都知道,客服、生活号等组件的样式是不太符合我们的业务场景的。
结尾有彩蛋。
比如:

效果图长这样,存在默认的icon,而我们的业务里可能是某个弹窗里有个联系客服。


那么如何自定义样式:
其实也很简单,使用view包裹客服、生活号组件,view写宽高样式,可内嵌图片等,客服、生活号组件只负责在view的最上层让用户点击触发即可。实现方案如下:

<view class="contact-service">
  联系客服
  <contact-button tnt-inst-id="" scene="" size="50" icon="" />
</view>
.contact-service {
  width: 600rpx;
  height: 96rpx;
  display: flex;
  justify-content:  center;
  align-items: center;
  color: #FFF;
  background: #00cc88;
  border-radius: 48rpx;
  font-size: 32rpx;
  margin: 32rpx auto;
}

.contact-service contact-button {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

效果图如下:点击后会跳转官方客服页面。


lifestyle生活号组件同理。
以上就是本周分享的小技巧,这是我完全重新编辑的第三遍文章,第一次写了一个多小时,内容很详细,因为登录态失效,全没了,心态崩了。第二次也是登录态失效,这是第三次,就随便写了,@夏乔,赶紧安排个草稿箱功能吧。

同步个彩蛋,打开客服也可以使用API的方式,这样任意样式都可以点击后触发:

JavaScript

my.ap.openCustomerService({
tntInstId: 'SEIBRDCN',
scene: 'SCE00198760',
alipayCardNo: '',
extInfo: '',
complete: (res) => {
console.log(res)
}
});


目录
相关文章
|
自然语言处理
小技巧 - 淘宝怎么联系人工客服?
小技巧 - 淘宝怎么联系人工客服?
144 0
小技巧 - 淘宝怎么联系人工客服?
|
18天前
|
数据采集 监控 测试技术
大型IM稳定性监测实践:手Q客户端性能防劣化系统的建设之路
本文以iOS端为例,详细分享了手 Q 客户端性能防劣化系统从0到1的构建之路,相信对业界和IM开发者们都有较高的借鉴意义。
45 2
|
16天前
|
前端开发 网络协议
Netty实战巅峰:从零构建高性能IM即时通讯系统,解锁并发通信新境界
【8月更文挑战第3天】Netty是一款高性能、异步事件驱动的网络框架,适用于开发高并发网络应用,如即时通讯(IM)系统。本文将指导你利用Netty从零构建高性能IM程序,介绍Netty基础及服务器/客户端设计。服务器端使用`ServerBootstrap`启动,客户端通过`Bootstrap`连接服务器。示例展示了简单的服务器启动过程。通过深入学习,可进一步实现用户认证等功能,打造出更完善的IM系统。
41 1
|
1月前
|
存储 SQL 测试技术
基于SpringBoot+Vue交通管理在线服务系统的开发(源码+部署说明+演示视频+源码介绍+lw)(2)
基于SpringBoot+Vue交通管理在线服务系统的开发(源码+部署说明+演示视频+源码介绍+lw)
91 2
|
1月前
|
JavaScript Java 关系型数据库
基于SpringBoot+Vue交通管理在线服务系统的开发(源码+部署说明+演示视频+源码介绍+lw)(1)
基于SpringBoot+Vue交通管理在线服务系统的开发(源码+部署说明+演示视频+源码介绍+lw)
93 1
|
1月前
|
JavaScript Java 关系型数据库
基于SpringBoot+Vue交通管理在线服务系统的开发(源码+部署说明+演示视频+源码介绍)(1)
基于SpringBoot+Vue交通管理在线服务系统的开发(源码+部署说明+演示视频+源码介绍)
18 0
基于SpringBoot+Vue交通管理在线服务系统的开发(源码+部署说明+演示视频+源码介绍)(1)
|
2月前
|
人工智能 自然语言处理 搜索推荐
人工智能在智能客服系统中的情感识别与应对
人工智能在智能客服系统中的情感识别与应对
|
1月前
|
安全 搜索推荐 机器人
跨境客服系统精选:提升国际客户服务效率
Zoho SalesIQ是一款理想的跨境客服系统,提供多语言支持、实时聊天、24/7自动化服务、多渠道整合和强大的数据安全措施。它助企业提升客户满意度,支持32种语言,具有实时访客追踪和聊天机器人功能。通过与Zoho CRM集成,实现客户关系高效管理。其灵活定价适合不同规模企业,用户友好的界面和移动端支持提高客服效率。实际案例显示,使用Zoho SalesIQ可显著提升客服效率和客户满意度,促进业务增长。
30 0
|
1月前
|
前端开发
会员系统02--,后台管理系统,包含网站运营,统计分析,用户中心,财务管理,资金明细,系统管理,参数配置,后台管理系统可以观看配置资料,广告位的相关资料,客服工单最主要是客户反馈给我们的问题,登录统计
会员系统02--,后台管理系统,包含网站运营,统计分析,用户中心,财务管理,资金明细,系统管理,参数配置,后台管理系统可以观看配置资料,广告位的相关资料,客服工单最主要是客户反馈给我们的问题,登录统计
|
1月前
|
存储 SQL 测试技术
基于SpringBoot+Vue交通管理在线服务系统的开发(源码+部署说明+演示视频+源码介绍)(2)
基于SpringBoot+Vue交通管理在线服务系统的开发(源码+部署说明+演示视频+源码介绍)
18 0

热门文章

最新文章