微信為小程序提供客服消息能力，小程序用戶可以方便快捷地與小程序服務提供方進行溝通，並且已經做成了組件的形式，直接就可以調用。客服會話按鈕，用於在頁面上顯示一個客服會話按鈕，用戶點擊該按鈕後會進入客服會話。那麽如何自定義成懸浮客服會話按鈕呢？隨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’,
})
}

微信小程序添加懸浮在線客服會話按鈕就實現了，感興趣的朋友可以試試

微信小程序添加懸浮在線客服會話按鈕