Skip to content

Latest commit

 

History

History
 
 

cards-CarouselCards

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
.vscode
.vscode
 
 
images
images
 
 
README.md
README.md
 
 
app.js
app.js
 
 
azuredeploy.json
azuredeploy.json
 
 
package.json
package.json
 
 

README.md

Carousel of Cards Bot Sample

A sample bot that sends multiple rich card attachments in a single message using the Carousel layout.

[![Deploy to Azure][Deploy Button]][Deploy CarouselCards/Node] [Deploy Button]: https://azuredeploy.net/deploybutton.png [Deploy CarouselCards/Node]: https://azuredeploy.net

Prerequisites

The minimum prerequisites to run this sample are:

  • Latest Node.js with NPM. Download it from here.
  • The Bot Framework Emulator. To install the Bot Framework Emulator, download it from here. Please refer to this documentation article to know more about the Bot Framework Emulator.
  • [Recommended] Visual Studio Code for IntelliSense and debugging, download it from here for free.

Code Highlights

You can send multiple rich card attachments in a single message. On most channels they will be sent as a list of rich cards, but some channels (like Skype and Facebook) can render them as a carousel of rich cards. The Message.attachmentLayout() method allows you to control how the rich cards will be rendered. Check out the key code located in app.js class where the attachments layout is changed to the Carousel mode.

Note: Only the Hero and Thumbnail Cards are supported for the Carousel AttachmentLayout mode.

function (session) {
    var cards = getCardsAttachments();

    // create reply with Carousel AttachmentLayout
    var reply = new builder.Message(session)
        .attachmentLayout(builder.AttachmentLayout.carousel)
        .attachments(cards);

    session.send(reply);
}

Outcome

You will see the following result in the Bot Framework Emulator when opening and running the sample. Note that an horizontal scrollbar appears, allowing you to move through the different cards.

Sample Outcome

You will see the following in your Facebook Messenger.

Sample Outcome

On the other hand, you will see the following in Skype.

Sample Outcome

Note: At the time of writing this sample, there is a limit on the amount of cards that can be stacked in a carousel. For Facebook, attachments carousel is mapped to the Generic Template which has a limit of 10 elements. For Skype, there's a limit of 5 elements in the carousel.

More Information

To get more information about how to get started in Bot Builder for Node and Attachments please review the following resources:

Limitations
The functionality provided by the Bot Framework Activity can be used across many channels. Moreover, some special channel features can be unleashed using the Message.sourceEvent method.

The Bot Framework does its best to support the reuse of your Bot in as many channels as you want. However, due to the very nature of some of these channels, some features are not fully portable.

The features used in this sample are fully supported in the following channels:

  • Skype
  • Facebook

They are also supported, with some limitations, in the following channels:

  • Telegram
  • DirectLine
  • WebChat
  • Slack
  • Kik
  • Email
  • GroupMe

On the other hand, they are not supported and the sample won't work as expected in the following channels:

  • SMS