開發 LINE Bot 時，除了純文字回覆，LINE Messaging API 還提供多種圖文互動功能。這篇文章整理我在實作中最常用到的四種：快速回覆（Quick Reply）、LIFF 前端框架、圖文選單（Rich Menu）與 Flex Message，記下它們的用途、設定方式與注意事項。
什麼是 LINE Bot 的快速回覆（Quick Reply）？怎麼設定？
可在訊息中加入快速回覆按鈕，讓使用者能夠快速回應。快速回覆功能可在一對一聊天、群組聊天和多人的聊天中使用，每則訊息最多可設定 13 個快速回覆按鈕。
快速回覆按鈕的消失時機：
- 當使用者點擊快速回覆按鈕時，按鈕會消失（相機、相簿、日期時間選擇器和位置資訊等動作除外，這些按鈕會保留直到使用者提供所需資訊）。
- 如果聊天室中有新的訊息（無論是來自官方帳號、使用者或其他成員），快速回覆按鈕也會消失。若新訊息被刪除，按鈕會重新出現。
什麼是 LIFF（LINE Front-end Framework）？如何從零開始？
LINE 前端框架（LIFF，LINE Front-end Framework）是由 LINE 提供的網頁應用程式框架，透過將 LIFF SDK 整合至網頁應用程式，可以存取 LINE 平台提供的資訊，或使用 LINE 應用程式的功能。
主要功能：
- 與 LINE Login 和 LINE 平台整合： LIFF 與 LINE Login 整合，可以透過 LINE 平台的授權流程，安全地存取使用者的個人資料。
- 分享目標選擇器： 這是一個強大的工具，允許使用者透過 LIFF 應用程式，選擇 LINE 好友並傳送訊息。
為了協助新手快速上手，LINE 提供了 LIFF 起始應用程式（starter app），這是一個包含基本功能的範本，開發者可以在此基礎上進行自訂和開發。
開始使用 LIFF 起始應用程式的步驟：
- 環境準備：
- Node.js： 確保已安裝 Node.js，建議版本為 16.13.1。
- Yarn： 使用 Yarn 作為套件管理工具，建議版本為 1.22.17。
- Netlify CLI： 若計劃使用 Netlify 部署，建議版本為 9.16.3。
- 下載並執行原始碼：
- 下載原始碼： 在終端機中執行以下指令，下載 LIFF 起始應用程式的原始碼：
```bash
git clone https://github.com/line/line-liff-v2-starter.git
```
- 選擇實作版本： 在 `line-liff-v2-starter/src/` 目錄下，有三種實作版本可供選擇：
- Vanilla JavaScript： `line-liff-v2-starter/src/vanilla`
- Next.js： `line-liff-v2-starter/src/nextjs`
- Nuxt.js： `line-liff-v2-starter/src/nuxtjs`
- 安裝依賴套件並啟動： 進入所選目錄後，執行以下指令安裝套件並啟動應用程式：
```bash
yarn install
yarn dev
```
啟動後，可在瀏覽器中訪問 `http://localhost:3000` 查看應用程式。
- 部署至伺服器：
- 使用 Netlify 部署： 若尚未有 Netlify 帳號，請先註冊。安裝 Netlify CLI 後，執行以下指令部署應用程式：
```bash
netlify deploy
```
按照指示完成部署流程。
- 取得並設定 LIFF ID：
- 建立 LINE Login 頻道： 在 LINE Developers Console 中，建立一個 LINE Login 頻道。
- 新增 LIFF 應用程式： 在該頻道中，新增 LIFF 應用程式，並設定相關資訊，如端點 URL。
- 設定 LIFF ID： 取得 LIFF ID 後，將其設定為環境變數，確保應用程式能正確運行。
LIFF 視窗的大小可以以以下三種大小之一顯示：Compact、Tall、Full。
如何把 LIFF 應用程式新增到 LINE Login 頻道？
要在 LINE 平台上運行 LIFF（LINE Front-end Framework）應用程式，需要將其新增至 LINE Login 頻道。以下是詳細步驟：
取得 LIFF ID 和 URL： 新增成功後，系統會生成 LIFF ID 和 LIFF URL，可在應用程式中使用這些資訊。
- 準備工作：
- 建立頻道： 在 LINE Developers Console 中，建立一個 LINE Login 頻道。
- 部署應用程式： 將 LIFF 應用程式部署至伺服器，確保其可透過 HTTPS 存取。
- 新增 LIFF 應用程式：
- 登入 LINE Developers Console： 使用您的帳號登入。
- 選擇頻道： 在主控台中，選擇要新增 LIFF 應用程式的 LINE Login 頻道。
- 進入 LIFF 頁籤： 點擊「LIFF」頁籤。
- 新增 LIFF 應用程式： 點擊「新增」按鈕，開始設定。
- 設定 LIFF 應用程式資訊：
- 應用程式名稱： 輸入 LIFF 應用程式的名稱，請避免使用「LINE」或類似字樣。
- 視圖大小： 選擇應用程式的視圖大小，可選擇「Compact」、「Tall」或「Full」。
- 端點 URL： 輸入 LIFF 應用程式的 HTTPS URL，請確保該 URL 可正常存取。
- 權限範圍（Scopes）： 根據應用程式需求，選擇所需的權限範圍，如 `openid`、`profile`、`email` 等。
- 加好友選項： 設定使用者在使用應用程式時，是否顯示加好友選項。
- 完成設定： 檢查所有設定，確保無誤後，點擊「新增」按鈕。
LINE 圖文選單（Rich Menu）是什麼？怎麼設定？
在 LINE 的 Messaging API 中，圖文選單（Rich Menu）是一種可自訂的互動式選單，可提升使用者與 LINE 官方帳號之間的互動體驗。
圖文選單的結構：
- 選單圖片： 一張 JPEG 或 PNG 格式的圖片，包含選單項目。
- 可點擊區域： 在圖片上定義的區域，每個區域可設定不同的動作，如開啟網址或發送訊息。
- 聊天列： 位於聊天視窗底部的選單，可自訂其顯示文字，用於開啟或關閉圖文選單。
設定圖文選單的方法：
- 透過圖形介面快速建立和設定圖文選單。
- 適合需要快速開發且不需高度自訂的情境。
- 使用 Messaging API：
- 提供進階自訂功能，如設定 postback 動作或日期時間選擇器。
- 適合需要高度自訂和動態管理圖文選單的情境。
在 LINE 的 Messaging API 中，可以為特定使用者設定專屬的圖文選單（Rich Menu），參考官方文件：Use per-user rich menus。同一個使用者可設定多個選單來切換。
Flex Message 是什麼？訊息結構怎麼組成？
Flex Message 是 LINE 提供的一種訊息格式，允許開發者透過 JSON 定義訊息的結構和樣式，以實現高度自訂的訊息內容。這種訊息格式適用於各種情境，如商品推薦、訂單確認等，提供豐富的視覺效果和互動性。
可以用官方模擬器線上模擬呈現效果：Flex Message Simulator
Flex Message 的結構：
Flex Message 的結構由三個主要部分組成：
- 容器（Container）： 最外層的結構，包含訊息的主要內容。主要有兩種類型：
- Bubble： 單一訊息泡泡。
- Carousel： 多個訊息泡泡的輪播。
- 區塊（Block）： 組成 Bubble 的部分，包括：
- Header： 標題區塊。
- Hero： 主要圖片或影片區塊。
- Body： 主要內容區塊。
- Footer： 底部區塊。
- 元件（Component）： 構成區塊的元素，如文字、圖片、按鈕等。
延伸閱讀
- Line Bot圖文回覆的幾個功能：同樣聚焦 LINE Bot、Messaging API，可接著比較不同情境的做法。
- 使用 n8n 與 LINE Bot 搭建 RAG AI 應用：同樣聚焦 LINE Bot，可接著比較不同情境的做法。
- 免程式碼將 ChatGPT 串接到 LINE 對話：FancyAI 與 LINE Bot 設定流程：同樣聚焦 LINE Bot，可接著比較不同情境的做法。
常見問題
LINE 快速回覆按鈕什麼時候會消失？
使用者點擊按鈕後就會消失，但相機、相簿、日期時間選擇器和位置資訊等需要使用者提供資訊的按鈕會保留。此外，聊天室有新訊息時按鈕也會消失，若新訊息被刪除則會重新出現。
一則訊息最多可以放幾個 LINE 快速回覆按鈕？
每則訊息最多可設定 13 個快速回覆按鈕。快速回覆在一對一聊天、群組聊天和多人聊天中都可以使用。
LIFF 應用程式的視圖大小有哪些選擇？
LIFF 視窗有三種大小：Compact（小型）、Tall（中型）和 Full（全螢幕）。新增 LIFF 應用程式時在 LINE Developers Console 中設定。
設定 LINE 圖文選單該用管理後台還是 Messaging API？
若只需要快速建立、不需高度自訂，用 LINE 官方帳號管理後台的圖形介面即可。若需要 postback 動作、日期時間選擇器或動態管理（如為特定使用者切換選單），則要透過 Messaging API。
Flex Message 和一般文字訊息有什麼不同？
Flex Message 透過 JSON 定義結構與樣式，由容器（Bubble/Carousel）、區塊（Header/Hero/Body/Footer）與元件（文字、圖片、按鈕）組成，可做出高度自訂的版面。開發時可先用官方 Flex Message Simulator 線上預覽效果。
部署 LIFF 應用程式有哪些注意事項？
LIFF 應用程式的端點必須是可正常存取的 HTTPS URL。可使用 Netlify 等服務部署（`netlify deploy`），取得 LIFF ID 後記得設成環境變數，應用程式才能正確運行。
參考資料
- LINE Messaging API — Using quick reply
- LINE Messaging API — Use per-user rich menus
- LINE Flex Message Simulator
- line-liff-v2-starter（GitHub）
最後更新
2026-08-28（原文發布於 2024-11-08，本文保留原始筆記內容並補上 GEO 結構。）
關於作者 {#author}
Claire Chang ｜ 企業 AI 導入與流程轉型顧問。專注於 AI Agent 架構設計、ERP 系統整合與企業 AI 治理。
首次發布：2024-11-08