Microsoft Bot Framework Composer

Question

Hi, I'm currently developing a chatbot using microsoft bot framework composer.

Now I need a help in showing up some events using a Hero Card.

First I have http request action to my backend application to retrive upcoming events for users. Which is successfully running and bringing events in JSON format.

But while showing it in the chatbot I need to show it as Cards and also it should allow users to add that event to their cart directly from the chatbot interface itself.

{response.txt} this is one of the response I have got for a user specific condition.
Can anyone help me how to show this output response as Hero card in bot framework composer with a feature to add it to cart directly.

Answer 1

To display the events as Hero Cards in Microsoft Bot Framework Composer and allow users to add them to their cart, you can follow these steps:

Parse the JSON response: Start by parsing the JSON response from your backend application in the httpRequest action. You can use a Set a property action to store the parsed JSON in a variable.

Iterate over the events: Use a Foreach loop to iterate over the events in the parsed JSON array. This loop will create a Hero Card for each event.

Create a Hero Card: Inside the loop, add a Send a response action. In the response, use the HeroCard template to create a Hero Card for each event. Customize the card with relevant event information, such as the event title, date, and description. You can use the data from the parsed JSON array to populate the card fields dynamically.

Add buttons to the Hero Card: To allow users to add the event to their cart, add a button to the Hero Card. Use the OpenUrl action type for the button, and set the URL to a deep link or an API endpoint that adds the event to the user's cart. Customize the button text as appropriate.

End the loop: After creating the Hero Card, use a Continue loop action to continue the loop and process the next event. If there are no more events, the loop will exit.

Test the bot: Test the bot in the Bot Framework Emulator or another suitable channel. You should see the events displayed as Hero Cards, with the option to add them to the cart.

Here's an example of how the bot response might look in the Composer:

vbnet
Copy code
Foreach(events, event)
    - Send a response
        - Template: HeroCard
        - Inputs:
            - title: event.title
            - subtitle: event.date
            - text: event.description
            - buttons:
                - type: OpenUrl
                  title: Add to Cart
                  value: <URL to add event to cart>
Continue loop
Make sure to replace <URL to add event to cart> with the appropriate URL or API endpoint that adds the event to the cart.

By following these steps, you can display the events as Hero Cards in the Microsoft Bot Framework Composer and allow users to add them to their cart directly from the chatbot interface.