Microsoft Bot Framework Composer

Qubespace LLP 20 Reputation points

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.

Azure AI Bot Service
Azure AI Bot Service
An Azure service that provides an integrated environment for bot development.
806 questions
A cloud computing platform and infrastructure for building, deploying and managing applications and services through a worldwide network of Microsoft-managed datacenters.
1,072 questions
0 comments No comments
{count} votes

Accepted answer
  1. VasimTamboli 4,785 Reputation points
    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:
    Copy code
    Foreach(events, event)
        - Send a response
            - Template: HeroCard
            - Inputs:
                - title: event.title
                - subtitle:
                - 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.
    0 comments No comments

0 additional answers

Sort by: Most helpful