Search code examples
botframework

How to style the menu button in BotFramework?

I'm trying to add menu buttons exactly as shown in this page, Image
(source: botframework.com)

I tried using HeroCard as below 

 var msg = new builder.Message(session)
            .textFormat(builder.TextFormat.xml)
            .attachments([
                new builder.HeroCard(session)
                    .title("Main Menu")
                    .subtitle("How can we assist you today?")
                    .text("Please click on a button.")
                    .buttons([
                                builder.CardAction.dialogAction(session,"flight",'','Book a Flight'),
                                builder.CardAction.dialogAction(session,"hotel",'','Book a Hotel'),
                                builder.CardAction.dialogAction(session,"car",'','Book a Car')
                            ])
            ]);

I know above is not enough, trying to figure what needs to be done to get the buttons displayed nicely as in the BOT Framework overview page.

Here's how the above code would display. My Menu Buttons

Any assistance would be very much appreciated! :)

Solution

  • How the buttons are being rendered will depend on the channel where you are using your bot. You cannot change the buttons style with the exception of the WebChat channel, that is open source and you might be able to tweak the stylesheets.

    In your image, you are using the emulator, and that's the way button looks like there.

    Check the Channel Inspector to get an idea about how each of channels will render each of the supported features.