admin管理员组

文章数量:1530039

先给大家看一下效果图：

一、 登录小程序后台添加客服人员

 二、在.wxml页面添加contact客服代码

1、第一种方式：使用<contact-button>按钮，缺点：不能自定义图标，官方自带的太丑

<contact-button class='cBtn' type="default-dark" size="20" session-from="weapp">
  联系商家
</contact-button>

效果如右图：

属性值说明： 

属性名类型默认值说明
sizeNumber18会话按钮大小，有效值 18-27，单位：px
typeStringdefault-dark会话按钮的样式类型
session-fromString 用户从该按钮进入会话时，开发者将收到带上本参数的事件推送。本参数可用于区分用户进入客服会话的来源。

type 有效值：

值说明
default-dark 
default-light 

2、第二种方式： 使用<button>按钮，优点：可自定义图标

 <button class="none-btn" open-type="contact" session-from="weapp" hover-class="btn-hover">
   <my-icon my-class="my-icon" type="lianxikefu" size="20" color="#90D8FF" />联系商家
 </button>

效果如右图：

下面提供一下.none-btn的代码，用于去掉按钮的背景和边框

/*透明按钮*/
.none-btn {
  height: 50rpx;
  line-height: 50rpx;
  border: none;
  background: none;
  outline: none;
  border-style: none;
  font-size: 24rpx;
  color: #6d6d6d;
}

.none-btn::after {
  border: none;
}

 

本文标签： 在线客服功能程序微信小button

版权声明：本文标题：微信小程序使用contact-button调用在线客服聊天功能 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1726641392a1079683.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。