Line Chat 浮動按鈕：WordPress 網頁加入 Line，開始即時聊天！

這是一篇完整「 WordPress Line Chat 」教學，我們將示範如何在 WordPress 網站嵌入 Line 通訊按鈕，讓訪客可透過彈跳視窗，連結 Line 與站長聯繫。

經營 電商網站、形象網站 的站長，可能都需要在網站上嵌入社群軟體，更方便經營品牌形象，與拓展線下經營。

我們已經有：嵌入 Facebook 粉絲專頁＋社團、嵌入 FB Messenger 、嵌入 Instagram 教學。

那如果想要在 WordPress 網站，嵌入 Line 社群，該如何做呢？

我會推薦使用 Chaty 外掛，製作 Line 彈跳視窗按鈕。除了有漂亮的按鈕圖示，還能自訂大小、擺放位置、觸發條件等..。

本篇文章，會從創建 Line 官方帳號開始，進行完整教學，跟著文章步驟，即可順利完成嵌入唷！話不多說，我們趕快開始學習吧！

• Chaty 是什麼？
• 1. 創建 Line 官方帳號
• 2. 安裝 Chaty 外掛
• 3. Chaty 外掛連結 Line 設定
• 常見問題
• WordPress 學習資源

---

Chaty 是什麼？

Chaty 是一款應用程式通訊外掛，支援 20 多個應用程式，包含 Line、WhatsApp、FB Messenger 等..，讓用戶可以直接在網站上使用應用程式，與網站聯絡。

Chaty 外掛可以自訂聊天按鈕顏色、位置、圖示、字體等..，站長們可以根據品牌風格和需求進行設計。

外掛也有多種觸發功能，例如：在用戶進入網站後幾秒出現聊天按鈕、用戶瀏覽網站多少內容時跳出按鈕等..。

Chaty 還能與 Google Analytics 整合，追蹤聊天視窗點擊次數、流量頁面來源等..，讓站長掌握行銷數據。

Chaty 小工具還能新增聯絡表單，幫助網站收集用戶的姓名、電子郵件、聯絡電話等..。

Chaty 提供 多種方案，包含免費版本，免費版每個月可接觸 500 位用戶，用戶數量超過後，系統會提醒站長升級，或是等到下一個月重新開始計算。

---

1. 創建 Line 官方帳號

首先，我們需要先創建官方帳號，取得 QR Code 連結。

到 Line Developer Portal 並使用個人 Line 帳號登錄，如果沒有帳號，就先要先註冊一個。

登入之後，成功跳轉到首頁，我們在主選單找到「 Products 」按鈕，點擊進入。

點擊「 Messaging API 」按鈕，建立一個 Line 官方帳號 。

點擊後，我們會直接進入創建頁面。確認「 Channel type 頻道類型 」為「 Messaging API 」，新建「 Provider 提供者 」，依序頻道提供者名稱、上傳頻道圖示。

往下滑，依序填入「 頻道名稱 」、「 頻道說明 」。選擇「 頻道分類 」、「 頻道子分類 」。

繼續下滑，填寫常用 Email ，隱權條款及服務條款可自由選擇是否填入，完成後，勾選同意 Line 相關條款，點擊「 Create 」創建官方帳號。

點擊後，會跳出彈跳視窗，再次確認是否創建帳號，點選「 OK 」，繼續完成創建動作。

等待一段時間， Line 官方帳號就創建完成囉！

我們會跳到該帳號的首頁，選擇「 LINE Official Account Manager 」即可前往管理該帳號，進行查看聊天紀錄、設定聊天機器人等 .. 操作。

但我們先不進行「 LINE Official Account Manager 」相關教學，若想了解更多，可前往：Line 官方帳號經營秘笈 學習唷：）

切換至「 Messaging API 」面板，找到並複製「 Bot basic ID 」，接著我們就可以進行下一章節啦！

---

2. 安裝 Chaty 外掛

這一章節將來教大家安裝 Chaty 外掛，進行初步設置。外掛本身是免費的，站長們可以放心安裝囉！

首先前往 WordPress 後台 > 外掛 > 安裝外掛，搜尋「 Chaty 」，找到外掛後，點選安裝＋啟用外掛。

第一次啟用時，會跳出歡迎視窗，有相關英文教學影片可以觀看，這邊可以先跳過，點選關閉或是下方的「 開始設定 Chaty 」，犬哥會在下一章節手把手帶你設定操作。

恭喜你成功安裝啟用 Chaty 啦！接下來就來做 Chaty 連接 Line 通訊的設定吧：）

---

3. Chaty 外掛連結 Line 設定

這一章節將會教大家利用 Chaty 外掛連結 Line 的相關設定，只需要簡單幾步驟，就能成功串接，快跟上吧：）

首先前往 WordPress 後台找到 Chaty，點選「 建立小工具 」，開始進入聯絡按鈕的相關設定。

Chaty 設定介面滿簡單親民的，且有繁體中文，相信站長們都能輕鬆上手！

第一步：選取聯絡管道

首先，可以為這個工具命名，這邊隨意命名一個自己記得的名稱即可，方便以後調整時可快速找到工具。

接著下方有多個應用程式軟體選項，今天是要串接 Line 通訊，所以點選 Line 的圖示，新增管道。

預設本身會有 Phone 電話的選項，若不需要的話，可點擊 Icon 圖示取消，或是下滑找到管道，點選垃圾桶刪除。

接著，可以在 Line 管道將我們剛申請的 Line Bot basic ID 貼上，格式如下：

這邊可以設定要在電腦版或手機版顯示，點選「 設定 」，還能自訂按鈕外觀，像是按鈕顏色、游標暫留文字等..，付費版還可以上傳自訂圖片。

設定完後點選上方的「 下一步 」進行更多設定。

第二步：自訂小工具

這一步可以讓站長客製化彈出式訊息按鈕設計，包含按鈕擺放的位置、尺寸（可自訂 px）、行動呼籲文字（CTA）、字型、動態效果等..。

此外，也可以加上「 待處理訊息 」提示，讓用戶在點擊按鈕之前，就能知道有未讀訊息，可藉此吸引用戶點擊查看。

若有購買付費進階版，還能開啟 Google Analytics 串接設定，追蹤聊天視窗點擊率、流量頁面來源等..。

都設定完成後再點選下一步，接續設定。

第三步：觸發程序及顯示目標對象

在這一步，我們可以設定一個或多個按鈕觸發方式，像是在頁面載入時幾秒出現、捲動頁面多少後出現，或是當用戶即將離開頁面時，跳出按鈕小工具，吸引用戶。

下方還有付費版的進階設定，像是顯示於指定頁面、指定日期顯示等..。完成後再次點選下一步。

第四步：新增聊天視窗

接著來到最後一步啦！

Chaty 小工具有提供線上聊天室功能，無限制訊息次數，可以預設回覆、私人筆記、提醒等..，還有 iOS 和 Android 應用程式，方便站長管理回覆訊息。

因這篇文章以 Line 通訊為主，所以先不做設定（之後有需求都可再自行新增），直接點擊上方的「 儲存小工具 」就可以完成所有設定啦！

這時會到網站前台，應該就可以看到按鈕出現囉！

好啦！以上就是今天的教學，希望有幫助到站長們唷：）

---

常見問題

---

WordPress 學習資源

學習網站架設＋網路行銷的過程中，或許會遇到一些解決不了問題，可以在下方留言給我，我會盡力協助解答！

接下來，額外分享 2 項實用資源，可有效幫助大家做學習。

資源一：犬哥數位（專業 WordPress 網頁設計公司）

如果你沒時間自己架站、或是遇到解決不了的網站問題。歡迎洽詢 犬哥數位（WordPress 網頁設計公司），請專家製作會更有效率！

我們有多年網頁設計經驗，加上上百個實戰高質感作品，絕對能滿足您的需求！

資源二：WordPress＋SEO 超強線上課程

這門 WordPress 高手架站課 濃縮了犬哥多年在網頁設計的實戰經驗，從網頁設計觀念、WordPress / WooCommerce 後台操作、熱門主題.外掛教學、品牌網站 / 部落格 / 電商網站，3 大類型網站建置方法等 .. 豐富內容，一次教會你。

課程內容非常的紮實（長度超過 20 小時）。如果你剛學習自架網站，這門課程可以讓你用最快的速度，就學會這項技能！

網站建立完畢後，但卻沒有流量怎麼辦？或是只能靠花錢投廣告才會有訂單？

這門 SEO 排名飆升課，教你掌握關鍵字策略、SEO 文章撰寫、多種實戰 SEO 技巧、透視對手 SEO 策略、SEO 必備軟體教學、最新 AI SEO 應用等 ..，大幅提升行銷能力。

帶你衝上 Google 排名第一頁，大量提升網站營收和訂單！