生活分享

WordPress 即時聯絡按鈕：LINE、客服與舊 Messenger 外掛的替代

網站的聯絡按鈕要能把讀者帶到有人處理的管道，也不能擋住手機上的主要操作。本篇說明 WordPress 如何規劃 LINE 官方帳號連結、客服與表單入口，整理舊 Messenger Chat Plugin 的替代方向，並提供離線時段、裝置差異和移除舊程式的驗收步驟，協助小型網站建立清楚而可維護的聯絡方式。

更新日期: 閱讀時間約 6 分鐘

原創螢幕、文件與螢幕插畫，呈現讀者透過網站聯絡到人員處理的流程。
圖片：Mokaair (© Mokaair)

網站右下角有聊天泡泡，讀者點開後沒有反應，或半夜看到立即聯絡卻等不到回覆。這些問題不只來自外掛，也與入口文案、裝置支援和團隊處理方式有關。先確定人員在哪裡回覆，再決定網站要放什麼按鈕。

以台灣小型工作室為例，可以用 LINE 官方帳號作為行動聯絡入口，同時保留網站表單。目的不是把所有通訊平台都放滿畫面，而是讓不同裝置的讀者都能找到一條能完成的路徑。

把聯絡目的與處理責任寫清楚

先列出讀者常問的事情，例如服務範圍、預約時段與既有案件進度。一般詢問可以導向 LINE，需附較多資料的事項則可使用表單或信箱。若不同入口背後由不同人員處理，應標示用途，避免讀者不知道該選哪個而同時送出多份。

聯絡按鈕的文字應描述動作，例如用 LINE 詢問、填寫服務需求，比只放圖示更容易理解。沒有即時值班就不要寫立即回覆；可在入口附近說明回覆時段與預期處理方式，並保留其他聯絡管道。

把客戶資料保存與交接安排一起確認。工作用途應由組織控制的帳號負責，不要讓網站長期連到已離職同事的私人聊天帳號。至少指定主要管理者與備援，並確認兩人知道如何查看新訊息。

使用 LINE 官方提供的連結

先在 LINE Official Account Manager 核對官方帳號 ID，使用管理介面提供的加入好友連結或官方文件支持的網址。LINE 的不同網址有不同功能：有些開啟帳號頁面，有些直接前往官方帳號聊天；選擇前先確認希望使用者完成什麼。

LINE Developers 文件提供以 https://line.me/R/oaMessage/ 加上編碼後帳號 ID 開啟聊天的方式。若帶預填文字，帳號與文字都需要正確的百分比編碼。預填只是把文字放進輸入欄，仍由使用者確認送出，不能把點擊按鈕算成已收到詢問。

官方目前建議使用 HTTPS 形式的 LINE URL scheme，舊 line:// 已被棄用。這類 URL scheme 支援 iOS 與 Android 的 LINE，官方並列出不支援電腦版 LINE；因此桌面頁面應另外準備加入好友 QR Code、帳號說明或可用表單，不要承諾所有裝置都直接開聊天室。

先用一般按鈕完成基本入口

在 WordPress 頁面加入按鈕區塊，輸入明確文字並貼上已確認的官方連結。先放在服務內容之後或聯絡頁，讓讀者理解用途再點選。不要為了做一個外部連結，就安裝包含許多追蹤與自動彈窗功能的完整客服套件。

若需要整站浮動按鈕，選擇仍受維護且能限制顯示頁面的工具，先在測試站設定位置、標籤與開關。只啟用實際有人管理的管道，並查看是否重複載入同平台程式。購買前核對哪些位置或裝置條件屬於付費功能。

  1. 確認目的地帳號與連結，先在聯絡頁建立可辨識的按鈕。
  2. 用已安裝 LINE 的手機測試，核對開啟的是正確官方帳號。
  3. 再用未安裝或桌面情境檢查替代入口，不把安裝提示當成聊天成功。

舊 Messenger Chat Plugin 應安排替代

不要因為外掛目錄仍找得到舊 Facebook Chat Plugin，就照舊教學重新安裝。Facebook 的 WooCommerce 整合原始碼更新紀錄已在二○二四年移除停止服務的 Messenger Chat 功能，舊外掛頁也保留許多歷史安裝說明；文件存在不代表功能仍適合目前網站。

如果團隊仍使用 Messenger 處理訊息，可先取得並實際測試目前帳號可用的聯絡連結，讓使用者前往平台；若需要在網站內完成客服對話，則評估有持續維護的客服服務與表單。兩種方式的帳號要求、資料保存與費用不同，應按需求選擇。

替換前列出舊泡泡從哪裡載入：外掛、佈景設定、頁首頁尾程式或標籤管理工具都有可能。先建立新入口並驗證，再停用舊 Chat 專用元件。共用的 Meta 程式可能另供其他功能使用，不要一口氣刪除所有相關整合。

浮動入口先檢查手機遮擋

用窄螢幕打開服務頁、表單頁與有底部導覽的頁面。檢查按鈕是否壓住送出、下一步、Cookie 選項或返回頂端控制，展開聊天面板時是否能關閉。若主要功能被遮住，先調整位置或停用該頁的浮動入口。

手機鍵盤出現時也要測試。固定在視窗底部的控制可能隨可視範圍改變，讓表單難以操作。桌面可以在右側顯示較完整的面板，手機則可採精簡按鈕；兩者不必使用完全相同的尺寸與展開方式。

按鈕要有清楚的可及名稱、可見的鍵盤焦點與足夠對比，不要只靠懸停才出現說明。會跳到外部應用程式的入口，文案應讓人有所預期。對話面板若預設自動彈出，應檢查是否打斷閱讀或反覆出現。

檢查聯絡完成後的接手流程

以一筆測試詢問走完點擊、開啟管道、送出及人員接收。檢查客服是否知道這位使用者從哪個服務頁而來；若需要預填來源，只帶有助於理解的簡短資訊，避免把個資、帳號憑證或完整瀏覽紀錄塞進網址。

離線時段也要測試自動回覆，內容應告知何時查看與其他可用入口。自動回覆不是人工受理，也不等於預約成立；讓讀者知道下一步，能減少等待中的重複訊息與誤會。

最後記錄網站按鈕位置、目的地帳號、管理人員及測試日期。換帳號、外掛更新或重新設計手機版後重新驗收；如果入口暫時無人處理，就調整文案或改導向表單，讓每個公開按鈕都對應到可持續的服務。

四格原創圖解顯示選擇聯絡入口、正確開啟平台、確認訊息送出及人員回覆。
把入口、裝置與接手流程一起驗收，讓聯絡真的有下一步。 · 圖片：Mokaair (© Mokaair)
以處理能力與讀者情境選入口，避免只比較泡泡外觀。
入口適合需求要驗證的限制
LINE 官方帳號連結手機上的一般詢問裝置支援、帳號正確與有人接手
網站聯絡表單需整理欄位或非同步處理送出、通知與資料保存
站內客服服務需要留在網站對話值班、隱私、費用與手機版
外部平台聯絡連結團隊已使用該平台登入需求及實際目的地

同主題延伸閱讀

  • 生活分享

    WordPress 側邊欄與小工具：安排資訊與固定區塊

    WordPress 側邊欄可以放搜尋、作者介紹與相關內容，但應先確認它對讀者是否有幫助。本文整理傳統小工具、區塊小工具及區塊佈景的差異，說明如何新增、排序、暫時移除與驗收，也比較一般排列、黏附與固定顯示的用途。透過桌面、手機和文字放大的檢查，避免資訊區塊遮住正文或表單，讓網站增加入口時仍維持清楚的閱讀順序。

  • 生活分享

    WordPress 備份怎麼做：檔案、資料庫與還原演練

    WordPress 備份不能只看成功訊息。本篇用檔案、資料庫與異地保存建立備份清單，說明 UpdraftPlus、WPvivid 的操作入口、還原限制及隔離演練，幫你確認網站資料真的拿得回來。也整理排程、保留版本、設定檔與驗收紀錄，讓個人網站或工作室有人能接手復原。

  • 生活分享

    WordPress 會員與角色：誰能看、誰能改、誰能管理

    WordPress 的管理員、編輯、作者與訂閱者分別能做什麼？本篇用小型團隊的投稿與會員閱讀需求，拆解角色、操作權限和內容可見性的差別，說明 User Role Editor 的設定方向，以及隱藏選單為何需要另外驗證實際存取，提供權限表、測試步驟和交接提醒，避免為了方便把所有人設為管理員。

  • 生活分享

    安裝 WordPress 主題與外掛：來源、更新與停用流程

    安裝 WordPress 佈景主題或外掛前，先確認要解決的問題、下載來源、版本相容性與回復方式。本文整理後台搜尋、官方 ZIP 上傳、啟用及驗收流程，並說明更新、停用和刪除各自可能影響什麼。適合需要自行維護網站的台灣使用者，用一份簡短紀錄管理新增功能與長期成本，避免重複安裝、忘記授權或在正式站一次更動太多項目。

最新旅遊情報攻略

資料來源

生活分享