活⽤Flex彈性訊息,讓你的LINE聊
天機器⼈更親⺠、更出⾊!
奇步應⽤ 陳佳新
jarsing@chibuapp.com
2021-10-23
⾃詡為聊天機器⼈傳教⼠
2
中部⼈的聊天機器⼈⼩⼩聚
臉書搜尋「Chatbot DevelopersTaiwan」社團
3
臉書社團
活動議程LINE Bot
臉書Chatbot DevelopersTaiwan社團
4
中部⼈的聊天機器⼈⼩⼩聚
活動議程LINE Bot
5
疫情期間,改⽤線上直播
6
2019創業歸故⾥競賽冠軍
⽤LINE聊天機器⼈做的智慧觀光服務
7
2020成為LINE官⽅認證技術專家
俗稱的聊天機器⼈專家,LINE API Expert,簡稱LAE
8
9
歡迎與我聯絡
陳佳新
https://facebook.com/jarsing
奇步應⽤
https://facebook.com/chibuapp
幾個Flex彈性訊息案例分享
10
11
互動問答
完美取代template
的buttons訊息格
式,可以改字體⼤
⼩、粗體、加顏⾊
12
收集徽章
跟集點卡⼀樣,⼀
眼看出數量,收集
到才亮起來
13
按鈕範本 ➡ ⼤版⾯衛教資訊
14
不同場景⽤不同變⾊對話泡泡
⽩底
15
不同場景⽤不同變⾊對話泡泡
紅底
綠底
16
你⼀定要認識Flex Message Simulator
https://developers.line.biz/flex-simulator/
Live Demo:Flex排版⼩技巧
1. 垂直佈局
(Vertical Layout)
2. ⽔平佈局
(Horizontal Layout)
3. 邊界,外邊距
(Margin)
4. 補⽩,內邊距
(Padding)
5. ⼤⼩
(Size)
6. 顏⾊/底⾊
(color/background)
17
Q & A
18
⾃備問與答,避免尬聊 😅
1. 要讓聊天機器⼈的介⾯更親⺠、更出⾊,除了Flex訊息之外,
還有什麼技巧?
• 善⽤LIFF,把資訊排版在RWD響應式網⾴上
2. ⽤Flex Message Simulator編排後的訊息只能預覽,能否快速在
LINE裡⾯真實看到?
• Simulator右上⾓有⼀顆Send Message按鈕,可以傳送Flex訊息給
⾃⼰,你將發現Flex訊息在桌機版和⼿機版的LINE都能顯⽰
19
活用Flex彈性訊息,讓你的LINE聊天機器人更親民、更出色!

活用Flex彈性訊息,讓你的LINE聊天機器人更親民、更出色!