iT邦幫忙

2025 iThome 鐵人賽

DAY 27
0
Modern Web

設計 x 開發:從 Figma 到 Vue,打造 LINE 互動形象網站!系列 第 27

27 用 LINE 官方帳號放大曝光力!如何結合網站打造互動體驗

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20250903/20172578KLM82bmWNL.png

前言

在這篇文章中,會分享「LINE 官方帳號」是怎麼做推播訊息、用戶互動、導回官網完成購買,形成一個完整的行銷漏斗(Marketing Funnel)。

行銷循環是怎麼發生的?

舉個例子:
假設用戶莉娜收到 LINE 推播廣告,是來自她之前購物過的美妝網站,這次主打商品有 50% OFF 的限時活動。莉娜很感興趣,於是透過點擊推播訊息中的「VIEW」按鈕,前往美妝網站開始瀏覽商品選購。

這個過程,對形象品牌網站來說,就是一次成功的導流與轉換機會
https://ithelp.ithome.com.tw/upload/images/20250903/20172578Qc6wGdKFCo.png

我們可以簡單的把此次流程整理如下:

 用戶透過 LINE 接收訊息 → 觸發導回網站的流程設計 → 回到網站

接下來,延伸介紹LINE 官方帳號有哪些常見的實用功能,可以怎麼實現網站行銷與用戶建立關係、創造互動,甚至提升轉換率。

認識 LINE 官方帳號的訊息發送方式

加好友歡迎通知

有曾經加入過 LINE 官方帳號為好友,應該都曾收過「XX您好!....感謝您加入好友」的即時推播。這是因為在用戶加入好友的當下,LINE官方帳號會自動推播加好友歡迎通知。
這段通知內容是 LINE 預設好的,但我們也可以進到 LINE OA(LINE Official Account)後台客製化調整文字、連結等內容。

LINE登入後台 → 聊天室相關找到「加入好友的歡迎訊息」,可以在訊息設定修改範本文字,右方也會即時預覽推播結果。
https://ithelp.ithome.com.tw/upload/images/20250903/20172578xpCak77wpo.jpg

LINE官方帳號一對一客服

除了好友通知之外,也可透過官方帳號進行「一對一對話」,手動輸入訊息發送給曾主動傳訊息給官方帳號的好友,這功能必須是對方曾經主動傳訊息給官方帳號才有辦法與他互動哦。

LINE OA 後台→「聊天」頁面可以看到訊息並做回覆,這功能非常適合作為形象網站的客服視窗💬,簡單、好用且可以免費使用。
https://ithelp.ithome.com.tw/upload/images/20250903/20172578VfccGEddXX.png
(在聊天可以查看,用戶發送的訊息。)

曾經對話過的用戶,可以到「聯絡人」做查看。
https://ithelp.ithome.com.tw/upload/images/20250903/2017257869E4IFhj1P.jpg

上述兩個功能,都是不用透過 Messaging API,只要創建LINE 官方帳號就可以免費使用,也是形象網站很實用的功能!

Messaging API:打造更客製化的訊息互動

除了 LINE 官方帳號預設的訊息功能外,還可以透過 Messaging API 做更客製化的訊息推播,主要有兩種發送方式:

  1. Reply API(主動回覆):當用戶主動傳送訊息給官方帳號時,系統可以立即透過 Reply API 進行自動回覆。
  2. Push API(主動推播):企業可以主動設定向用戶推送訊息,例如行銷活動推播、系統通知、優惠訊息等,這類訊息會計入每月的推播額度,若超出免費額度需要額外付費。

💡 目前 LINE 提供的最基礎免費方案,每月可發送 200 則推播訊息,可依據網站需求選擇加值方案,內容可以參考👉費用計算

(參考來源 常見問題22~23點付費 v.s. 免費訊息

至於行銷活動與優惠訊息內容的版面設計,可以先透過LINE 官方提供的 flex 模擬器製作,設定好按鈕跟宣傳文字的排列樣式,再將 JSON 複製到Push API 發送訊息程式內即可,詳細怎麼發送可以參考👉發送 Flex 訊息發送訊息Messaging API 參考

如何設定官方帳號圖文選單(Rich Menu)

應該有注意過,進入LINE官方帳號「聊天」頁面時,在對話框下半部會出現一塊圖文選單,可以點擊圖片中的按鈕,連結到網站或者是觸發活動互動。這邊要來分享怎麼透過 LINE OA 後台設定圖文選單

  1. 登入後點選「主頁」→ 展開聊天室相關 → 點「圖文選單」,再點「建立」按鈕。
    https://ithelp.ithome.com.tw/upload/images/20250903/20172578d3KXbhJzft.jpg
  • 輸入標題與公開日期。❗請注意一個官方帳號在同一個時段,只能公開一組圖文選單,公開後進入LINE官方帳號「聊天」就會顯示。

  • 後台提供12種圖文版型可以選擇,選定後會即時在左側顯示預覽畫面。
    https://ithelp.ithome.com.tw/upload/images/20250903/20172578eRQFOR5E5Z.png
    (LINE OA 後台圖文選單設定 圖片來源

  • 選好版型後,可以上傳圖文選單的圖片。❗ 請注意圖片尺寸需要符合 LINE 的設計規範,若尺寸不合是無法上傳的,可參考「設計規範」說明協助設計。
    https://ithelp.ithome.com.tw/upload/images/20250903/20172578g0XmYnxTT1.jpg
    (LINE OA 後台圖文選單設定 圖片來源

  • 圖文選單每個區塊,都可以設定一種動作,例如 類型選擇「連結」並輸入網址,點擊後就能導向特定頁面,動作標籤可輸入「前往網站」提示語。

完成所有設定後按「儲存」,前往官方帳號聊天對話查看,就可以看到新設定好的圖文選單顯示在下方囉!
https://ithelp.ithome.com.tw/upload/images/20250903/20172578nV54PlIJRJ.png

額外補充一點,前面有提到如果希望讓功能在 LIFF Browser 內開啟,可以事前到 LINE Developers → 選擇你的 Channel → 前往「LIFF」 → 新增一個 LIFF URL(如 /order-history),接著系統會自動產生一組像 https://liff.line.me/XXXXXXX-XXXXXXXX 的 LIFF URL。

將連結設定至圖文選單,當用戶在圖文選單中點擊這個連結時,會透過 LIFF Browser 打開你指定的頁面,加上程式可以執行以下互動:

  • 自動登入
  • 帶入 Access Token
  • 可以直接呼叫 liff.getProfile()liff.getIDToken() 取得用戶資料

如果想了解詳細怎麼設定 LIFF URL,可以參考第十六篇

結語

在這篇分享了在 LINE OA 如何設定加好友歡迎通知、如何使用聊天、設定圖文選單等,善用 LINE 官方帳號提供的各項功能,就能輕鬆將網站變得更具互動性與行銷力。
不管是想導流、提升轉換、還是建立品牌形象,這些工具都像是我們手上的小魔法,只要花點時間設定好好經營,回報往往超乎想像 🌟。
希望這篇文章能提供各位在打造形象網站的過程中,有更多靈感與操作指引。

參考資料與延伸閱讀

LINE 主動推播收費方式
LINE 分眾功能
常見問題參考來源
付費 v.s. 免費訊息參考來源
費用計算參考來源
LINE OA 後台來源
flex 模擬器來源
發送 Flex 訊息參考來源


上一篇
26 從開發到部署:使用 Zeabur 一鍵部署 Nuxt 專案
系列文
設計 x 開發:從 Figma 到 Vue,打造 LINE 互動形象網站!27
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言