WordPress Line Chat 浮動按鈕：在網頁加入 Line 即時聊天按鈕（嵌入 QR Code）

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

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

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

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

別擔心，我們可以使用 GetButton.io 生成 Line 彈跳視窗按鈕程式碼，並且安裝 Chat Button 外掛，貼上程式碼，即可完成嵌入 Line 彈跳視窗設置。

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

• 1. 創建 Line 官方帳號
• 2. 前往 GetButton.io 生成程式碼
• 3. 安裝 Chat Button 外掛＋貼上程式碼
• 常見問題
• WordPress 學習資源

WordPress Line Chat 浮動按鈕：在網頁加入 Line 即時聊天按鈕影片學習：

---

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. 前往 GetButton.io 生成程式碼

這個章節，我們前往 GetButton.io 生成按鈕程式碼，點擊下方按鈕，即可前往 GetButton.io ：）

往下滑，我們來生成 Line 按鈕程式碼：）

點擊 Line 圖示，並進行連結設定，在輸入連結的位置，必須以 GetButton.io 提供的範例網址進行設定，否則會無法順利串接。

複製範例網址貼上，並將最後的 ID 變更為我們自己帳號的「 Bot basic ID 」。格式如下：

http://line.me/ti/p/你的 Bot basic ID

小提醒：在貼上「 Bot basic ID 」時，小老鼠符號「 ＠ 」必須保留，千萬不能刪除唷！

接著往下，我們可以選擇按鈕生成位置，以及鼠標停留在按鈕上時，會跳出的懸停文字。

其餘功能，因為 Line 無法使用線上聊天系統，所以無法進行設定，這一步驟就先跳過：）

下方是進階功能，可以決定更多功能，像是：啟用 Google Analytics、設定更多聊天機器人訊息、按鈕大小等 .. 。

有興趣想進行升級的站長，可以考慮看看，這邊我們先以免費版本進行示範。

往下滑，輸入 Email ，點擊「 Get Button Code 」生成程式碼。並進行複製，方便後續操作。

---

3. 安裝 Chat Button 外掛＋貼上程式碼

生成＋複製好按鈕程式碼，接著我們便開始進行 WordPress Line Chat 串接吧！

我們需要使用 Chat Button 外掛，貼上程式碼，幫助我們貼上程式碼，串接 Line Chat。

前往 WordPress > 安裝外掛 > 搜尋「 Chat Button 」進行安裝＋啟用。

安裝＋啟用完成，在左側列找到「 GetButton 」，前往頁面，貼上剛剛複製好的按鈕程式碼，選擇儲存。

這樣就完成設定囉，我們可以前往前台網頁檢查，發現成功新增 WordPress Line Chat 功能～

---

常見問題

---

WordPress 學習資源

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

接下來，額外分享 3 項架站資源，可有效幫助大家處理網站問題。

資源一：WP 高手架站課（線上課程）

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

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

幫你增加網路曝光，提高你的線上營收！

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

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

資源三：更多犬哥教學資源

如果你在操作過程中遇到問題，可以加入 引力行銷圈 – 犬哥網站（目前有超過 9000+ 團員）。除了有網友一同幫你解惑外，犬哥團隊也會同步在社團幫助大家。

如果你想學更多網頁設計、數位行銷知識，也歡迎追蹤 犬哥網站 IG。或是喜歡看影片學習，可關注 YouTube 頻道。