先给大家看一下效果图：

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

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

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

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

效果如右图：

属性值说明： 

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

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;
}