跳到內容

LIFF 頁面

LIFF 是 LINE 提供的功能,讓客人不用離開 LINE、不用下載 App,就能在聊天室裡打開一個像網頁的畫面。客人點了 Rich Menu 的按鈕或聊天訊息裡的連結,LINE 會從畫面下方拉起一個視窗,看起來就像一個小網站;用完往下滑或按右上角的 ✕,就回到聊天室。詳細說明請看「LIFF 設定」。

上方選單「LIFF 頁面」(手機請按左上角 ☰)。LIFF 頁面讓你自己排版客人在 LINE 裡看到的頁面,例如「活動公告」「價目說明」「新客須知」。做好之後會得到一個網址,貼進 Rich Menu 的按鈕、聊天室訊息或社群,客人點了就在 LINE 裡打開。

開始之前,先完成「LIFF 設定」並實測成功(狀態為「可使用」)。還沒完成時可以先做草稿,但不能發布。需要「LIFF 頁面」權限(店主預設就有,其他人員請店主在上方選單「設定」›「角色與權限」勾選)。「LIFF 頁面」分成兩項:「新增、編輯、儲存草稿、刪除未發布的頁面」與「發布、停止發布、刪除已發布的頁面」,可以分開給,例如讓店員排版、由店長確認後發布(見下方「發布」)。

頁面列表在手機上也能看、複製網址、停止發布與刪除;編輯頁面需要電腦,畫面寬度至少 1024 px(手機或較窄的視窗會請你改用電腦)。

進入後看到你所有的頁面,每一頁一張卡片(電腦一排三張,手機一排一張),新建的排在最前面。卡片上有:

  • 頁面名稱(粗體)、狀態、最後修改的時間與人。狀態有「未發布」(客人看不到)、「已發布」、「已發布(有未發布的修改)」(客人看到的是上次發布的內容,新修改要再按「發布」才會更新)。
  • 縮圖:草稿前幾個元件縮小後的樣子,方便認出是哪一頁;還沒加任何元件時顯示「空白頁面」,內容很多時不顯示縮圖。
  • 編輯頁面:進入編輯畫面。點頁面名稱或縮圖也可以。
  • 複製網址:只有已發布的頁面才有,按了把客人用的網址複製起來(卡片上不顯示網址文字)。
  • 右上角的 ⋯:展開更多動作——「編輯」、「QR code」(已發布才有,彈出視窗顯示 QR code 與網址,可以截圖或印出來給客人掃)、「改名」、「發布」(未發布才有;會先確認,按下後客人就看得到目前儲存的內容)、「停止發布」(已發布才有)、「刪除」(紅字)。停止發布與刪除見下方「停止發布與刪除」。

新增頁面:按「新增頁面」,輸入名稱、選一個模板(預設「空白」,見下方「模板與換模板」)後按「建立」。建好後留在列表,新頁面排在最上面、會短暫亮起來,要編輯時按它的「編輯頁面」。名稱只給你自己辨識,客人看不到,同一家店不能重複(不分大小寫)。每家店最多 20 頁,滿了要刪掉不用的才能再新增。

新增頁面時可以選一個模板當起點,內容都可以再改:

模板 內容
空白 從空白頁面開始,自己加入需要的元件
店家介紹 店面照片、簡介、營業時間,以及電話與預約按鈕
價目表 分類列出服務項目與價格,最後附上預約按鈕
活動公告 活動主視覺、說明、倒數計時與連結按鈕
預約導引 說明預約方式,附輪播圖片、預約按鈕與傳訊息按鈕
商品推薦 介紹推薦商品,附商城按鈕(商城未使用中時不會出現這個模板)
  • 每個模板旁邊有縮圖與說明。模板裡的文字是範例,請改成自己店的內容。
  • 模板裡的圖片是空的,編輯畫面會標示「請選擇圖片」,換成你的照片後才能發布;「商品推薦」的商品元件還沒選商品(標示「請選擇商品或分類」),選好後才能發布。
  • 模板不會動到你的商品、訂單、預約或會員資料。

換模板:在編輯畫面上方按「換模板」,選好模板後按「換成這個模板」。目前的草稿會先存進發布紀錄(類別「換模板前的草稿」),之後可以找回;還沒存好的修改會先存好。換模板只換掉草稿的內容,頁面標題保留,客人看到的正式版不變,確認沒問題再按「發布」。

編輯畫面需要電腦,畫面寬度至少 1024 px(手機與窄視窗會顯示「請用電腦編輯」)。畫面分成四欄:

  1. 元件庫:分成「元件」與「我的區塊」兩個分頁。點一下元件,就加到目前選取的元件下方;沒有選取時加到最後。也可以用滑鼠把元件拖進編輯畫面,放在你要的位置(例如拖到第二個與第三個元件之間),放開後就插在那裡。一個頁面最多 100 個元件(一個同步區塊算 1 個)。
  2. 編輯畫面:頁面的元件由上到下排列,點一個元件選取它,拖曳可以調整順序。有問題的元件會標出問題。
  3. LINE 預覽:客人手機上大概的樣子,隨你的修改即時更新。
  4. 元件屬性:選取元件後在這裡設定內容。沒有選取任何元件時,這裡是「頁面設定」:頁面標題(1–40 字)與背景顏色。

上方一排有「← 返回」、頁面名稱與狀態、「復原」「重做」(本次編輯最多 50 步)、儲存狀態,最右邊依序是「操作說明」、「手機預覽」與「發布」。

元件 可以設定 限制
標題+內文 標題、內文、靠左或置中、文字顏色 標題 60 字內、內文 2,000 字內,至少要有一項有字;內文的換行會保留
圖片 圖片(從素材庫選)、替代文字、點圖片的動作 一定要選圖片
圖片輪播 1–10 張圖片左右滑動,每張可設點圖片的動作;可選「自動播放」與間隔秒數 間隔 2–10 秒
按鈕 按鈕文字、樣式(實心或外框)、顏色、動作 文字 1–20 字
分隔線/空白 高度(小、中、大、特大)、是否顯示分隔線
倒數計時 標題、截止時間(台北時間,到分鐘)、時間到後顯示的文字 倒數用客人手機的時間計算,只是顯示用途
商品 指定商品或分類、版型、區塊標題(見下方「商品元件」) 指定商品 1–12 個;分類顯示 2–12 個;標題 30 字內

圖片從「素材」選:按圖片欄的選圖按鈕,挑已上傳的圖片,或當場上傳。需要有素材的查看權限才能選圖。

在頁面中放商城的商品卡(封面、名稱、價格、售完標示),客人點卡片打開商品頁。需要商城使用中才能新增。

  • 來源二選一:
    • 指定商品:按「挑選商品」,可以搜尋名稱或依分類找,最多 12 個,依你排的順序顯示。挑選清單會標「已上架」或「未上架」;未上架、已刪除或已售完且設定為隱藏的商品不會出現在頁面上。
    • 分類:選一個分類與顯示數量(2–12 個),顯示該分類(含子分類)最新上架的商品。
  • 版型:「兩欄格狀」或「橫向捲動」。
  • 區塊標題:選填,最多 30 字。
  • 價格與庫存在客人打開頁面時即時讀取,改價或補貨不必重新發布。
  • 編輯畫面的預覽會顯示目前的商品卡;沒有可顯示的商品時寫「目前沒有可顯示的商品」,客人那邊整個區塊不顯示。
  • 商城暫停營業時,商品區塊不顯示(頁面其他內容照常),恢復後自動出現。發布時若商城未使用中,或指定的商品、分類已被刪除,會提醒你,但不會擋下發布。

按鈕(以及圖片、輪播圖片)的「動作」可以選:

  • 開網址:客人點了打開你貼的網址,只接受 https:// 開頭。
  • 打電話:客人點了撥出電話,只能有數字、+、-。
  • 傳訊息:客人點了會打開與本店官方帳號的聊天室,並預填你設定的文字(最多 300 字),客人再按送出。這個動作只在手機的 LINE 可用,電腦版 LINE 不支援。需要店家已串接官方帳號。
  • 開啟本店另一頁:選本店另一個 LIFF 頁面,也可以選這一頁。還沒有其他頁面時,選單下方會提示你先到頁面列表按「新增頁面」,建好後就能在這裡選。目標頁面還沒發布時,發布會提醒你,客人點了會看到「此頁面目前沒有內容」。
  • 開啟本店預約頁:客人點了進入預約。店家沒有預約服務時,客人會看到「本店目前沒有提供線上預約」。
  • 開啟本店商城:客人點了進入商城首頁(見「商城」)。商城暫停營業時,客人會看到「商城目前暫停營業」。
  • 分享這一頁:只有「按鈕」可以選(圖片、輪播圖片沒有這個動作)。客人點了可以把這一頁分享給朋友,見下方「分享這一頁」。
  • 你停止修改約 2 秒後會自動儲存,上方顯示「儲存中…」「已儲存 14:32」;網路不穩時顯示「儲存失敗」,可按「重試」。有修改還沒存好時,離開頁面會先提醒。
  • 頁面內容太大(上限 256 KB,例如貼了大量文字)時會顯示「頁面內容太大」,請減少內容。
  • 同一頁被別人(或你自己的另一個瀏覽器分頁)改過時,畫面會出現「這一頁剛被別人(或另一個分頁)修改過。重新載入後才能繼續編輯;你這次的修改不會被存。」按「重新載入」取得最新內容。系統不會默默蓋掉別人的修改。

按右上角「發布」並確認後,客人才看得到。

  • 只發布已儲存的內容:按下發布時,系統會先把還沒存的修改存好,再用那份內容發布。儲存失敗時不會發布。
  • 發布前系統會檢查:沒選圖片的圖片元件、沒填網址的按鈕、已被刪除的素材或目標頁面等。有問題時畫面標出是哪個元件,修正後再發布。
  • 還沒完成 LIFF 設定時,「發布」按不下去,旁邊寫「完成 LIFF 設定後才能發布」。
  • 發布後再修改,列表會顯示「已發布(有未發布的修改)」,客人看到的仍是上次發布的內容,直到你再按「發布」。
  • 發布視窗可以填備註(選填,最多 100 字,例如「秋季活動上線」),會顯示在發布紀錄裡。
  • 頁面裡的同步區塊有還沒發布的修改時,發布視窗會列出「這些同步區塊的修改不會跟著這次發布上線」與它們的名稱:客人看到的是同步區塊上次發布的內容,要到同步區塊編輯器另外發布。
  • 別人正在編輯這一頁時不能發布,畫面會寫「小美正在編輯,請等他完成或接手」。
  • 權限:「發布」「停止發布」與刪除已發布的頁面需要「LIFF 頁面:發布、停止發布、刪除已發布的頁面」權限;新增、編輯、換模板與刪除未發布的頁面需要「LIFF 頁面:新增、編輯、儲存草稿、刪除未發布的頁面」權限。只有發布權限的人看得到頁面列表、打開編輯頁面是唯讀的,可以預覽與發布;只有編輯權限的人看不到「發布」與「停止發布」。

在編輯畫面,每個區塊左邊都有一個勾選方塊。勾起要存的區塊,可以選取連續的 1–20 個區塊;如果勾的兩個區塊中間還有其他區塊,系統會自動一併選取中間的(我的區塊只能是連續的一段)。取消勾選最前或最後的區塊會縮小範圍,編輯畫面上方會顯示「已選 N 個區塊」,按「取消選取」可以全部清除。只有點勾選方塊才會勾選;點區塊本身只是選去編輯,不會勾選。選好後按「存成我的區塊」並取名(1–30 字,不能和其他我的區塊同名)後,會出現在左邊元件庫的「我的區塊」分頁。

  • 每家店最多 50 個我的區塊。清單顯示名稱、區塊數、縮圖、建立者與更新時間,可以改名、刪除,或「轉成同步區塊」。
  • 點一下(或拖進編輯畫面)插入時,會詢問要「複製」還是「轉成同步區塊並插入」:
    • 複製:把內容複製一份放進這一頁,之後和原本的我的區塊無關,改了也不會互相影響。勾選「以後都用複製」後就不再詢問。
    • 轉成同步區塊並插入:用這個我的區塊建立一個同步區塊並放進這一頁(見下方「同步區塊」)。
  • 含同步區塊的選取不能存成我的區塊(按鈕會停用並寫「選取的區塊中有同步區塊,不能存成我的區塊」)。
  • 刪除我的區塊:只會從清單拿掉,已經插入頁面的內容不受影響(插入時就已經複製過去了)。
  • 轉成同步區塊:以這個我的區塊目前的內容建立一個新的同步區塊;之後兩者無關,可以刪除這個我的區塊。

複製和同步差在哪裡? 例如你有「營業時間+地圖按鈕」這組區塊,想放在「價目表」「活動公告」兩頁:

複製 同步區塊
放進頁面後 變成那一頁自己的區塊,可以單獨修改 每一頁都顯示同一份內容
營業時間改了 要到每一頁各改一次、各發布一次 只改同步區塊、發布一次,所有已發布的頁面一起更新
適合 每頁內容會有點不一樣的區塊 每頁都要一模一樣的資訊(店家資訊、營業時間、注意事項)

不確定時先用複製;之後想改成同步,可以把那組區塊存成我的區塊再「轉成同步區塊」。

同步區塊是可以放在很多頁面的共用內容(例如店家資訊、營業時間),改一次、發布一次,所有使用它的頁面都會一起更新。

  • 「LIFF 頁面」›「同步區塊」頁籤列出全部同步區塊:名稱、狀態、使用中的頁面數、最後發布時間。每家店最多 30 個。
  • 「使用中的頁面」(引用清單)分成「草稿使用中」(頁面草稿裡有放,還沒發布)與「正式版使用中」(客人現在看到的頁面裡有它),點頁面名稱可以直接打開那一頁。發布同步區塊前先看「正式版使用中」,就知道會影響哪些頁面。
  • 新增同步區塊:在同步區塊頁籤按「新增同步區塊」並取名(1–30 字,不能和其他同步區塊同名),或把我的區塊「轉成同步區塊」。同步區塊裡最多 20 個區塊。
  • 在頁面中插入:元件庫「我的區塊」分頁裡標示「同步」的項目,點一下或拖進編輯畫面。編輯畫面以框線標示「同步區塊:名稱」,預覽顯示同步區塊目前的草稿。
  • 解除同步:在頁面中選取同步區塊,按「解除同步」,會把同步區塊目前的草稿複製成這一頁自己的區塊,只影響這一頁的草稿(可以按「復原」)。
  • 刪除:仍有頁面的正式版在使用時不能刪除,畫面會列出這些頁面。只有草稿在使用時可以刪除,那些頁面會顯示「已刪除的同步區塊」,發布前要先刪掉它。
  • 同步區塊尚未發布時,使用它的頁面不能發布。

在頁面中選取同步區塊按「編輯同步區塊」,或在同步區塊頁籤按「編輯」,會打開同步區塊編輯器。它和頁面編輯器一樣有元件庫、編輯畫面、預覽與元件屬性,但沒有頁面設定,最多 20 個區塊,不能再放同步區塊。

  • 修改會自動儲存成草稿;按「發布」後客人才看得到。發布確認視窗會列出「會影響這些已發布的頁面」。
  • 如果這次修改會讓某個已發布的頁面超過上限(展開後超過 200 個區塊或內容太大),系統不會發布,並列出要先調整的頁面。
  • 同步區塊沒有「停止發布」;不再使用時,先從頁面移除再刪除它。
  • 回到頁面編輯器時,會重新讀取同步區塊的最新草稿。

編輯畫面上方按「發布紀錄」(或在頁面列表卡片右上「⋯」、同步區塊頁籤按「發布紀錄」),右邊會列出這一頁(或這個同步區塊)的紀錄:時間、類別、發布者、備註與縮圖,目前客人看到的那一筆標示「目前正式版」。

  • 類別有三種:「發布」是每次按發布留下的;「換模板前的草稿」「還原前的草稿」是換模板或用舊版建立草稿之前,系統自動保存的當時草稿,避免被蓋掉的內容找不回來。
  • 每一頁(每個同步區塊)保留最近 30 筆;目前正式版那筆一律保留。
  • 看這版:在中間的預覽顯示那一版當時客人看到的樣子。圖片後來被刪除時顯示「圖片已不存在」。按「回到目前草稿」恢復顯示草稿。
  • 並排比較:勾選兩個版本(或一個版本與「目前草稿」)後按「並排比較」,左右兩邊顯示兩個版本(左邊較舊),上方列出新增、刪除、修改、移動了幾個區塊。比較中的商品區塊不顯示商品。
  • 用這版建立草稿:把那一版的內容換成目前的草稿,不會自動發布,確認沒問題再按「發布」。
    • 目前的草稿會先存進發布紀錄(類別「還原前的草稿」),之後可以找回;還沒存好的修改會先存好。
    • 頁面裡的同步區塊會使用它目前的內容,不是當時的內容。
    • 那一版用到的圖片、頁面或同步區塊後來被刪除時,仍會建立草稿,畫面上方列出提醒;發布前要換掉或移除,否則發布會被擋下。
    • 只會改版面;價格、庫存、商品、訂單、預約與會員資料都是即時資料,不會回到當時的數字。
  • 只有「發布」權限的人可以看紀錄與比較,不能用舊版建立草稿;需要先取得編輯權(別人正在編輯時要先接手)。

同一個頁面同一時間只有一個編輯畫面能修改(「編輯權」)。打開編輯頁面時會自動取得;畫面開著就會一直保留,離開編輯頁面就會放開。

  • 別人正在編輯:畫面變成唯讀,上方寫「小美正在編輯(最後活動 14:05)」。仍然可以看預覽。要改的話按「接手編輯」,確認視窗會提醒「小美尚未儲存的修改可能遺失」;確認後換你編輯,小美那邊會變成唯讀。
  • 你在另一個視窗編輯中:同一個人在兩個瀏覽器分頁打開同一頁時,後開的那個是唯讀。按「在這裡繼續編輯」就改在這個分頁編輯。
  • 連線中斷,重新連線中…:網路斷掉時仍可繼續修改,修改先留在這台電腦的瀏覽器裡;系統每 5 秒重試,連上後自動存好。
  • 編輯權已被○○接手,你的修改尚未儲存:你的修改不會蓋掉對方的內容。可以按「另存為新頁面」(名稱預設是「原名(我的版本)」,可以改;會算在 20 頁上限內),或按「捨棄」放棄這些修改。頁面剛被別人改過、你的修改存不進去時也一樣。
  • 恢復上次未儲存的修改?:重新整理或關閉視窗前還沒存好的修改,下次打開這一頁時會詢問要不要恢復。如果期間別人改過這一頁,就改成詢問要另存為新頁面或捨棄,內容不會無聲消失。
  • 電腦當機或網路一直沒恢復:編輯權約 1 分半鐘後自動放開,別人不必接手就能直接編輯(正常關閉視窗或離開編輯頁面會立刻放開);你下次打開這一頁時,同樣會詢問要不要恢復沒存好的修改。
  • 同步區塊的編輯器也是一樣的規則;被接手時的另存按鈕是「另存為新的同步區塊」。
  • 只有「發布」權限、沒有「編輯」權限的人打開編輯頁面是唯讀的,可以預覽和發布。
  • 別人正在編輯時,你仍然看得到發布紀錄,但不能「發布」或「用這版建立草稿」;需要的話先接手。

按「手機預覽」會出現 QR code,用手機的 LINE 掃描,看到的是目前的草稿(上方會寫「草稿預覽,客人看不到」)。

  • 只有「已在店家 LIFF 綁定 LINE 的員工」,而且有「LIFF 頁面」編輯或發布權限的人能看。其他人掃了會看到「只有可以編輯或發布 LIFF 頁面的人員能預覽草稿」。員工綁定見「LIFF 設定」。
  • 預覽是唯讀的:按鈕不會真的開網址、預約頁或商城,會寫「預覽中不會開啟:…」。
  • 預覽讀的是已儲存的草稿,剛改完請等狀態變成「已儲存」再掃。

建議做法:上方選單(手機請按左上角 ☰)「Rich Menu」› 進入要編輯的選單 › 在畫布上點選熱區 › 右欄「點了之後」選「📱 開啟 LIFF 頁面」› 「要打開的頁面」選這一頁,再儲存草稿並發佈。不用複製網址,客人點那個熱區就會在 LINE 裡打開你的頁面。詳細步驟見「Rich Menu 選單」。

如果要把頁面放在聊天室訊息、社群貼文,或印成 QR code,就用複製網址:已發布的頁面在列表的卡片上有「複製網址」,也可以在卡片右上 ⋯ ›「QR code」把 QR code 印出來。舊的做法(把網址貼進 Rich Menu 的「🔗 開網址」熱區)仍然可用。

  • 停止發布:客人之後打開這一頁會看到「此頁面目前沒有內容」。草稿保留,之後可以再發布。
  • 刪除:刪除後無法復原。
  • 如果別的已發布頁面有按鈕連到這一頁,會先列出是哪幾頁。停止發布可以確認後仍然執行(那些按鈕客人點了會看到「此頁面目前沒有內容」);刪除則要先把那些按鈕改掉才能刪。
  • 貼在 Rich Menu 或聊天室裡的舊網址,停止發布後同樣顯示「此頁面目前沒有內容」。
  • 停止發布後要再上線:卡片右上 ⋯ ›「發布」,或打開編輯頁面按「發布」。

店家沒有任何使用中的服務(例如預約服務到期、且沒有其他服務)時:

  • 後台的 LIFF 頁面變成唯讀,上方寫「目前沒有使用中的服務,LIFF 頁面暫停提供;開通任一服務後恢復」。
  • 客人打開已發布的頁面,會看到「此頁面暫停提供」。
  • 服務恢復後,原本發布的內容照舊顯示,不需要重新發布。

客人第一次打開店家的 LIFF 網址時,LINE 可能先出現一個授權同意畫面,這是 LINE 的固定流程,平台無法略過,客人按同意後就會看到頁面。第一次手機驗收時請預期會看到它。

按「發布」按不下去? 看按鈕旁的文字:「完成 LIFF 設定後才能發布」要先到「設定 › LIFF 設定」完成;「儲存中,完成後才能發布」等一下即可;「重新載入後才能發布」表示頁面剛被別處修改過。

客人說打開是空白或寫「此頁面目前沒有內容」? 這一頁還沒發布,或已被停止發布、刪除。到列表確認狀態。

手機預覽顯示「只有可以編輯或發布 LIFF 頁面的人員能預覽草稿」? 掃的那支手機的 LINE 帳號還沒綁定為員工,或沒有「LIFF 頁面」權限。

按鈕的動作可以選「分享這一頁」,客人點了可以把這一頁用卡片傳給 LINE 上的朋友或群組,朋友點卡片就能打開同一頁。

  • 活動頁最下方放一顆「揪朋友一起來」。
  • 價目表頁放一顆「傳給朋友參考」。
  • 新客優惠頁放一顆「分享給想來的朋友」。
  1. 在 LIFF 頁面編輯器加一個「按鈕」,「動作」選「分享這一頁」。
  2. 要在卡片上顯示的文字在「分享卡片上的文字」填寫:選這個動作時會先帶入頁面標題,可以改成別的文字;不能留空,1–60 字(留空時無法發布)。
  3. 發布頁面。
  4. 第一次使用要先在 LINE 後台開啟分享功能(每個 LINE Login 頻道各做一次),見下方。

卡片由上到下是:這一頁的第一張圖片、你填的文字、一顆「打開看看」按鈕。圖片必須是 JPG 或 PNG,而且寬高都不超過 1024 px 才會放上去;不符合時卡片就只有文字和按鈕,不會出錯。卡片用的圖片是頁面中第一個「圖片」元件,或第一個「圖片輪播」的第一張圖;它上面有沒有其他元件都沒關係。要有好看的卡片,請確認這張圖符合規格。

開啟分享功能(LINE 後台,只需做一次)

Section titled “開啟分享功能(LINE 後台,只需做一次)”

LINE 規定要店家自己同意才能使用。點選路徑:LINE Developers Console › 店家 Provider › LINE Login 頻道 › LIFF 分頁 › shareTargetPicker › 勾選同意 › Enable。若店家有多個 LINE Login 頻道,每個頻道各自同意一次。完整的 LIFF 設定流程見「LIFF 設定」。

沒有開啟時,客人在頁面上看不到這顆分享按鈕,頁面其他部分不受影響。

  • 分享成功:按鈕處顯示「已分享」。
  • 客人在 LINE 的選人畫面按取消:什麼都不會顯示。
  • 分享失敗:顯示「分享失敗,請稍後再試」,客人可再按一次。
  • 分享按鈕只在 LINE App 裡出現;用一般瀏覽器打開網址不會看到。電腦版 LINE 是否支援以 LINE 為準。
  • 看不到分享人數或誰分享了。
  • 手機預覽不能測分享:預覽中這顆按鈕會寫「預覽中不會開啟分享」。請發布後,用正式頁面在手機 LINE 裡按一次確認。