Demonstration of using AdaptiveCards.io in Twilio Flex + Web Chat to create interactive conversation cards
This application includes two components:
- Twilio React Web Chat
- Flex Plugin
- Serverless backend for flex plugin Conversation Cards feature
Forked version of the Twilio Web Chat React widget, with Adaptive Card wrapper element added
The baseline for the Flex Plugin is the PS Template, two features have been created (Message Drop Zone, Conversation Cards) and another modified (Canned Responses).
- Canned responses - Adds data (message only) to elements and makes them draggable
- Conversation Cards - Renders a list of cards from serverless backend, adds associated data (card JSON, message)
- Message Drop Zone - Receives HTML drop requests and looks for associated data (card JSON, message)
A set of assets served up to Flex UI that represent the Adaptive Card to be shown
See the serverless-functions/src/assets/conversation-cards
directory
responses.private.json
file contains the title, message and a file name to the adaptive card
Each adaptive card is defined in the definitions/*.json
sub folder