使用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專頁。若這篇文章對您有所幫助，請幫我們分享出去，謝謝您的支持。