LIFF 設定

LIFF 設定

畫面以實際 LINE 後台為準，LINE 改版時位置可能略有不同。截圖中的個人資料（頭像、其他 Provider 名稱、官方帳號 ID、網址與 LINE 名字）已遮蔽，你的畫面會顯示自己的資料。

LIFF 是什麼

LIFF 是 LINE 提供的功能，讓客人不用離開 LINE、不用下載 App，就能在聊天室裡打開一個像網頁的畫面。

客人點了 Rich Menu 上的「預約」，或聊天訊息裡的連結，LINE 會從畫面下方拉起一個視窗，看起來就像一個小網站。用完往下滑或按右上角的 ✕，就回到原本的聊天室。

它跟一般網頁有什麼不同？

• **在 LINE 裡打開：**客人不用切到別的 App，也不用記網址。
• **知道是誰在用：**客人第一次打開時，LINE 會問一次是否同意讓本店取得 LINE 名稱。同意後，系統就知道「這是哪位好友」，預約時不必再填 LINE 帳號，預約通知也會送到他的 LINE。
• **跟你的官方帳號綁在一起：**這些畫面屬於你的店，客人看到的是你的店名。

在這個平台上，LIFF 用在哪裡？

給誰用	畫面
客人	預約、我的預約、我的帳戶（個人資料、預約紀錄、消費紀錄）
客人	你自己做的 LIFF 頁面，例如價目表、店家介紹、活動頁
員工	員工工作台：看今天的預約、接單、請假

**跟 Rich Menu 的關係：**Rich Menu 是聊天室下方那排圖片按鈕，像是店門口的招牌；LIFF 是按下去之後打開的那個畫面，像是走進店裡。通常會把 Rich Menu 的按鈕設成打開 LIFF 的網址，例如「預約」按鈕打開預約頁。

**要先做什麼？**照這一頁的步驟到 LINE 後台建立 LIFF，客人才打得開這些畫面。只用 Rich Menu、不需要預約和頁面的話，可以不設定。

在哪裡設定

位置：上方選單「設定」› 左側「LIFF 設定」（在「LINE 串接」下面一項）。手機：左上角 ☰ 選單 › 設定 ›「LIFF 設定」。

• 要先完成 LINE 串接，才能設定 LIFF；還沒串接時頁面會顯示「請先完成 LINE 串接」，並附上前往「LINE 串接」的連結。
• 有「查看店家資料」權限的人員看得到這一頁（不需要「查看好友」權限）。
• 只有店主可以設定；其他人員只看得到狀態。
• 只使用 Rich Menu 的店家不需要設定 LIFF。開通預約服務後，首頁會提醒你完成 LIFF 設定。

整個設定在 LINE Developers Console（https://developers.line.biz/console/ ）進行，大約 10 分鐘。頁面上按「開始設定」會顯示下面 5 步，每一步旁邊都有「操作說明」按鈕連回這裡。

步驟 1：建立 LINE Login 頻道

點選路徑：LINE Developers Console › 你的店家 Provider（與官方帳號同一個）› Create a new channel › LINE Login

欄位	填什麼
Provider	你的官方帳號所在的那個 Provider（一定要同一個）
Region	Taiwan
Channel name	店名（不能含「LINE」這個字）
Channel description	例如「店名 的預約與會員服務」
App types	勾 Web app
Require two-factor authentication	維持預設（開啟），不要關掉
其他欄位	照預設

最後勾選同意條款，按 Create。按一次就好，不要連按：如果畫面顯示「The requested page doesn’t exist」，請看下方「疑難排解」。

理由：同一個 Provider 下，同一位顧客在官方帳號與 LIFF 的使用者 ID 才會一樣，平台才認得出他。

步驟 2：連結官方帳號

點選路徑：LINE Developers Console › 你的店家 Provider › 該 LINE Login 頻道 › Basic settings 分頁 › 捲到最下方「Add friend option」› Linked LINE Official Account › Edit › 選你的官方帳號 › Update

「Linked LINE Official Account」不在頁面上方，要在 Basic settings 分頁一直往下捲，在「Add friend option」這個標題底下。

連結後，LIFF 才能知道顧客是不是你的官方帳號好友（不是好友時，LIFF 會提示他加好友，才收得到預約確認通知）。

選不到你的官方帳號＝Provider 選錯，請回第 1 步在正確的 Provider 重建。

步驟 3：新增 LIFF

點選路徑：LINE Developers Console › 你的店家 Provider › 該 LINE Login 頻道 › LIFF 分頁 › Add

欄位	填什麼
LIFF app name	頁面上建議的名稱（店名去掉「LINE」；不能含「LINE」）
Size	選 Full（另外兩個選項 Tall、Compact 不要選）
Endpoint URL	頁面上顯示的網址（按「複製」再貼上）
Scopes	勾 openid 與 profile（chat_message.write 不用勾）
Add friend option	選 On (Normal)（不要選 On (Aggressive) 或 Off）
Options › Scan QR	關
Options › Module mode	關

填完按最下方的 Add。

之後要改端點網址：點既有 LIFF 的 Edit，不要再按 Add。

（截圖待補：Add friend option 的同意畫面）

步驟 4：切成 Published

點選路徑：LINE Developers Console › 你的店家 Provider › 該 LINE Login 頻道 › 頻道名稱旁的狀態「Developing」› Publish

沒切的話，只有你自己打得開，客人都打不開。

步驟 5：貼回後台並實測

1. 在頁面上貼上 Channel ID（LINE Developers Console › 你的店家 Provider › 該 LINE Login 頻道 › Basic settings 分頁 › Channel ID）與 LIFF URL（同一個頻道 › LIFF 分頁 › LIFF URL）。
   • 整串網址直接貼就好，平台會自動整理（https://liff.line.me/...、https://miniapp.line.me/... 都可以）。
   • 欄位下方出現「這個 LIFF 不屬於你填的 Channel，請確認是在同一個 LINE Login 頻道新增的」：LIFF 和 Channel ID 不是同一個頻道的，請兩個都從同一個 LINE Login 頻道複製。
2. 按「儲存」。頁面會顯示 QR code 與「用手機 LINE 打開」。
3. 用你自己的手機掃 QR code（或在手機上點連結），在 LINE 裡打開。看到「你好」就完成了，頁面會在幾秒內自動變成「LIFF 已完成設定」。已開通預約服務時，畫面下方會有「預約」「我的預約」「我的帳戶」三個分頁（客人看到的也是這樣，見「客人預約」）。
4. 頁面顯示「已打開，但還無法確認是同一個 Provider：請先用這支手機加入你的官方帳號好友、傳一句話給官方帳號，再打開一次」：照做後再打開一次即可。平台用「官方帳號見過這個人」來確認 LIFF 與官方帳號在同一個 Provider。
5. 頁面顯示「LINE Login 頻道連結的不是你的官方帳號，或你還沒加入官方帳號好友：請先用這支手機加入你的官方帳號好友，再到 LINE Login 頻道 › Basic settings › Linked LINE Official Account › Edit 確認選的是你的官方帳號」：LINE 回報你不是「LINE Login 頻道所連結的官方帳號」的好友。有兩種可能：
   • 你還沒用這支手機加入本店官方帳號好友（例如只傳過訊息）：先加入好友，再打開一次 LIFF。
   • 第 2 步連結到別的官方帳號了。點選路徑：LINE Developers Console › 你的店家 Provider › 該 LINE Login 頻道 › Basic settings 分頁 › 捲到最下方「Add friend option」› Linked LINE Official Account › Edit › 選你的官方帳號 › Update，改好後用手機再打開一次 LIFF。
6. 頁面顯示「LIFF 沒有勾選 profile 權限：請到 LINE Login 頻道 › LIFF 分頁 › 點進你的 LIFF › Scopes 勾選 profile，存檔後再打開一次」：第 3 步的 Scopes 沒有勾 profile。點選路徑：LINE Developers Console › 你的店家 Provider › 該 LINE Login 頻道 › LIFF 分頁 › 點既有 LIFF › Edit › Scopes 勾選 profile › Update，再用手機打開一次 LIFF。沒有 profile，系統就無法替客人確認好友身分，新客會被誤導去聯絡店家。

完成後，頁面會自動顯示：

• 「還沒有客人打開過」：除了你之外，還沒有其他人打開過。
• 「已確認客人可以正常打開」：已經有客人成功打開，表示第 4 步的 Published 沒問題。

完成後，頁面還會一直保留「給客人的 LIFF 網址」：網址（https://liff.line.me/...）、「複製」按鈕與 QR code。可以把這個網址或 QR code 放在店裡或社群，客人用 LINE 打開。按「複製」沒反應時，請長按網址自行複製。看得到這一頁的人員都看得到這個區塊。

要換頻道或 LIFF：按頁面上方的「修改設定」重新貼上（會回到實測前的狀態，需要再測一次）。按頁面最下方的「移除 LIFF 設定」會停用 LIFF，員工綁定保留。

疑難排解

• 客人打不開，你自己打得開：多半是第 4 步沒有切成 Published。切完後，可以找另一個 LINE 帳號（例如家人的手機）打開一次確認。
• 第 2 步選不到你的官方帳號：LINE Login 頻道建在錯的 Provider。請在官方帳號所在的 Provider 重新建立 LINE Login 頻道，再做一次第 3–5 步。
• 第 1 步按 Create 後出現「The requested page doesn’t exist」：先不要再建一次。回到 LINE Developers Console › 你的店家 Provider，看頻道清單裡有沒有剛剛的 LINE Login 頻道：有的話直接點進去繼續第 2 步；沒有的話，重新整理頁面後再建立一次（只建一個，避免同一個 Provider 下有兩個重複的頻道）。
• 第 2 步找不到「Linked LINE Official Account」：它在 Basic settings 分頁的最下方「Add friend option」標題底下，請往下捲到底。
• LIFF 顯示「LIFF 權限設定不完整，請店家確認已勾選 openid」：第 3 步的 Scopes 沒有勾 openid。點選路徑：LINE Developers Console › 你的店家 Provider › 該 LINE Login 頻道 › LIFF 分頁 › 點既有 LIFF › Edit › 勾選後儲存。
• LIFF 顯示「這個 LIFF 不屬於你填的 Channel ID」：頁面上填的 Channel ID 和 LIFF 不是同一個 LINE Login 頻道的。按「修改設定」重新貼上。
• LIFF 顯示「這家店的 LINE 串接目前無法使用」：LINE 串接被解除了，請先到「LINE 串接」重新串接。
• 更換了官方帳號：如果新官方帳號在不同的 Provider，LIFF 要重新實測，員工也要重新綁定（操作紀錄會寫「更換官方帳號，LIFF 需重新實測、員工綁定已清除」）。
• 實測時顯示「LINE Login 頻道連結的不是你的官方帳號，或你還沒加入官方帳號好友…」：見上方步驟 5 的第 5 點：先用這支手機加入本店官方帳號好友，再到第 2 步的位置確認選的是你的官方帳號。
• 實測時顯示「LIFF 沒有勾選 profile 權限…」：見上方步驟 5 的第 6 點，到第 3 步的位置勾選 profile。
• 客人看到「店家的預約設定需要調整，請直接聯絡店家」、或通知中心出現「有客人無法確認好友身分，請檢查 LIFF 設定…」：見下方「老客好友身分的自動確認」。

老客好友身分的自動確認

官方帳號串接到平台之前就加好友的客人，平台一開始不知道他們是好友。客人打開店家的預約頁（LIFF）時，系統會向 LINE 確認這位客人是不是「LINE Login 頻道所連結的官方帳號」的好友，是的話就自動記為好友，客人可以直接預約。所以第 2 步的「Linked LINE Official Account」一定要選本店的官方帳號，第 3 步的 Scopes 一定要勾 profile。

通知中心出現「有客人無法確認好友身分，請檢查 LIFF 設定（LINE Login 頻道是否連結本店官方帳號、Scope 是否勾選 profile）」：客人這時會看到「店家的預約設定需要調整，請直接聯絡店家」，沒辦法預約。請檢查：

• 第 2 步：LINE Login 頻道 › Basic settings 分頁 › 最下方「Add friend option」› Linked LINE Official Account 是不是本店的官方帳號。
• 第 3 步：LINE Login 頻道 › LIFF 分頁 › 點既有 LIFF › Edit › Scopes 有沒有勾 profile。

「設定 › LIFF」出現黃色卡片「系統暫停自動確認老客好友身分」：系統發現有幾位本店的好友，LINE 卻回報他們不是「LINE Login 頻道所連結的官方帳號」的好友，很可能是第 2 步連結到別的官方帳號，所以先暫停自動確認（已經確認過的客人不受影響；這段期間還沒確認的老客打開預約頁，會看到「店家的預約設定需要調整，請直接聯絡店家」）。同時通知中心會收到「系統暫停自動確認老客好友身分，請到 LINE Developers › LINE Login 頻道 › Basic settings › Linked LINE Official Account 確認連結的是本店官方帳號」。

請先照上面的路徑確認連結的官方帳號（在 LINE Developers Console 改好之後），回到「設定 › LIFF」由店主按卡片上的其中一個按鈕；只有這兩個按鈕會解除暫停：

按鈕	什麼時候按	會怎樣
我已改正連結的官方帳號	確實連錯了，而且已經改選本店的官方帳號	先問「之前自動確認的老客會改回「未確認」，他們下次打開預約頁時會重新確認。確定嗎？」。確定後，之前靠自動確認記為好友的客人改回「未確認」（他們下次打開預約頁時會用正確的設定重新確認），並恢復自動確認
設定沒有問題，恢復自動確認	檢查後連結的確實是本店的官方帳號	只恢復自動確認，已確認的客人不變

• 只有店主看得到這兩個按鈕；其他人會看到卡片與說明。
• 在「LIFF 設定」按「修改設定」重新儲存或「移除 LIFF 設定」不會解除暫停，卡片會一直留著，直到店主按其中一個按鈕。
• 更換成另一個官方帳號時，暫停會自動解除（舊官方帳號的好友紀錄已清除）。
• 「LIFF 好友確認問題」的通知，店主預設會同時在 LINE 收到（由店家的官方帳號傳送，需已在本店 LIFF 綁定 LINE；會用到少量訊息額度），可在「通知設定」關掉。

LIFF 分頁與頁面

客人用 LIFF 網址（https://liff.line.me/你的LIFF ID）打開店家後，畫面下方固定有三個分頁：「預約」「我的預約」「我的帳戶」，詳見「客人預約」。

在同一個 LIFF 網址後面加上路徑，可以直接開到指定的位置，貼進 Rich Menu 的「開網址」熱區就能用：

要開的畫面	網址
預約	https://liff.line.me/你的LIFF ID/book
我的預約	https://liff.line.me/你的LIFF ID/my
我的帳戶	https://liff.line.me/你的LIFF ID/account
自己做的 LIFF 頁面	在「LIFF 頁面」列表按「複製網址」（形如 …/p/頁面代碼），見「LIFF 頁面」

只貼 LIFF 網址、後面不加路徑時：客人有預約服務就落在「預約」分頁；本店沒有預約服務則落在「我的帳戶」。已綁定且有工作台權限的員工，仍然直接進工作台。

開啟分享功能（選擇性）

這一步是選擇性的。如果你想在 LIFF 頁面使用「分享這一頁」按鈕（客人把頁面用卡片分享給朋友），要先在 LINE 後台同意並開啟分享功能；沒有開啟時，客人看不到分享按鈕，其他功能不受影響。

1. 打開 LINE Developers Console，點選路徑：店家 Provider › LINE Login 頻道 › LIFF 分頁 › shareTargetPicker。
2. 勾選同意，再按 Enable。
3. 每個 LINE Login 頻道各自同意一次；之後更換 LINE Login 頻道，要在新頻道重做一次。

LIFF 頁面的按鈕怎麼設定「分享這一頁」，見「LIFF 頁面」。