浮動聯絡按鈕
在網站右下角提供固定聯絡入口。
共 4 項操作・14 個步驟・最後複驗 2026-08-03
從哪裡進入
網站後台 → 浮動聯絡按鈕
照著下方圖文逐步完成
重點摘要（TL;DR）
訪客在任何頁面都可開啟 LINE、電話、Email 或 WhatsApp 等管道。
什麼時候會用到
- 希望訪客隨時能找到聯絡方式
開始前先準備
- • 準備正確的電話、Email 或社群連結
操作步驟與完成後的結果
每一項操作都列出從哪裡開始、要做什麼，以及完成後應該看到的結果。
開啟或關閉浮動按鈕
公開網站會顯示或隱藏固定在畫面邊緣的聯絡入口。
- 1
這一步要做
到網站後台的「浮動聯絡按鈕」。
完成後會看到
畫面會顯示浮動按鈕的外觀與聯絡管道設定。
- 2
這一步要做
勾選或取消「在公開網站顯示浮動聯絡按鈕」。
完成後會看到
功能會切換為準備顯示或準備隱藏。
- 3
這一步要做
按「儲存」。
完成後會看到
畫面會顯示「已儲存，公開網站已更新。」
注意事項
- • 開啟前至少要有一個可用的聯絡管道。
- • 這項設定會更新公開網站，不需要另外發布編輯器草稿。
新增與排序聯絡管道
訪客能從浮動按鈕選擇 LINE、Email、電話或其他聯絡方式。
- 1
這一步要做
在「聯絡管道」按「新增聯絡管道」。
完成後會看到
清單會多一列新的聯絡管道。
- 2
這一步要做
在類型選單選 LINE、Email、電話、WhatsApp、Telegram、Messenger 或「自訂連結」。
完成後會看到
該列會顯示對應的連結或帳號輸入欄。
- 3
這一步要做
依希望的公開排列順序檢查清單；目前公開按鈕依清單順序、並「由下往上堆疊顯示」。
完成後會看到
儲存後，公開網站會依目前清單順序排列聯絡管道。
- 4
這一步要做
按「儲存」。
完成後會看到
新增的管道會保留並出現在公開浮動按鈕中。
注意事項
- • 目前頁面沒有獨立的拖曳或上下移排序控制；要改順序時需依產品現有清單操作重新安排。
- • 刪除管道後按儲存才會從公開網站移除。
設定連結與顯示文字
訪客點擊後會前往正確聯絡管道，也能看懂每顆按鈕的用途。
- 1
這一步要做
在一列聯絡管道選擇類型，輸入該管道需要的資料，例如 Email 地址、電話號碼或完整網址。
完成後會看到
該按鈕會準備開啟對應的寄信、撥號或網頁連結。
- 2
這一步要做
在「按鈕說明（選填，例：LINE 線上諮詢）」輸入訪客看得懂的文字。
完成後會看到
浮動按鈕會使用這段說明文字。
- 3
這一步要做
在「外觀」選「右下圓鈕（一疊圖示按鈕）」或「底部橫條（圖示＋文字，手機限定）」，再選擇「跟隨網站主色（推薦）」或品牌原色。
完成後會看到
浮動聯絡入口會使用所選樣式與顏色。
- 4
這一步要做
按「儲存」。
完成後會看到
公開網站會套用新的連結、文字與外觀。
注意事項
- • 網址請包含 https://；電話與 Email 要先檢查拼字。
- • 「底部橫條」是手機限定，桌機不會用同樣方式顯示。
用手機預覽測試
你能確認手機上不會擋住重要內容，而且每個聯絡按鈕都能正確開啟。
- 1
這一步要做
儲存設定後，按後台的「查看網站」開啟公開網站。
完成後會看到
瀏覽器會開啟目前公開版本。
- 2
這一步要做
用手機開啟同一網址；若選「底部橫條（圖示＋文字，手機限定）」，在手機上確認底部橫條出現。
完成後會看到
手機畫面會顯示所選浮動樣式。
- 3
這一步要做
逐一點 LINE、Email、電話或自訂連結。
完成後會看到
每顆按鈕會開啟正確 App、撥號畫面、寄信畫面或網址。
注意事項
- • 測試撥號與傳訊前先確認對象，避免真的送出訊息或撥出電話。
- • 同時檢查浮動按鈕是否遮住購買、送出或導覽按鈕。
遇到問題先看這裡
- 按鈕出現但點了沒有反應？
- 檢查該管道的電話、Email 或網址格式，並用公開網站實際點擊測試。