Skip to content

Latest commit

 

History

History
 
 

cards-CarouselCards

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

Prerequisites

The minimum prerequisites to run this sample are:

  • The latest update of Visual Studio 2015. You can download the community version here for free.
  • 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.

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 IMessageActivity.AttachmentLayout property allows you to control how the rich cards will be rendered. Check out the key code located in the CarouselCardsDialog 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.

public virtual async Task MessageReceivedAsync(IDialogContext context, IAwaitable<IMessageActivity> result)
{
    var reply = context.MakeMessage();

    reply.AttachmentLayout = AttachmentLayoutTypes.Carousel;
    reply.Attachments = GetCardsAttachments();

    await context.PostAsync(reply);
    
    context.Wait(this.MessageReceivedAsync);
}

Outcome

You will see the following result in the Bot Framework Emulator when opening and running the sample solution. 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 also a limit of 10 elements in the carousel.

More Information

To get more information about how to get started in Bot Builder for .NET 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 ChannelData property.

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
  • Microsoft Teams

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 channel:

  • SMS