WordPress Line Chat 浮動按鈕:在網頁加入 Line 即時聊天按鈕( 使用 GetButton.io )

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 官方帳號開始,進行完整教學,跟著文章步驟,即可順利完成嵌入唷!話不多說,我們趕快開始學習吧!

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

WordPress Line Chat 浮動按鈕:在網頁加入 Line 即時聊天按鈕

1. 創建 Line 官方帳號

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

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

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

WordPress Line Chat:在主選單找到「 Products 」按鈕,點擊進入
在主選單找到「 Products 」按鈕,點擊進入

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

前往 Line Developer Portal,創建 Messaging API

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

創建 Messaging API 類型的 Line 頻道

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

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

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

填寫常用 Email、勾選同意 Line 相關條款

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

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

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

點擊「 LINE Official Account Manager 」可前往管理該官方帳號

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

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

切換至「 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

串接 Line 官方帳號、貼上 Bot basic ID 連結

小提醒:在貼上「 Bot basic ID 」時,小老鼠符號「 @ 」必須保留,千萬不能刪除唷!

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

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

選擇按鈕位置、輸入懸停文字

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

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

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

輸入 Email,取得 Code,並進行複製

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

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

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

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

WordPress Line Chat:安裝+啟用 Chat Button

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

WordPress Line Chat:貼上按鈕程式碼,選擇儲存

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

成功在 WordPress 網站嵌入 Line 彈跳視窗

常見問題

如何在 WordPress 嵌入 Line 社群?

先在 Line Developer Portal 創建官方帳號,完成後,找到「 Bot basic ID 」進行複製。

接著前往 GetButton.io 生成按鈕程式碼,設定串接連結,需使用「 http://line.me/ti/p/你的 Bot basic ID 」格式,完成後輸入 Email ,產生程式碼。

最後前往 WordPress 安裝 Chat Button 外掛,在後台設置貼上程式碼,即可完成嵌入 Line 彈跳視窗設置。

本文有詳細圖文教學,可以參考唷:)

可以串接其他社群軟體,進行線上通訊嗎?

可以,GetButton.io 還可以串接 FB Messager、WhatsApp、Instagram 等 .. ,進行即時線上通訊,不過免費版本只能串接 2 個社群軟體唷!

若是有串接 FB Messager 需求,也可參考:在 WordPress 網站嵌入 FB Messenger 教學。

我想串接社群平台,而不是線上即時通訊,有辦法嗎?

有的,目前網站上已有:串接 Facebook 粉絲專頁 / 社團串接 Instagram 貼文 教學,可供參考:)

在 WordPress 上,怎麼串接社群軟體登入?

使用 Super Socializer 即可輕鬆做到!

它是一款優質的社群外掛,主要有 3 大功能,分別是「 社交登錄 」、「 社交分享 」、「 社交評論 」一款外掛就能搞定這些事情,簡單俐落!

詳細可參考:用 Super Socializer 建立 FB / Google 快速登入使用 LINE login 快速登入 教學。


WordPress 學習資源

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

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

資源一:犬哥數位(專業 WordPress 網頁設計公司)

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

WordPress 網頁設計公司|犬哥數位

資源二:WP 精選模組攻略書

由於 WordPress 主題 / 外掛有非常多種,很多網友私訊我不知道安裝哪一款,才有辦法實現功能。或是已經試了很多款外掛,但始終找不到適合自己的。

對此我整理了 高達 100 多款精選主題&外掛大全(電子書),這些都是我們團隊協助客戶開發案件時,會搭配使用的。一來外掛品質優良,二來功能性也足夠強!

WordPress 模組指南書
WordPress 模組指南書

資源三:官方教學資源(含 FB 社群解答)

如果你偏愛自架網站,也歡迎持續關注 犬哥網站 Blog,我們都持續有發布新的網站架設、網路行銷教學。

或是你比較喜歡看影片學習,也可關注 YouTube 頻道,幫助你更容易進入狀況。

當然,如果你在操作過程中遇到問題,也可以加入 WordPress 架站 x SEO 教學時光屋 – 犬哥網站 ,除了有網友一同幫你解惑外,犬哥團隊也會同步在社團幫助大家。

犬哥網站|交流社團
犬哥網站交流社團

關於作者

犬哥網站:網頁設計 x 網路行銷教學平台

犬哥網站

我們分享 WordPress 架站 x 網路行銷知識,不需會任何程式技術,就能自己建立各種網站。 搭配豐富的網路行銷教學,幫助你被更多人看到。 趕快跟著我們的腳步,開始學習吧:)

在〈WordPress Line Chat 浮動按鈕:在網頁加入 Line 即時聊天按鈕(嵌入 QR Code)〉中有 2 則留言

    1. 犬哥網站

      嗨,Hank

      請問是哪一端反應時間過長呢?

      如果是單一外掛,那通常都會是外掛問題,建議你可檢查是否有外掛衝突

      如果是前台頁面的 Line 按鈕反應時間過長,建議你可重新串接,嘗試看看是否是 GetButton.io 產生的問題。

      最後一個可能,就是主機端方面的疑問,就需要去向主機商詢問並排除唷!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

返回頂端