iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 16
0

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 });

上一篇
Send proactive messages
下一篇
Add suggested actions to messages
系列文
Microsoft Bot Framework 30天上手 + 自幹 Line Builder 串接 + Line Bot Demo30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言