設定展開目錄
設定目前可使用

浮動聯絡按鈕

在網站角落提供固定的聯絡入口,訪客在任何頁面都能一鍵找到你。

共 8 項操作・28 個步驟・最後複驗 2026-10-03

從哪裡進入

網站後台 → 浮動聯絡按鈕

照著下方圖文逐步完成

重點摘要(TL;DR)

訪客可以從畫面右下(或左下)的聯絡按鈕開啟 LINE、電話、簡訊、Email、Facebook、Instagram、Messenger、門市位置、WhatsApp、Telegram 或自訂連結;儲存後立即套用到公開網站。

什麼時候會用到

  • 希望訪客隨時能找到聯絡方式
  • 想讓客人點一下就開啟 LINE 並帶好詢問內容
  • 只想在營業時間顯示電話,或只在手機顯示某些管道

開始前先準備

  • • 準備正確的 LINE 官方帳號連結或 @ID、電話、Email 或社群帳號
  • • 要看客人按了哪個聯絡按鈕,需要開啟「訪客分析」

第一次設定,照這個順序做

共 5 站。每一站都連到詳細步驟,做完一站再往下。

  1. 1新增聯絡管道並排好順序沒有任何管道時按鈕不會出現;最常用的放最上面。本頁第 1 項操作
  2. 2填好連結與按鈕說明格式填對,訪客按下去才會開到正確的 App 或網址。本頁第 2 項操作
  3. 3勾選顯示並儲存勾選「在公開網站顯示浮動聯絡按鈕」再按「儲存」,公開網站才會出現。本頁第 3 項操作
  4. 4用手機實際按一遍確認沒擋住重要按鈕,每個管道都開得起來。本頁第 7 項操作
  5. 5看客人最常按哪一個開了訪客分析,就能用點擊數決定管道順序。本頁第 8 項操作

操作步驟與完成後的結果

每一項操作都列出從哪裡開始、要做什麼,以及完成後應該看到的結果。

1

新增與排序聯絡管道

訪客能從浮動按鈕選擇 LINE、Email、電話或其他聯絡方式。

  1. 1

    這一步要做

    在「聯絡管道」按「新增聯絡管道」。

    為什麼:每一列就是公開網站上的一顆按鈕;新增的一列預設是 LINE。

    浮動聯絡按鈕:在「聯絡管道」按「新增聯絡管道」。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    清單會多一列新的聯絡管道。
    1. 1操作
      位置:
      畫面上的「新增聯絡管道」。
      動作:
      在「聯絡管道」按「新增聯絡管道」。
      結果:
      清單會多一列新的聯絡管道。

    完成後會看到

    清單會多一列新的聯絡管道。

  2. 2

    這一步要做

    在類型選單選 LINE、電話、簡訊、Email、Facebook、Instagram、Messenger、門市位置、WhatsApp、Telegram 或「自訂連結」。

    為什麼:選對類型,平台才會幫你組出正確的連結:例如 LINE 填 @ID 會開官方帳號、門市位置填地址會開地圖導航、簡訊會開訪客手機的簡訊畫面。

    浮動聯絡按鈕:在類型選單選 LINE、電話、簡訊、Email、Facebook、Instagram、Messenger、門市位置、WhatsApp、Telegram 或「自訂連結」。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    輸入框的範例文字與下方說明會換成該管道需要填的格式。
    1. 2操作
      位置:
      畫面上的「聯絡管道類型」。
      動作:
      在類型選單選 LINE、電話、簡訊、Email、Facebook、Instagram、Messenger、門市位置、WhatsApp、Telegram 或「自訂連結」。
      結果:
      輸入框的範例文字與下方說明會換成該管道需要填的格式。

    完成後會看到

    輸入框的範例文字與下方說明會換成該管道需要填的格式。

  3. 3

    這一步要做

    按住每一列最左側的拖曳握把(「拖曳排序」),把管道拖到想要的位置;也可以用鍵盤選取握把後用方向鍵移動。

    為什麼:最常用的管道放在清單最上面,就會出現在最靠近角落、最好按的位置。

    浮動聯絡按鈕:按住每一列最左側的拖曳握把(「拖曳排序」),把管道拖到想要的位置;也可以用鍵盤選取握把後用方向鍵移動。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    清單順序改變;公開按鈕依這個順序「由下往上堆疊顯示」。
    1. 3核對
      位置:
      畫面上的「拖曳可調整順序 · 由下往上堆疊顯示」。
      動作:
      按住每一列最左側的拖曳握把(「拖曳排序」),把管道拖到想要的位置;也可以用鍵盤選取握把後用方向鍵移動。
      結果:
      清單順序改變;公開按鈕依這個順序「由下往上堆疊顯示」。

    完成後會看到

    清單順序改變;公開按鈕依這個順序「由下往上堆疊顯示」。

  4. 4

    這一步要做

    按「儲存」。

    為什麼:排序與新增都要按「儲存」才會套用到公開網站。

    浮動聯絡按鈕:按「儲存」。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    新增的管道會保留並出現在公開浮動按鈕中。
    1. 4操作
      位置:
      畫面上的「儲存」。
      動作:
      按「儲存」。
      結果:
      新增的管道會保留並出現在公開浮動按鈕中。

    完成後會看到

    新增的管道會保留並出現在公開浮動按鈕中。

    做錯或略過會怎樣

    輸入框留空的那一列,儲存時會被自動拿掉,不會變成一顆空按鈕。

注意事項

  • • 要移除管道,按該列右側的垃圾桶,再按「儲存」才會從公開網站移除。
  • • 管道 3 個以上時,手機畫面會被佔掉一整排,可以考慮把「展開方式」改成收合。
2

設定連結與顯示文字

訪客點擊後會前往正確聯絡管道,也能看懂每顆按鈕的用途。

  1. 5

    這一步要做

    在一列聯絡管道選擇類型,照輸入框下方的說明填入資料,例如 LINE 的 @ID、電話號碼、Email、粉專帳號或完整網址。

    為什麼:平台會把你填的帳號或號碼組成正確的連結,所以照說明的格式填最不容易出錯。

    浮動聯絡按鈕:在一列聯絡管道選擇類型,照輸入框下方的說明填入資料,例如 LINE 的 @ID、電話號碼、Email、粉專帳號或完整網址。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    該按鈕會準備開啟對應的寄信、撥號或網頁連結。
    1. 5操作
      位置:
      畫面上的「LINE ID」。
      動作:
      在一列聯絡管道選擇類型,照輸入框下方的說明填入資料,例如 LINE 的 @ID、電話號碼、Email、粉專帳號或完整網址。
      結果:
      該按鈕會準備開啟對應的寄信、撥號或網頁連結。

    完成後會看到

    該按鈕會準備開啟對應的寄信、撥號或網頁連結。

    做錯或略過會怎樣

    「自訂連結」沒寫 https:// 時,瀏覽器會把它當成你網站裡的一頁,按下去會找不到頁面;填了不安全的連結格式,按鈕會變成點了沒反應。

  2. 6

    這一步要做

    在「按鈕說明(選填,例:LINE 線上諮詢)」輸入訪客看得懂的文字。

    為什麼:只有圖示時,訪客不一定知道按下去會發生什麼;一句「LINE 線上諮詢」會讓人比較敢按。

    欄位怎麼填

    按鈕說明(選填,例:LINE 線上諮詢)
    寫「按了會發生什麼」,例如「LINE 線上諮詢」「打電話給師傅」。留空時會顯示預設文字,例如「LINE 聯絡」「電話聯絡」。
    浮動聯絡按鈕:在「按鈕說明(選填,例:LINE 線上諮詢)」輸入訪客看得懂的文字。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    桌機滑鼠移到按鈕上會顯示這段文字;底部橫條版型會直接顯示在圖示下方。
    1. 6操作
      位置:
      畫面上的「按鈕說明」。
      動作:
      在「按鈕說明(選填,例:LINE 線上諮詢)」輸入訪客看得懂的文字。
      結果:
      桌機滑鼠移到按鈕上會顯示這段文字;底部橫條版型會直接顯示在圖示下方。

    完成後會看到

    桌機滑鼠移到按鈕上會顯示這段文字;底部橫條版型會直接顯示在圖示下方。

  3. 7

    這一步要做

    在「外觀」選「顯示樣式」與「顏色」;要讓某一顆用不同顏色,在該列勾選「自訂顏色」再選色。

    為什麼:跟隨網站主色看起來和網站是一體的;選品牌原色則 LINE 是綠色、讓人一眼認出。

    欄位怎麼填

    顯示樣式
    「右下圓鈕(一疊圖示按鈕)」適合大多數網站;「底部橫條(圖示+文字,手機限定)」只在手機顯示滿版聯絡列,桌機自動維持右下圓鈕。
    顏色
    建議「跟隨網站主色(推薦)」;想讓各管道一眼可辨就選「各管道品牌原色(LINE 綠…)」。
    自訂顏色
    未勾選時跟隨上方「顏色」設定;勾選後只改這一顆。
    浮動聯絡按鈕:在「外觀」選「顯示樣式」與「顏色」;要讓某一顆用不同顏色,在該列勾選「自訂顏色」再選色。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    浮動聯絡入口會使用所選樣式與顏色。
    1. 7操作
      位置:
      畫面上的「顯示樣式」。
      動作:
      在「外觀」選「顯示樣式」與「顏色」;要讓某一顆用不同顏色,在該列勾選「自訂顏色」再選色。
      結果:
      浮動聯絡入口會使用所選樣式與顏色。

    完成後會看到

    浮動聯絡入口會使用所選樣式與顏色。

  4. 8

    這一步要做

    按「儲存」。

    為什麼:所有修改按一次「儲存」一起套用。

    浮動聯絡按鈕:按「儲存」。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    公開網站會套用新的連結、文字與外觀。
    1. 8操作
      位置:
      畫面上的「儲存」。
      動作:
      按「儲存」。
      結果:
      公開網站會套用新的連結、文字與外觀。

    完成後會看到

    公開網站會套用新的連結、文字與外觀。

  5. 9

    這一步要做

    如果類型是「自訂連結」,在「按鈕圖示」選一個符合用途的圖示,例如預約、購物、地圖或評價。

    為什麼:自訂連結沒有固定的品牌圖示,選一個對應用途的圖示,訪客才看得出這顆按鈕是做什麼的。

    欄位怎麼填

    按鈕圖示
    可選對話、網站、預約、購物、電話、信件、地圖、營業時間、型錄/表單、評價、資訊。沒選時用對話圖示。

    完成後會看到

    公開網站上這顆按鈕會換成你選的圖示。

注意事項

  • • 網址請包含 https://;電話與 Email 要先檢查拼字。
  • • 「底部橫條」是手機限定,桌機不會用同樣方式顯示。
3

開啟或關閉浮動按鈕

公開網站會顯示或隱藏固定在畫面邊緣的聯絡入口。

  1. 10

    這一步要做

    到網站後台的「浮動聯絡按鈕」。

    為什麼:這頁是浮動聯絡按鈕唯一的設定入口,所有外觀與管道都在同一頁,最後按一次「儲存」一起套用。

    浮動聯絡按鈕:到網站後台的「浮動聯絡按鈕」。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    畫面會顯示浮動按鈕的外觀與聯絡管道設定。
    1. 10操作
      位置:
      畫面上的「浮動聯絡按鈕」。
      動作:
      到網站後台的「浮動聯絡按鈕」。
      結果:
      畫面會顯示浮動按鈕的外觀與聯絡管道設定。

    完成後會看到

    畫面會顯示浮動按鈕的外觀與聯絡管道設定。

  2. 11

    這一步要做

    勾選或取消「在公開網站顯示浮動聯絡按鈕」。

    為什麼:取消勾選只會把按鈕藏起來,設定都會保留,之後隨時可以再打開。

    浮動聯絡按鈕:勾選或取消「在公開網站顯示浮動聯絡按鈕」。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    功能會切換為準備顯示或準備隱藏。
    1. 11操作
      位置:
      畫面上的「在公開網站顯示浮動聯絡按鈕 關閉後按鈕不會出現(設定會保留)。沒有任何聯絡管道時也不會顯示。」。
      動作:
      勾選或取消「在公開網站顯示浮動聯絡按鈕」。
      結果:
      功能會切換為準備顯示或準備隱藏。

    完成後會看到

    功能會切換為準備顯示或準備隱藏。

    做錯或略過會怎樣

    勾選了但「聯絡管道」是空的,公開網站一樣不會出現按鈕;後台總覽也會提醒「浮動聯絡按鈕已開啟,但還沒加任何聯絡管道」。

  3. 12

    這一步要做

    按「儲存」。

    為什麼:儲存後平台會直接更新公開網站,不需要回編輯器另外發佈。

    浮動聯絡按鈕:按「儲存」。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    畫面會顯示「已儲存,公開網站已更新。」
    1. 12操作
      位置:
      畫面上的「儲存」。
      動作:
      按「儲存」。
      結果:
      畫面會顯示「已儲存,公開網站已更新。」

    完成後會看到

    畫面會顯示「已儲存,公開網站已更新。」

    做錯或略過會怎樣

    沒按「儲存」就離開頁面,剛才的修改都不會保留。

注意事項

  • • 開啟前至少要有一個可用的聯絡管道。
  • • 這項設定會更新公開網站,不需要另外發布編輯器草稿。
4

設定預填訊息、顯示裝置與顯示時段

客人點下去時訊息已經幫他打好;電話只在手機或營業時間出現。

  1. 13

    這一步要做

    在 LINE、Email、簡訊、WhatsApp 或 Messenger 那一列,填寫「預填訊息(選填,例:你好,我想詢問木地板施工)」。

    為什麼:客人不知道第一句要說什麼,常常就放棄了;幫他開個頭,詢問會變多。

    欄位怎麼填

    預填訊息(選填,例:你好,我想詢問木地板施工)
    寫成客人的口吻、一句話就好,例如「你好,我想詢問報價」。留空就不預填。
    浮動聯絡按鈕:在 LINE、Email、簡訊、WhatsApp 或 Messenger 那一列,填寫「預填訊息(選填,例:你好,我想詢問木地板施工)」。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    訪客點擊後,這句話會先打好在輸入框裡,他按送出就好。
    1. 13操作
      位置:
      畫面上的「預填訊息(選填)」。
      動作:
      在 LINE、Email、簡訊、WhatsApp 或 Messenger 那一列,填寫「預填訊息(選填,例:你好,我想詢問木地板施工)」。
      結果:
      訪客點擊後,這句話會先打好在輸入框裡,他按送出就好。

    完成後會看到

    訪客點擊後,這句話會先打好在輸入框裡,他按送出就好。

    做錯或略過會怎樣

    LINE 要填 @ID 才能預填;用 lin.ee 短連結時無法預填,按下去只會開啟官方帳號。其他管道(電話、地圖、社群主頁)沒有訊息欄位,所以看不到這一格。

  2. 14

    這一步要做

    在該列的「顯示裝置」選「手機與桌機都顯示」「只在手機顯示」或「只在桌機顯示」。

    為什麼:電話在桌機通常按不了,只在手機顯示可以少一顆沒用的按鈕。

    欄位怎麼填

    顯示裝置
    電話、簡訊建議「只在手機顯示」;其他管道維持「手機與桌機都顯示」。
    浮動聯絡按鈕:在該列的「顯示裝置」選「手機與桌機都顯示」「只在手機顯示」或「只在桌機顯示」。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    儲存後,這顆按鈕只會出現在你選的裝置上。
    1. 14操作
      位置:
      畫面上的「顯示裝置」。
      動作:
      在該列的「顯示裝置」選「手機與桌機都顯示」「只在手機顯示」或「只在桌機顯示」。
      結果:
      儲存後,這顆按鈕只會出現在你選的裝置上。

    完成後會看到

    儲存後,這顆按鈕只會出現在你選的裝置上。

  3. 15

    這一步要做

    要只在營業時間顯示,在「顯示時段」點選星期幾(或按「週一~五」快速選),再填開始與結束時間。

    為什麼:下班後不會有人接的電話或 LINE,藏起來比讓客人等不到回覆好。

    欄位怎麼填

    顯示時段
    沒選任何星期=隨時顯示。開始與結束時間不能相同,否則視為沒設定。
    浮動聯絡按鈕:要只在營業時間顯示,在「顯示時段」點選星期幾(或按「週一~五」快速選),再填開始與結束時間。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    時段外這顆按鈕會自動消失;按「清除」可以回到隨時顯示。
    1. 15操作
      位置:
      畫面上的「週一~五」。
      動作:
      要只在營業時間顯示,在「顯示時段」點選星期幾(或按「週一~五」快速選),再填開始與結束時間。
      結果:
      時段外這顆按鈕會自動消失;按「清除」可以回到隨時顯示。

    完成後會看到

    時段外這顆按鈕會自動消失;按「清除」可以回到隨時顯示。

    做錯或略過會怎樣

    時間以台灣時間計算,不看訪客所在地。結束時間早於開始時間代表跨夜,例如 22:00~02:00 會一路顯示到隔天凌晨 2 點。

  4. 16

    這一步要做

    按「儲存」,在營業時間內外各開一次公開網站確認。

    為什麼:營業時間是在訪客的瀏覽器即時判斷的,不會因為網頁快取而顯示錯的狀態。

    浮動聯絡按鈕:按「儲存」,在營業時間內外各開一次公開網站確認。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    時段內看得到這顆按鈕,時段外看不到;開著的頁面跨過時間點時也會自動更新。
    1. 16操作
      位置:
      畫面上的「儲存」。
      動作:
      按「儲存」,在營業時間內外各開一次公開網站確認。
      結果:
      時段內看得到這顆按鈕,時段外看不到;開著的頁面跨過時間點時也會自動更新。

    完成後會看到

    時段內看得到這顆按鈕,時段外看不到;開著的頁面跨過時間點時也會自動更新。

    做錯或略過會怎樣

    「顯示時段」「顯示裝置」與「不顯示的頁面」同時套用在圓鈕與底部橫條;某個管道在時段外或設成只在桌機顯示時,手機底部那一條也不會出現它。

注意事項

  • • 所有管道都在時段外時,整組按鈕會暫時消失。
5

調整展開方式、位置與招呼語

按鈕不擋住頁面內容,還能在訪客停留時主動打聲招呼。

  1. 17

    這一步要做

    在「外觀」的「展開方式」選「全部展開(每個管道都看得到)」或「收合成一顆鈕(點了才展開)」。

    為什麼:管道多的時候全部展開會佔掉手機一整排,收合比較清爽。

    欄位怎麼填

    展開方式
    管道 1~2 個用「全部展開」;3 個以上建議「收合成一顆鈕」。
    浮動聯絡按鈕:在「外觀」的「展開方式」選「全部展開(每個管道都看得到)」或「收合成一顆鈕(點了才展開)」。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    選收合時,公開網站只露出一顆聯絡鈕,點了才展開所有管道。
    1. 17操作
      位置:
      畫面上的「展開方式」。
      動作:
      在「外觀」的「展開方式」選「全部展開(每個管道都看得到)」或「收合成一顆鈕(點了才展開)」。
      結果:
      選收合時,公開網站只露出一顆聯絡鈕,點了才展開所有管道。

    完成後會看到

    選收合時,公開網站只露出一顆聯絡鈕,點了才展開所有管道。

  2. 18

    這一步要做

    在「顯示位置」選「畫面右下角」或「畫面左下角」,再用「距離底部」滑桿調整高度。

    為什麼:有開網路商店時右下角已有購物車浮動鈕,可以把聯絡鈕移到左邊;頁面下方有 cookie 提示這類固定元素時,把距離調高避開。

    欄位怎麼填

    顯示位置
    預設右下角;有購物車浮動鈕時選「畫面左下角」。
    距離底部
    0~240 px,預設 24 px,以 4 px 為一格調整。
    浮動聯絡按鈕:在「顯示位置」選「畫面右下角」或「畫面左下角」,再用「距離底部」滑桿調整高度。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    按鈕移到所選角落,並依滑桿數值往上移。
    1. 18操作
      位置:
      畫面上的「顯示位置」。
      動作:
      在「顯示位置」選「畫面右下角」或「畫面左下角」,再用「距離底部」滑桿調整高度。
      結果:
      按鈕移到所選角落,並依滑桿數值往上移。

    完成後會看到

    按鈕移到所選角落,並依滑桿數值往上移。

  3. 19

    這一步要做

    在「招呼語」填「招呼文字」與「幾秒後出現」。

    為什麼:主動的一句「有問題嗎?直接問我們」會提醒訪客這裡可以問。

    欄位怎麼填

    招呼文字
    一句話,例如「有問題嗎?直接問我們」。留空=不顯示。
    幾秒後出現
    0~60 秒,預設 3 秒。招呼文字沒填時不能調。
    浮動聯絡按鈕:在「招呼語」填「招呼文字」與「幾秒後出現」。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    訪客停留到設定的秒數後,聯絡鈕旁會跳出這句話。
    1. 19操作
      位置:
      畫面上的「招呼文字」。
      動作:
      在「招呼語」填「招呼文字」與「幾秒後出現」。
      結果:
      訪客停留到設定的秒數後,聯絡鈕旁會跳出這句話。

    完成後會看到

    訪客停留到設定的秒數後,聯絡鈕旁會跳出這句話。

    做錯或略過會怎樣

    訪客關掉招呼語後,這次造訪就不會再出現;想重看要開新的瀏覽視窗。

  4. 20

    這一步要做

    按「儲存」,到公開網站確認位置與招呼語。

    為什麼:滑桿與秒數只在實際頁面上看得出效果。

    浮動聯絡按鈕:按「儲存」,到公開網站確認位置與招呼語。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    畫面顯示「已儲存,公開網站已更新。」,公開網站套用新設定。
    1. 20操作
      位置:
      畫面上的「儲存」。
      動作:
      按「儲存」,到公開網站確認位置與招呼語。
      結果:
      畫面顯示「已儲存,公開網站已更新。」,公開網站套用新設定。

    完成後會看到

    畫面顯示「已儲存,公開網站已更新。」,公開網站套用新設定。

注意事項

  • • 招呼語出現時若訪客已經展開了聯絡管道,招呼語會先藏起來,不擋住按鈕。
6

設定不顯示的頁面

在結帳這類頁面把聯絡鈕藏起來,不擋住付款按鈕。

  1. 21

    這一步要做

    在「不顯示的頁面」輸入框,一行輸入一個網址路徑,例如 /checkout。

    為什麼:聯絡鈕固定在畫面角落,在結帳或有自己按鈕的頁面上可能會蓋住重要按鈕。

    浮動聯絡按鈕:在「不顯示的頁面」輸入框,一行輸入一個網址路徑,例如 /checkout。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    這些頁面不會出現浮動聯絡按鈕。
    1. 21操作
      位置:
      畫面上的「不顯示的頁面」。
      動作:
      在「不顯示的頁面」輸入框,一行輸入一個網址路徑,例如 /checkout。
      結果:
      這些頁面不會出現浮動聯絡按鈕。

    完成後會看到

    這些頁面不會出現浮動聯絡按鈕。

    做錯或略過會怎樣

    只填路徑,不要填整個網址;開頭沒寫 / 時平台會自動補上。

  2. 22

    這一步要做

    要隱藏整個區段,在路徑結尾加 *,例如 /products*。

    為什麼:商品頁很多時,不必一頁一頁列。

    浮動聯絡按鈕:要隱藏整個區段,在路徑結尾加 *,例如 /products*。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    /products 和底下所有商品頁都會一起隱藏。
    1. 22核對
      位置:
      畫面上的「結尾加 * 代表整個區段」。
      動作:
      要隱藏整個區段,在路徑結尾加 *,例如 /products*。
      結果:
      /products 和底下所有商品頁都會一起隱藏。

    完成後會看到

    /products 和底下所有商品頁都會一起隱藏。

    做錯或略過會怎樣

    只填 /* 會讓全站都隱藏,等於把按鈕關掉。

  3. 23

    這一步要做

    按「儲存」,到那幾頁與其他頁面各看一次。

    為什麼:路徑打錯字時規則不會生效,實際打開確認最準。

    浮動聯絡按鈕:按「儲存」,到那幾頁與其他頁面各看一次。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    列出的頁面看不到按鈕,其他頁面照常顯示。
    1. 23操作
      位置:
      畫面上的「儲存」。
      動作:
      按「儲存」,到那幾頁與其他頁面各看一次。
      結果:
      列出的頁面看不到按鈕,其他頁面照常顯示。

    完成後會看到

    列出的頁面看不到按鈕,其他頁面照常顯示。

注意事項

  • • 留空=全站都顯示。
7

用手機預覽測試

你能確認手機上不會擋住重要內容,而且每個聯絡按鈕都能正確開啟。

  1. 24

    這一步要做

    儲存設定後,在瀏覽器開啟你的公開網站。

    為什麼:後台沒有預覽這顆按鈕的畫面,要到公開網站上才看得到實際樣子。

    浮動聯絡按鈕:儲存設定後,在瀏覽器開啟你的公開網站。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    瀏覽器會開啟目前公開版本。
    1. 24操作
      位置:
      畫面上的「查看公開站」。
      動作:
      儲存設定後,在瀏覽器開啟你的公開網站。
      結果:
      瀏覽器會開啟目前公開版本。

    完成後會看到

    瀏覽器會開啟目前公開版本。

  2. 25

    這一步要做

    用手機開啟同一網址;若選「底部橫條(圖示+文字,手機限定)」,在手機上確認底部橫條出現。

    為什麼:很多人是用手機找店家,手機上的位置與大小最需要確認。

    完成後會看到

    手機畫面會顯示所選浮動樣式。

    做錯或略過會怎樣

    如果按鈕擋住購買或送出按鈕,可以調「距離底部」、改「顯示位置」,或把那一頁加進「不顯示的頁面」。

  3. 26

    這一步要做

    逐一點 LINE、Email、電話或自訂連結。

    為什麼:連結格式錯了只有實際按下去才會發現。

    浮動聯絡按鈕:逐一點 LINE、Email、電話或自訂連結。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    每顆按鈕會開啟正確 App、撥號畫面、寄信畫面或網址。
    1. 26操作
      位置:
      畫面上的「LINE 線上預約」。
      動作:
      逐一點 LINE、Email、電話或自訂連結。
      結果:
      每顆按鈕會開啟正確 App、撥號畫面、寄信畫面或網址。

    完成後會看到

    每顆按鈕會開啟正確 App、撥號畫面、寄信畫面或網址。

    做錯或略過會怎樣

    按下去沒反應或開到錯的地方,回後台檢查該列填的格式,例如 WhatsApp 要填含國碼的號碼,不能用 09 開頭的手機格式。

注意事項

  • • 測試撥號與傳訊前先確認對象,避免真的送出訊息或撥出電話。
  • • 購物車、登入、註冊、忘記密碼與付款結果這類頁面,平台本來就不顯示浮動聯絡按鈕。
8

查看客人按了哪個聯絡按鈕

知道多少人真的按下聯絡按鈕、最常用哪一個管道。

  1. 27

    這一步要做

    先確認「訪客分析」已經開啟;沒開的話到「網站設定」的「功能開關」勾選「訪客分析」並按「儲存功能設定」。

    為什麼:點擊統計和訪客統計走同一套紀錄,沒開訪客分析時不會記錄。

    完成後會看到

    訪客分析開啟後,平台開始記錄聯絡按鈕的點擊。

    做錯或略過會怎樣

    開啟之前的點擊不會補算。

  2. 28

    這一步要做

    到「訪客分析」頁,找「主動聯絡」區塊裡的「聯絡管道」。

    為什麼:瀏覽量說的是有多少人來過,這裡說的是有多少人真的想找你;可以用來決定哪個管道要放最上面。

    浮動聯絡按鈕:到「訪客分析」頁,找「主動聯絡」區塊裡的「聯絡管道」。

    手機可左右滑動畫面,看清楚紅圈與欄位文字。

    列出各管道在這段期間被按了幾次。
    1. 28核對
      位置:
      畫面上的「聯絡管道」。
      動作:
      到「訪客分析」頁,找「主動聯絡」區塊裡的「聯絡管道」。
      結果:
      列出各管道在這段期間被按了幾次。

    完成後會看到

    列出各管道在這段期間被按了幾次。

    做錯或略過會怎樣

    還沒有任何人按過聯絡按鈕時,「主動聯絡」區塊不會出現。

遇到問題先看這裡

按鈕出現但點了沒有反應?
回後台檢查那一列的格式:「自訂連結」要寫完整網址含 https://;WhatsApp 要填含國碼的號碼(例如 886912345678),不要填 09 開頭的手機格式;Instagram 與 Telegram 填帳號名稱。改好按「儲存」,再到公開網站實際點一次。
已經勾選顯示,公開網站卻沒有按鈕?
依序檢查:① 「聯絡管道」是不是至少有一列有填資料(空的列儲存時會被拿掉)② 是否按了「儲存」並看到「已儲存,公開網站已更新。」③ 現在這頁有沒有列在「不顯示的頁面」④ 各管道是不是都設了「顯示時段」且現在不在時段內 ⑤ 「顯示裝置」是不是限定了另一種裝置。
LINE 預填訊息沒有出現?
預填只在 LINE 填 @ID 時有效;填 lin.ee 短連結或完整網址時,按下去只會開啟官方帳號。把該列改成 @ID 後按「儲存」。
浮動按鈕擋住購物車或結帳按鈕?
可以把「顯示位置」改成「畫面左下角」、調高「距離底部」,或把該頁路徑加進「不顯示的頁面」。購物車、登入、註冊等頁面本來就不顯示這顆按鈕。
選了「底部橫條」,桌機卻還是右下角圓鈕?
這是設計如此:底部橫條是手機限定,桌機會自動維持右下圓鈕,不佔版面。
設了營業時段,晚上按鈕還在?
時段以台灣時間判斷。確認有點選星期幾、開始與結束時間不相同;結束時間早於開始時間代表跨夜。底部橫條與圓鈕套用同一套時段、裝置與不顯示頁面的設定。
不是這個問題?查全部排除方法

逐步操作

需要一步一步做時,接著看詳細教學

相關功能

還是沒解決?

依你看到的狀況查一次問題排除,通常比找功能名稱快。真的卡住就直接告訴我們,把你正在做的事和畫面上的訊息寫進來就好。