How to create custom cards (like adaptive cards) in botframework webchat using React.js?

Question

I would like to create custom cards (like adaptive cards,hero card carousel model) in Botframework Webchat using Reactjs. Is it possible to create custom cards in webchat. If yes how can i achieve that. Any help would be really appreciated.

Answer 1

To use AdaptiveCards inside your own application, using any JS framework, the team behind cards made 3 packages available:

• https://www.npmjs.com/package/adaptivecards-templating
• https://www.npmjs.com/package/adaptivecards
• https://www.npmjs.com/package/adaptivecards-designer

You can fully implement Adaptive Cards functionality in your own apps outside of any Microsoft environment.

The official guide around that can be found here: https://learn.microsoft.com/en-us/adaptive-cards/rendering-cards/getting-started

Some further guides and examples can be found here:

• https://www.madewithcards.io which shows a lot of sample cards
• https://www.github.com/teamwork/vscode-projects a vscode extension made with cards
• https://medium.com/@tim.cadenbach/adaptive-cards-what-else-can-you-use-them-for-1cf6f9819c1a

There also are quite a few tools for various JS Frameworks like Vue.JS or React or Flutter. Also Webcomponents. You can find most of the tools here: https://www.madewithcards.io/tools/