自訂「頁尾下方的訊息按鈕」」

 強化客服接觸點,提高回應效率

• 彈性導入品牌語言與圖示,增強互動感

• 可連結至 LINE 官方帳號、Facebook Messenger等,讓用戶溝通無斷點





✎ 重點拆解:



一、「自訂「頁尾下方的訊息按鈕」」設定路徑

二、「自訂「頁尾下方的訊息按鈕」」語法




一、「自訂「頁尾下方的訊息按鈕」」設定路徑


設定路徑:版面 > 商店頁尾 > 延伸資訊> 點擊「原始碼」。






二、「自訂「頁尾下方的訊息按鈕」」語法


貼到最下面即可。

<style type="text/css">

 .message-buttons {

    position: fixed;

    right: 24px; /* 與右邊距離 */

    bottom: 5em; /* 與底部距離 */

    z-index: 999;

    display: flex;

    flex-direction: column;

 }

  .message-alink{

    padding-bottom:10px; /* 按鈕間距離 */

  }

</style>

<div class="message-buttons">

  <a class="message-alink" href="https://LINE連結" target="_blank"><img alt="" height="60" onerror="imgError(this);" src="https://LINE圖片連結" width="60" /></a> 

  <a class="message-alink" href="https://FB訊息連結" target="_blank"><img alt="" height="60" onerror="imgError(this);" src="https://FB圖片連結" width="60" /></a>

</div>




備註 /


LINE連結格式:https://lin.ee/XXXXXX

FB訊息連結格式:https://m.me/XXXXXX

ex: 粉絲團 https://www.facebook.com/qdm.com.tw

https://m.me/qdm.com.tw or https://m.me/粉專ID


*LINE圖片連結、FB圖片連結 需自行設計上傳於QDM圖庫,即可取得圖片連結。