點擊下面圖片看實例Demo↓
也可以刪掉不要的內容，只留To Top按鈕做成點選返回頂部功能。
在下方購買取得下載碼，輸入解鎖下載：
出售的是使用 Elementor Pro (點擊免費下載) 製作的Popups 線上客戶側邊欄網站版型，透過Elementor導入到網站使用。線上客服側邊欄非常重要，高頻展示催促客戶快速聯絡我們以提高轉換率。帶點擊返回頂部功能，提高用戶體驗，居家旅行，建站必備！
市面上的客服插件已經很不錯，例如我們出售的Chaty Pro客服插件已經能滿足絕大部分人需求。可是插件也有不足：1- 影響速度，普遍增加180~300 kb程式碼，含js影響渲染；2- 可自訂程度不高，完美主義者心結。
Elementor Pro現在自帶 浮動按鈕功能，可線上匯入客服側邊欄板塊。目前只有Key啟動官方版本才能使用，自訂程度不高，很多限制。支援的內容也很少，例如不支援微信二維碼圖片。迪亞莫覺得是個雞肋的存在，對小白來說有點幫助，對完美主義者來說食之無味。
小迪我有強迫症，加上是完美主義者，所以我自己動手只用 Elementor Pro 製作了幾個客服側邊欄Popups，響應式、速度快、自訂程度高、支援微信二維碼，完勝Floating Button。
Tips: 只用Elementor Pro + 自訂程式碼製作，不需要其它插件。網站必須安裝使用Elementor Pro，否則側邊欄無法使用。購買前請先了解清楚是否適用。每個樣式需要另外購買下載碼！
點擊查看客服側邊欄實例，暫時只有幾個樣式，後期會不斷增加。可使用瀏覽器F12開發者工具查看手提端、平板端、手機端顯示效果。圖示以及按鈕的形狀、顏色、大小、間距、文字內容、背景色等可自訂。
樣式1因為設計原因所以微信客服沒放二維碼圖片，只放超連結。超連結欄你可以插入二維碼圖片網址或設定點擊彈出Popup，裡面放二維碼圖片。請釋放想像力。
關於手機端響應式：
所有樣式手機端都是下圖效果，橫著固定浮動在頁面最底部，這種顯示效果轉換率最高，最實用，需要給手機端footer設置 內邊距底部：70px； ， 底部留出大約70px空間給客服欄。
手機端也可以改成跟電腦端一樣右側懸顯示，把自訂程式碼裡面單獨控製手機端樣式的CSS程式碼刪掉，再設定容器裡面元素上下排列右側對齊就行。
關於價格：
製作這些側邊欄花費迪亞莫具大時間精力，還要提供售後解決客戶遇到的問題，以我們接單每小時價格算的話至少價值幾千元！
別家也有賣這個東西，可是美觀性、實用性、可自訂程度各方面不如我們，對方賣38元。我們價格很有良心，VIP購買還有折扣。
線上客服側邊欄下載購買條款
虛擬產品具有可複製性，一經售出概不退款，詳情請移步服務條款。請先登入後再購買，喜歡哪個樣式購買哪一個，購買取得下載碼，輸入對應樣式密碼區域點「解鎖」即可下載。
迪亞莫為購買用戶提供售後服務，插件使用過程有任何疑問請在下方評論留言，有問必答。
安裝/ 使用方法
先按下方操作導入，啟動側邊欄，讓它在前端顯示出來，然後再去調整位置和內容等。如果你一開始就調，到時候前端顯示異常不好排查哪裡出錯。
需要先設定下Elementor，在Elementor > 「設定」 > 「特性」設定裡面啟用下圖2個功能。啟用後能提升網站速度以及功能，我們建站都啟用這2個設定。
導入模板方法：
1- 進入後台Elmentor「模板」 裡面的「Popups」板塊。
2- 點選頂部的「匯入模板」按鈕，選擇下載的模板，上傳購買下載的文件，依步驟匯入。
3- 使用Elementor 編輯剛才匯入的Popup模板，使用Elementor 編輯。
4- 點選「發布」 按鈕隔壁的箭頭，點選「Display Conditions」。
點選「Add Condition」設定客服側邊欄顯示/生效範圍，這是設定在哪些頁面顯示這個客服側邊欄。
按需設定生效範圍(側邊欄在哪些頁面顯示) ↓，一般是選擇「Entir Site」會在前端所有頁面顯示。點選“Next”按鈕進入下一步設定。
按下圖點擊啟用“On Page Load”，時間建議保持預設別改，再點右下角“Save & Close”按鈕儲存即可。
最後清理所有緩存，去前台刷新頁面查看，正常情況應該已經顯示側邊欄。要調整位置和內容等請看下方教學，可自訂程度非常高！修改前請務必查看下方使用/修改教學。
線上客服側邊欄使用/修改教學課程
純使用Elementor Pro製作，懂Elementor就知道怎麼改，如果不懂Elementor先去百度找教學幾分鐘可以學會。迪亞莫加了一些自訂CSS，每段CSS都有標註，一看就知道啥意思，要改啥自己調就行。
Tips: 有些設定和程式碼如果看不懂或不知道啥意思，就不要改，改了可能出錯！ ！ ！不懂的話只照教學微調就好，不要放飛自我！遇到麻煩聯絡微信客服就對了。
為了減少大家大理解時間，大概說下修改要點。盡量不要改預設設置，每個設定都有它的意義！改完時點儲存，到前端查看效果，出問題就在編輯介面按Ctrl+ Z (可按多次)撤銷操作(前提是沒刷新過編輯頁面)，再儲存就能恢復。
調整客服欄位置
按圖進入設定介面。一般都是顯示在右下角，預設好，不需要調整。
要調整邊距的話，按圖方法調整，一般是調整距離右邊和底部的間距，按需調。
更改每個圖示框內容
點選右側「結構」板塊裡面對應圖示欄小工具，左側會彈出對應內容板塊。按需修改圖示、文字、連結等內容就行。
圖示和文字的顏色，大小在「樣式」板塊裡面調整，這些都是Elementor基本簡單操作，這裡不過多解釋。純新手的話建議先百度下Elementor教學學習，得會才能用Elementor製作網站。
調整圖示和文字顏色/大小
按下圖順序點擊，找到修改圖示和字體顏色、大小位置。
修改圖示板塊/按鈕背景色、文字方塊顏色、三角形狀顏色
樣式1：電腦、手提、平板、手機都是在同一個位置修改：1- 點選選取要修改的圖示庫小工具，2- 切換到「進階設定」 板塊，修改「背景」 欄的「顏色」。
樣式2+樣式3+樣式4：電腦、手提、平板端顏色透過CSS程式碼修改：按下圖順序點擊，展開「Custom Css」欄。
樣式2在「Custom Css」裡大概26、35行找到顏色代碼，把 #b51717 替換成你所需顏色的程式碼就行。只替換顏色代碼，其它不要改！顏色代碼都是# 號開頭的，後面通常是6個數字。
新手不知道怎麼查看某個顏色的程式碼？百度一下10秒內找到答案。
樣式3的顏色代碼在大概在「Custom Css」裡第35和62行，樣式4的大概在第26和53行。
樣式2+樣式3+樣式4：手機端的圖示框顏色代碼在下圖位置設置，跟樣式1修改顏色的方法一樣，替換顏色就行。因為手機端是為整個圖示板塊添加背景色，而電腦端等是只為圖示和文字方塊設定背景色，所以設定方法不一樣。
除了樣式1和5，其它樣式文字框前面有個指向右邊的三角形箭頭，也需要修改它的顏色，也是在「Custom Css」裡面修改。
樣式2：大概在第53行找到下圖程式碼，把 #b51717 替換成你所需顏色的程式碼就行。
樣式3：大概在第81行找到下圖程式碼，把 #b51717 替換成你所需顏色的程式碼就行。
樣式4：大概在第71行找到下圖程式碼，把 #b51717 替換成你所需顏色的程式碼就行。
修改圖示間線條
有些樣式圖示框之間有線條間隔（下圖綠色框），要修改顏色依照下面方法。
按下圖順序點擊，展開「Custom Css」欄。
樣式3： 在「Custom Css」欄裡大概53行，找到顏色代碼，把 #ffffff69 替換成你所需顏色的程式碼就行。只替換顏色代碼，其它不要改！顏色代碼都是# 號開頭的，後面通常是6個數字。
新手不知道怎麼查看某個顏色的程式碼？百度一下10秒內找到答案。
樣式4： 在「Custom Css」欄大概44行找到顏色代碼。
修改圖示按鈕大小
大小透過自訂CSS修改，按下圖順序點擊，展開「Custom Css」欄。
樣式1：大概在第14和15行找到下圖程式碼，修改2個數字6就行，改成大一點數字圖示框就大點，只改數字其它別改！修改後的2個數字必須要一樣才行，這樣圖示就會上下對稱。
樣式2：大概在第28行找到下圖程式碼，把12改成其它數字就行，改成大一點數字圖示框就大點。只改數字其它別改！
樣式3：大概在第37和38行找到下圖程式碼，48是圖示寬度，45是高度。只修改數字就行，改成大一點數字圖示框就大一點。只改數字其它別改！
樣式4：跟上面樣式3修改方法一樣，大概在第28和29行找到下圖程式碼。
替換微信二維碼圖片
圖片尺寸建議做100*100px，4週設定白邊，這樣好看一點。下圖是範例圖片，僅供參考。微信二維碼圖片先上傳到媒體庫，然後複製圖片網址。
按下圖數字順序點擊，左邊會彈出下圖設定面板，直接取代文字和網址就行。注意：請謹慎操作，避免誤刪任何東西！只替換文字和網址，注意格式。包圍網址的 ""符號不能刪！
如果左側面板太窄，把滑鼠放到邊板邊緣，滑鼠左鍵點選不放往右邊拖曳可以拉寬面板。搞完記得縮回去，面板太寬不方便後續操作。
替換信箱、WhatsApp號碼
替換郵箱：點選下圖數字1圖示框，在下圖紅色框位置，只替換信箱地址就行。
替換WhatsApp號碼：點選下圖數字1圖示框，在下圖紅色框位置，把138開頭的11位元數字換成您的11位數手機號碼就行。 86是國際區號代表中國號碼，不能刪除。如果您用國外手機號碼，把86改成對應國家區號。
新增/刪減圖示按鈕（客服）
按下圖方法，滑鼠放在要修改的圖示框上，點選滑鼠右鍵彈出選項卡，可實現新增、刪除等功能。
例如你要新增一個Skype客服按鈕，複製WhatsAPP圖示框，取代掉圖示和顯示名字，連結欄輸入skype:XXX?聊天 即可。 XXX替換成您的Skype帳號（下圖）。設定完後請務必進行測試！
更多功能簡碼：
skype:XXX?chat：開始Skype 文字聊天
skype:XXX?userinfo：查看Skype 資料
skype:XXX?add：新增到Skype 聯絡人列表
skype:XXX?call：開始Skype 語音呼叫
skype:XXX?voicemail：使用Skype 發送語音郵件
skype:XXX?sendfile：使用Skype 傳送文件
調整圖示框間距
若要調整圖示框之間的距離，請按圖表找到調整位置。建議只調整樣式1和樣式2間距，樣式3和4的圖示框間距應保持預設為0，否則會有空隙。
調整手機端圖示欄邊框
在手機端，第二個圖示框開始，加入了1px的左邊框，顏色為白色，其它電腦端之類邊框為0。
按下圖數字順序點擊，找到修改位置，按需調整。
