LINE 預約系統怎麼做才不被客戶嫌?LIFF 內嵌式網頁的工程實戰

「我想在 LINE 上做預約系統」——美髮店、診所、按摩館、咖啡廳老闆問我最多次的需求第三名。

但多數做法都做錯了。最常見的失敗版本是:

1. 老闆在 LINE 群發圖文選單,「按此預約」→ 開瀏覽器
2. 客戶被丟到一個獨立網站
3. 客戶要重新登入、重新填姓名電話 LINE ID
4. 預約完還要記得回去 LINE 通知店家
5. 客戶第二次就懶得用了

這個 funnel 流失率 60-70%。真正能用的 LINE 預約系統,要把整個流程包進 LINE 裡面——這就是 LIFF (LINE Front-end Framework) 在做的事。

這篇拆給你看 LIFF 怎麼做、坑在哪、什麼時候該用、什麼時候不該用。

LIFF 是什麼?(60 秒講清楚)

LIFF 是 LINE 提供的一個機制,讓你把網頁嵌進 LINE 內建瀏覽器跑。從用戶角度看:

• 點 LINE 訊息裡的連結,頁面在 LINE 內開啟(不會跳到 Safari / Chrome)
• 你的網頁可以直接拿到客戶的 LINE 名稱、頭像、user ID(不用登入)
• 客戶填完表單可以直接 share 回到聊天室(留 footprint 給雙方)
• 整個過程沒有「離開 LINE」的感覺

從工程角度看:就是一個普通的 web app(React / Next.js / Vue 都行),但加上 LIFF SDK,就能用 LINE 提供的 API。

一個典型 LIFF 預約流程的設計

我做過幾個 LIFF 預約系統,流程通常長這樣:

1. 客戶在 LINE 群點 [立即預約] 圖文選單
   ↓
2. LIFF 開啟,自動拿到客戶 LINE 資料
   ↓
3. 顯示「Hi 王小明,要預約幾月幾號?」(自動帶名字)
   ↓
4. 客戶選日期 / 時段 / 服務項目
   ↓
5. 確認頁顯示總金額、店家位置
   ↓
6. 送出 → 寫進資料庫 + 觸發 webhook
   ↓
7. LINE 自動發訊息「您預約成功:6/15 14:00 剪髮」
   ↓
8. 預約前 24 小時自動提醒

關鍵差別:整個流程客戶沒離開 LINE 一次。轉換率比「點連結出 LINE」高 3-5 倍——這不是我吹的,是實際數據。

工程實作:Next.js + LIFF SDK

我以 Next.js 為例。第一步先去 LINE Developers Console 申請 LIFF App,拿到 LIFF ID。

1 · 安裝 SDK

pnpm add @line/liff

2 · 在 client component 初始化

'use client';
 
import { useEffect, useState } from 'react';
import liff from '@line/liff';
 
type Profile = {
  userId: string;
  displayName: string;
  pictureUrl?: string;
};
 
export function BookingForm() {
  const [profile, setProfile] = useState<Profile | null>(null);
  const [loading, setLoading] = useState(true);
 
  useEffect(() => {
    (async () => {
      try {
        await liff.init({ liffId: process.env.NEXT_PUBLIC_LIFF_ID! });
 
        if (!liff.isLoggedIn()) {
          liff.login(); // 自動跳 LINE 授權,通常是隱形的
          return;
        }
 
        const userProfile = await liff.getProfile();
        setProfile(userProfile);
      } catch (err) {
        console.error('LIFF init failed:', err);
      } finally {
        setLoading(false);
      }
    })();
  }, []);
 
  if (loading) return <div>載入中...</div>;
  if (!profile) return <div>請從 LINE 開啟此頁面</div>;
 
  return (
    <form>
      <p>Hi {profile.displayName}!</p>
      {/* ...日期時段選擇... */}
    </form>
  );
}

3 · 後端 API 收預約

// app/api/booking/route.ts
import { NextResponse } from 'next/server';
 
export async function POST(req: Request) {
  const { userId, displayName, date, time, service } = await req.json();
 
  // 寫入 DB
  const booking = await db.booking.create({
    data: { userId, displayName, date, time, service }
  });
 
  // 用 LINE Messaging API 主動推訊息給客戶
  await fetch('https://api.line.me/v2/bot/message/push', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.LINE_CHANNEL_ACCESS_TOKEN}`
    },
    body: JSON.stringify({
      to: userId,
      messages: [{
        type: 'text',
        text: `預約成功 ✅\n${date} ${time}\n${service}`
      }]
    })
  });
 
  return NextResponse.json({ ok: true, booking });
}

整個 MVP 大概這 50 行 code 的延伸。沒有想像中複雜。

真實的坑(我踩過的)

工程教學文不會告訴你的部分:

坑 1 · LIFF 的 URL 在 LINE 內外行為不同

LIFF URL(https://liff.line.me/{liffId})在 LINE 裡開,會自動 init;但你直接在 Chrome 打會看到一個空白頁加授權跳轉,UX 很糟。

解法:在你的網站偵測 user agent,非 LINE 就導去普通版預約頁。LIFF 只是「LINE 內 UX 加強版」,不是唯一入口。

const isLineApp = /Line/i.test(navigator.userAgent);
if (!isLineApp) {
  // 顯示普通網頁版,或導去 /booking
}

坑 2 · liff.login() 在某些情境會無限 loop

iPhone 的 LINE 內建瀏覽器有時候 cookie 行為很怪。如果你 init 完發現一直重新跳 login,通常是 SameSite cookie 設定問題——你的網站要設 SameSite=None; Secure。

// Next.js middleware 或 cookie 設定
response.cookies.set('session', token, {
  sameSite: 'none',
  secure: true,
  httpOnly: true,
});

這個 bug 很多教學沒講,iPhone 用戶會卡死你的 onboarding。

坑 3 · LINE 內建瀏覽器是個 webview,不是真正的瀏覽器

它對某些 CSS / JS API 支援不完整。我踩過的:

• position: sticky 在某些版本失效
• File upload 在 Android LINE 不會出現相機選項
• Date input 在 iOS LINE 顯示混亂

解法:任何「客製互動元件」都要在 真實 LINE 內測試(不是 Chrome DevTools 的「裝置模擬」)。我會把 staging 網址放進測試 LIFF App,真機開來測。

坑 4 · 客戶會「截圖預約成功頁」當作預約憑證

對。真的會。所以 confirmation 頁要把預約編號、姓名、日期、店家資訊都顯示完整——客戶截圖就是他的「票根」。同時系統要 push 一則 LINE 訊息(同樣資訊),雙保險。

坑 5 · 「沒有付款功能」會被客戶視為「預約不算數」

純預約系統(不付款),取消率高達 30-40%。如果你的服務是「需要時段資源」(例如美髮 1 小時 / 1 椅),強烈建議加訂金或全額預付。LIFF 可以串 LINE Pay、綠界、TapPay,客戶在 LINE 內就完成付款,不用跳出去。

哪些店家適合 LIFF 預約?

不是所有人都適合。我的判斷標準:

適合

• 客戶主要用 LINE 跟你聯繫(美髮、按摩、診所、咖啡廳、補習班)
• 預約頻率高、時段管理重要(每天 5+ 預約)
• 預約 → 履約 中間有 24 小時以上(需要提前安排)

不適合

• 客戶結構偏年長(60+ 歲),可能直接打電話來比較快
• 預約頻率低(一週 < 3 個),做 LIFF 的 ROI 不夠
• 預約等於即時消費(現場排隊類),沒必要走系統

替代方案(不做 LIFF 的話)

如果上面條件你符合度低,有幾個更便宜的方案:

1. LINE 官方帳號 + 圖文選單 → Google Form / Typeform:不順,但 0 工程。月成本 NT$ 1,000 內。
2. 第三方 SaaS(SimplyBook、MeUstudio、Peak):月費 US$ 30-100,套版預約頁,有 LINE 通知功能。
3. Calendly / Cal.com 嵌入網頁:適合 1 對 1 顧問,不適合多人時段。

LIFF 的 sweet spot 是:你已經有官方帳號 + 預約量大 + 願意做客製——這時候 LIFF 預約系統的 ROI 會明顯打贏其他方案。

整體建置時程(誠實版)

MVP 大約 6-10 週。整套含付款 10-14 週。

結語:LIFF 不是「做了就賺」,是「做對了體驗會差很多」

這個技術沒那麼困難,但做半套會很難用。客戶在 LINE 裡點開一個慢吞吞、手機上錯位、要重複登入的網頁——比直接給他打電話還糟。

如果你正在考慮 LINE 預約系統,我建議先想清楚兩件事:

1. 客戶量到了嗎?——每天 < 3 個預約,別做 LIFF,做更便宜的方案
2. 能不能做付款?——預約沒付款,取消率會讓你做白工

兩個都 yes,LIFF 預約系統會是你 2026-2027 年最划算的工程投資之一。老客戶留著的成本下降 30-50%、新客戶轉換率提升 2-3 倍——這個 ROI 一年內會回本。

如果你不確定自己的店家適不適合,15 分鐘聊聊。把你目前的預約流程跟我講,我會老實說該不該做 LIFF——很多時候答案是「不該做,先用 Google Form 撐三個月」。