iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 14
0
Modern Web

用Vue實作一個LINE@聊天機器人後台系列 第 14

[Day14] 訊息設計工具:LineBotDesigner

  • 分享至 

  • xImage
  •  

Line的訊息格式,以互動性來說,分為以下兩種:

基本的訊息:

  • Text message
  • Sticker message
  • Image message
  • Video message
  • Audio message
  • Location message

具有互動功能的訊息:

  • Imagemap message
  • Template message
  • Flex Message

其中又以Flex Message的自由度最高,但自由度高的代價就是他的設定會比較繁瑣。
Imgur

  • 上圖是LINE官方提供的Flex Message範例之一

這時最好有個工具,可以幫助我們用比較視覺化的方式做到設定。
幸好LINE官方就有研發一套工具,供我們免費使用。

LineBotDesigner

LineBotDesigner
https://developers.line.biz/en/services/bot-designer/

畫面上除了可以製作所有類型的訊息之外,圖文選單、網頁應用程式(LIFF)也都有支援
設計完成之後,可以直接複製右下角的JSON來做測試。
Imgur

  • 基本的畫面可以製作除了Flex以外的訊息
    Imgur

  • Flex的訊息則是分出另外一個畫面來設定:
    Imgur

  • 設定好需要的訊息後,可以到模擬聊天的功能,沙盤推演真實的互動流程

  • 也可以把圖文選單設定在這邊,看看效果如何
    Imgur


上一篇
[Day13] 寫一個基本的WebHook(四):完成WebHook設定
下一篇
[Day15] LIFF - LINE Front-end Framework介紹&實作
系列文
用Vue實作一個LINE@聊天機器人後台30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言