介紹 LINE 好用的 LIFF 應用,從聊天視窗延伸至網頁


在 LINE 聊天視窗裡,文字訊息裡面可能會包含網址,如果有做 SEO 的話,下方甚至還會根據該網址來抓出網頁的標題、圖片和摘要。不少媒體會使用這樣的機制,讓文字訊息充當目錄,一次就分享好幾篇文章,比方說《商業周刊》(如下圖所示)。


⚠️ 請留意:本文係以 LIFF v1 為範例,部分 API 已不適用於 LIFF v2 ,建議即刻升級,詳見本站的另一篇文章

於是我們都曾經在 LINE 的聊天視窗內,透過點擊這類網址來開啟過網頁,雖然並未跳離 LINE App ,但是因為全螢幕顯示,所以必須點擊左上角或右上角的「 X 」關閉鈕( iOS 和 Android 版本的 LINE 剛好在不同邊)才能夠返回原本的聊天視窗。

所幸在 LIFF ( LINE Front-end Framework, LINE 前端框架 )出現之後,顯示 50% 或 70% 高度的不蓋版網頁變得有可能了,不過當然還是保留了 100% 高度這種滿版的網頁。在 LINE Developers 開發者網站的後台(如下圖所示),就可以將原本 https 開頭的網址轉換成 line 開頭的新網址,然後在聊天視窗裡面直接點擊開啟不蓋版的網頁(如下圖所示)。

LINE Developers 開發者網站的後台可以直接產生 LIFF 網址。
LINE Developers 開發者網站的後台可以直接產生 LIFF 網址。
示範用 LIFF 的 70% 版面( Tall )來開啟 Google 地圖網頁。
示範用 LIFF 的 70% 版面( Tall )來開啟 Google 地圖網頁。

當然 LIFF 的妙用不僅在於透過不蓋版網頁來減少使用者對跳離聊天機器人的誤會,透過在網頁內整合 LIFF SDK ,可以讓網頁與 LINE 聊天視窗產生更多的互動,讓 LIFF 網頁成為 LINE 聊天視窗的延伸,也讓聊天機器人可以有更多的發展可能。

舉例而言,以往可能需要透過帶參數的方式才能夠得知是哪位使用者正在存取網頁,現在可以透過 liff.getProfile() 來取得使用者的唯一識別碼( User ID )和暱稱( Display Name )等資訊。再者也可以在網頁上放置「儲存」或「關閉」按鈕,直接透過 liff.closeWindow() 來關閉網頁並返回聊天視窗,而且還可以再透過 liff.sendMessages() 讓使用者送出訊息,再讓聊天機器人據此做出一些回饋或者行動呼籲,例如使用者說「資料已存檔」,然後聊天機器人接著說「以下是針對剛才輸入結果的分析」,讓整個流程變得更自動、更流暢。

請看截圖或試試看「Dr.穀雨」智慧照顧機器人,在「智慧日記」這項功能裡面,可以記錄癌友的身體健康狀況,一旦填寫完畢(關閉網頁視窗之後),便會根據剛才的記錄來產生一排 Flex 旋轉木馬,針對各種可能症狀,提供對應的注意事項說明。

⚠️ 請留意:本文係以 LIFF v1 為範例,部分 API 已不適用於 LIFF v2 ,建議即刻升級,詳見本站的另一篇文章