Adaptive Cards support in web chat using bot framework

Shubhan Chemburkar

September 5, 2019

This post is cross post from archived blog at worldwidecode.wordpress.com

Microsoft's bot framework allows developers to create bots with rich cards support using Adaptive Cards.

When using the bot connector service (directline) to test your bots, certain elements may not render. This is because Directline will drop elements it does not recognize.

Fortunately there is a work around available.

Set the attachment content type property to 'application/vnd.microsoft.card.custom' when sending the AdaptiveCard.

return new Attachment("application/vnd.microsoft.card.custom", content: card);

Then in your web page, reset the connect type back to adaptive cards like below

const attachmentMiddleware = () =&gt; next =&gt; card =&gt; {
  if (card.attachment.contentType === 'application/vnd.microsoft.card.custom') {
    card.attachment.contentType = 'application/vnd.microsoft.card.adaptive'
  }
  return next(card)
};

Finally, make sure the attachmentMiddleware is added to the Web Chat.

<ReactWebChat directLine={directLine} attachmentMiddleware={attachmentMiddleware} />

This is in React, for html/javascript, see details in issue on GitHub.

Source https://github.com/microsoft/BotFramework-Services/issues/87#issuecomment-500662897

More details on customizing web chat cards are in GitHub