https://docs.microsoft.com/en-us/bot-framework/nodejs/bot-builder-nodejs-send-rich-cards
Types of rich cards
舉例幾個 line 會用到的
Audio Card 傳聲音
Video Card 傳影片
Hero Card 傳Rich Card 大部份都用這個實現
Send a carousel of Hero cards
var bot = new builder.UniversalBot(connector, function (session) {
session.send("Hi... We sell shirts. Say 'show shirts' to see our products.");
});
// Add dialog to return list of shirts available
bot.dialog('showShirts', function (session) {
var msg = new builder.Message(session);
msg.attachmentLayout(builder.AttachmentLayout.carousel)
msg.attachments(
//這裡要注意 line 要發 carousel 要注意button數量等
[
new builder.HeroCard(session)
.title("Classic White T-Shirt") // 大標題
.subtitle("100% Soft and Luxurious Cotton") //說明
.text("Price is $25 and carried in sizes (S, M, L, and XL)") //給電腦看的
.images([builder.CardImage.create(session, 'http://petersapparel.parseapp.com/img/whiteshirt.png')]) // 要放圖的話,全要放,而且要https
.buttons([
builder.CardAction.imBack(session, "buy classic white t-shirt", "Buy") // CardAction.imBack :是直接讓使用者傳訊, 這個範例後面還有設計一個 triggerAction 去 促發 動作。
//CardAction.openUrl 直接開啟網頁
//CardAction.postBack 傳資料回去給bot
//line 可以作到的項目 https://developers.line.me/en/docs/messaging-api/reference/#action-objects
// Datetime picker action <== line 的新招 ,得用這個CardAction.dialogAction("DatetimePicker")實現
]),
new builder.HeroCard(session)
.title("Classic Gray T-Shirt")
.subtitle("100% Soft and Luxurious Cotton")
.text("Price is $25 and carried in sizes (S, M, L, and XL)")
.images([builder.CardImage.create(session, 'http://petersapparel.parseapp.com/img/grayshirt.png')])
.buttons([
builder.CardAction.imBack(session, "buy classic gray t-shirt", "Buy")
])
]);
session.send(msg).endDialog();
}).triggerAction({ matches: /^(show|list)/i });