How add HTML Button in bot framework

Question

I have recently started .net development and currently, I am developing a chatbot application in .net using Microsoft bot framework. Now I have to create below attached UI on azure Bot framework but I haven't found any solution for that. Please help me out to create the attached UI on the Bot framework.

Thanks in advance

Answer 1

You can use Adaptive Cards to render all kinds of forms and buttons in Chatbot using the Bot framework. The adaptive cards will support different channels like MS Teams, Web Chat, Emulator, etc.

As per your requirement, The adaptive card JSON structure will look like the following way. Also, you can design & Validate your own Adaptive cards using Adaptive Card Designer

{
"type": "AdaptiveCard",
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3",
"actions": [
    {
        "type": "Action.Submit",
        "title": "HealthFirst",
        "associatedInputs": "none"
    },
    {
        "type": "Action.Submit",
        "title": "Credit Card Services"
    },
    {
        "type": "Action.Submit",
        "title": "Insta Account"
    },
    {
        "type": "Action.Submit",
        "title": "WhatsApp Banking"
    }

]
}

We can validate the supported channels & versions available for the design of the adaptive card.

Sample Output:

The output UI will change based on the channel that you are going to use for the chatbot development. The given rendered output in MS Team channel ( Check the adaptive card designer URL).

Reference:

1. Adaptive Card samples