使用C#開發LineBot(8) - 發送Template Message

LineBot傳送訊息的形式,除了單純的文字、貼圖、圖片之外,還有一個比較特別的形式,稱之為Template Message,這種形式的訊息本質上是一個選單,長得像是底下這樣:

上面這個是三種Template Message中的一種形式,稱為Buttons Template Message,另外兩種形式是Confirm Template Message(下圖左)與Carousel Template Message(下圖右):

Confirm Template Message好理解,基本上它就是一個確認(confirm)對話框,可以讓用戶選擇Yes/No之類的回答。而Carousel Template Message其實就是多個Buttons Template Message,橫著擺可以左右scroll。

我們先從Buttons Template Message開始看起。

關於Buttons Template Message

我們剛才說過,Buttons Template Message這種形式的訊息本質上是一個選單,包含著一張圖片(下圖1)、一個標題(下圖2)、以及一些文字(下圖3),並且可以設置1-4個選項(下圖4-6,範例中我們只設置了3個):

當你的Bot送出這個訊息給用戶,用戶可以點選底下的選項(上圖4-6的文字),這些選項被稱為Action,這Action也有三種不同的類型,分別是:

  1. MessageAction : 幫用戶說一段指定的文字訊息
  2. UriAction : 直接在Line裡面開啟指定的網頁
  3. PostbackAction : 觸發一個可以你的WebHook收到參數的postback

其中UriAction最容易理解,用戶點選該Action,Line就會直接開啟某個網頁。

而MessageAction可以用來幹嘛? 它可以讓你幫用戶說特定的話,實務上應用時,你可以透過這個機制先設計好一些固定的指令,讓WebHook看到這個指令就能進行相對應的工作(其功能等同於用戶在對話框中說了這個指令)。

而postback則是不出現任何訊息,直接把特定參數傳給WebHook,WebHook就可以進行特定工作。

讓LineBot發送Buttons Template Message

我們看底下這段程式碼,它的功能就是讓LineBot發送Button Template Message:

你會看到我們先在第2-8行建立三個Action(因為是範例,因此每一種一個)。第一個是MessageAction,當用戶點選『點選這邊等同用戶直接輸入某訊息』,Line就會『幫』用戶說『/例如這樣』:

而『點這邊開啟網頁』這個選項則很單純,當用戶點選上圖中該action,就會自動開啟Google首頁。

而上圖中最後一個action,被點選時,WebHook會收到一個postback event,其JSON內容類似像底下這樣:

{"events":[{"type":"postback","replyToken":"d7aooxxo154c6d94oo01xx28coxoxfd04","source":{"userId":"U8x2788OOXX53422082e301b80xb00030","type":"user"},"timestamp":1485251255286,"postback":{"data":"abc=aaa&def=111"}}]}

留意其中的data,就是我們在上面程式碼第8行中指定的postback data,當你的WebHook收到上面這樣的指令,就可以進行相對應的工作。

OK,瞭解了Actions之後,我們繼續回頭看上面的程式碼,我們在第11行建立一個ButtonsTemplate。留意一下第13行的altText,因為並非每一種device都可以顯示Template Message,因此,你可以設定替代文字,這會被用於無法顯示Template Message的場合(例如PC版的Line、手機板的Line訊息預覽畫面、手機的Notification通知畫面…etc.)。

而14,15兩行是標題,這沒什麼,17行則是提供一張大圖的url,Template Message會將你指定的圖顯示出來。程式碼的最後,我們把前面建立好的三個Actions丟給ButtonTemplate物件,然後透過PushMessage指令送出,done.

此範例原始程式碼位於 : https://github.com/isdaviddong/LineBotSdkExample/blob/master/LineBotSdkExample/WebFormExample.aspx.cs

--------------------------------------------
相關課程: http://www.studyhost.tw/NewCourses
如果需要即時取得更多相關訊息,可按這裡加入FB專頁。若這篇文章對您有所幫助,請幫我們分享出去,謝謝您的支持。

留言

Zh寫道…
請問CarouselTemplate Message有範例嗎
isDavid寫道…
@WEI,
https://github.com/isdaviddong/LinePushButtonsTemplateExample
可以先看上面這個,很類似
steven 張寫道…
作者已經移除這則留言。
匿名表示…
請問 Template Message,若我不要設定圖片連結
不要顯示圖片,只要文字就好,要如何設定?
謝謝
阿豪寫道…
你好,
想請問,可以取得傳送訊息用戶的頭像和ID嗎?
Unknown寫道…
作者已經移除這則留言。
Unknown寫道…
請問,LINE有simulator可以local測試嗎? 還是只能把程式publish到正式的web hook線上debug?
isDavid寫道…
@Karen Jian,

只能publish上去...沒有local的模擬器可以玩...
阿麥表示…
您好:

感謝您的分享與教學,想請問我使用CarouseTemplate Message供使用者點選,其中的一個選項點選後必須開啟手機內建browser連接URI,請問是可行的嗎?
jimmy寫道…
請問,LINE有simulator可以local測試嗎:
我是用pycharm+ngrok 就可以測試了
可以參考這篇:
https://github.com/twtrubiks/line-bot-tutorial
isDavid寫道…
測試指的是單步執行和偵錯吧,其實.net developer如果用azure,完全不需要其他的模擬器,也不用把遠端的WebAPI導回localhost,你可以直接在visual studio開發環境中,遠端偵錯一個真實運行的網站...

關鍵字是... visual studio remote debugger
過陣子我再找時間說明一下這部分...
阿豪寫道…
你好,
今天在使用這個元件時發現,
ReplyTemplateMessage,只能輸入ButtonsTemplate而已
另外兩種
ConfirmTemplate和CarouselTemplate都沒辦法,
請問這個可以加上去嗎?
卓秉弘寫道…
老師您好,我有在Pubu買您電子書,想請問CarouselTemplate 該如何寫?
BUTTONTemplate和 ImageCarouselTemplate的都能順利完成,唯獨CarouselTemplate
否請您指點! 謝謝
isDavid寫道…
可以參考底下範例:
https://github.com/isdaviddong/LinePushCarouselTemplateExample
Unknown寫道…
作者已經移除這則留言。
Unknown寫道…
作者已經移除這則留言。
Unknown寫道…
老師您好
先感謝老師這麼多LINEBOT的教學, 讓我有機會開發出自己的lineBot
用老師的LineBot SDK, 陸續開發出了許多自己覺得有趣的應用(猜數字,拿大樂透號碼, 抽美女圖,查詢UBike站點的資訊,查詢天氣...)

最近想做一個可以傳送地圖位置, 點開就是當下的地點
查了SDK裡有個Message的物件可以放經緯度在裡面
但是replyMessage不允許傳Message物件, 也找不到可以使用的方法
想請問老師是SDK裡尚不提供, 還是有別的方法可以reply一個地圖位置嗎?

抱歉自刪了2篇文..打錯沒辦法修改
isDavid寫道…
@石大君,
請更新到最新版的SDK,然後你就可以用 ReplyMessageWithJSON()方法,即可自定義各種message回傳,範例可以參考:
https://github.com/isdaviddong/LINE_Flex_Message
Unknown寫道…
好的,謝謝老師
Unknown寫道…
作者已經移除這則留言。
匿名表示…
請問Line Bot是否有方式可以判斷使用者的發送裝置是PC或行動裝置?
Ted Chanh寫道…
我使用在2017 Vs 及用 azure App service, 但都會發生錯誤,在送出pushtemplatemessage該指令(相關設定或code都以您的範例),麻煩您提示可能錯誤在哪裡或是那些該注意的,感謝您哦!!

這個網誌中的熱門文章

精彩(且驚人)的Semantic Kernel入門範例

使用Semantic Kernel 建立自然語言請假系統

在 LINE Bot 開發中使用Semantic Kernel建立自然語言請假系統

專業的價值...

使用CLI指令快速開啟Windows Terminal