In the previous post, we created child dialogs that were called by a parent dialog. Most of what we’ve tried so far involve plain text replies. In a real-world scenario, however, one might need to display images or links to the client. In this post, we will explore adding attachments and cards.

Getting Started

Attachments

In our current project, let’s create a new Dialog to experiment on. We will come back to the ArithmeticDialog later.

  1. Create a new Dialog called CardsDialog.

  1. Paste the code below:

  1. Dissecting the code:
    1. A ConnectorClient is created and the current context’s service url is supplied.
    2. A reply is created using the CreateReply() method.
    3. Recipient is set to the appropriate ChannelAccount.
    4. An object of class Attachment has been added to the Attachments property of the reply.
    5. A reply has been posted through the ReplyToActivityAsync method.
  2. Let’s try it.

Bot Framework: 04 – Attachments and Cards

Cards

Rich Cards provide us a way to display an array of attachments within the message. As of this writing, bot framework currently supports 8 types of cards. For the complete list, click here.

  1. Let’s update our code
    1. Paste the following in the CardsDialog.cs.

  1. Let’s test it in the emulator
    1. Animation Card

  1. Audio Card

  1. Hero Card

  1. Thumbnail Card

  1. Receipt Card

  1. Sign In Card

  1. Video Card

Conclusion

In this post, we added attachments and cards, which are basically also attachments, to the bot’s replies. Cards provide the user with a rich visual element to the bot’s interaction with the user.