Flex訊息是一種能以JSON自由組合版面的訊息形式。雖然可以精細地配置文字、圖片、按鈕等元素,但建立時需要撰寫JSON。
如果想在不寫程式的情況下製作設計精美的訊息,使用多頁訊息或圖文訊息會更輕鬆。只要把目標告訴Lumo的行銷代理,從挑選合適的訊息形式到撰寫草稿都可以交給它。當您想自行精細控制Flex訊息的版面時,再參考本文的步驟。
Flex訊息能做什麼
Flex訊息可以細緻地指定元素的大小、位置與顏色,在一則訊息中呈現獨家設計的版面。
商品介紹卡片、預約確認、收據、優惠券等,無法以固定範本呈現的版面都很適合。也能做出多張卡片橫向排列、以滑動瀏覽的結構。
| 用途範例 | 適合的原因 |
|---|---|
| 商品介紹卡片 | 可將圖片、價格與按鈕整合在同一張卡片上 |
| 預約與訂單確認 | 可將項目垂直對齊,呈現如明細般的版面 |
| 優惠券與優惠資訊 | 可自由調整想強調的資訊的大小與顏色 |
交給行銷代理
對訊息的內容或形式拿不定主意時,先找行銷代理商量是最快的捷徑。
只要告訴它目標,例如「想製作新商品的介紹訊息」,代理就會挑選符合目的的形式,連草稿都一併準備好。是否需要Flex訊息這類自由度較高的形式,也會包含在提案之中,讓您在自己動手寫JSON之前就能先確定方向。
代理建立的內容,可在發送前的核准畫面確認。沒問題就選擇 「執行」,想再斟酌時選擇 「先不用了」。
自行建立Flex訊息
Flex訊息是在群發訊息的建立畫面中,為每次發送直接建立,不會作為可重複使用的項目保存管理。
- 開啟群發訊息的建立畫面或編輯畫面
- 在訊息類型中選擇 「Flex訊息」
- 在 「Flex JSON」 輸入欄貼上訊息的JSON
- 輸入 「項目」(替代文字,會顯示在推播通知與聊天列表中)
- 在預覽中確認顯示效果
JSON以Bubble(單張卡片)或Carousel(多張卡片橫向排列)的結構撰寫。建議先用LINE提供的模擬器等工具組好版面,再將產生的JSON貼到輸入欄,效率更高。
JSON的基本結構
Flex訊息的JSON以Bubble(單張卡片)或Carousel(多張卡片的集合)為基本單位構成。
一張Bubble由以下區塊組合而成。不必使用所有區塊,只指定需要的部分即可。
| 區塊 | 作用 |
|---|---|
| header | 顯示在卡片上方的標題區塊 |
| hero | 顯示主視覺圖片的區塊 |
| body | 放置文字或按鈕等主要內容的區塊 |
| footer | 顯示在卡片下方的頁尾區塊 |
將多個Bubble組成Carousel後,收到訊息的人就能水平滑動瀏覽多張卡片。
以預覽確認
輸入JSON後,即可一邊預覽在LINE中的顯示效果一邊編輯。
發送前請透過預覽確認圖片的顯示位置、文字換行與按鈕配置是否符合預期。預覽會以接近實際LINE聊天畫面的方式顯示,能在送出前發現版面跑版的問題。
遇到問題時
Flex訊息高度依賴JSON的撰寫,多數問題都出在JSON的格式上。
| 症狀 | 確認事項 |
|---|---|
| 顯示JSON格式錯誤 | 確認括號與逗號是否正確配對。編輯器會標示錯誤位置 |
| 沒有顯示預覽 | 確認必填項目(type、altText等)是否正確設定 |
| 在LINE中版面跑版 | 確認圖片尺寸與字數是否在Flex Message規格的範圍內 |
如果自行撰寫JSON有困難,也可以考慮改用多頁訊息或圖文訊息。這些形式不需撰寫程式碼,就能做出豐富的版面。