Adding buttons to bot framework application

Question

I am trying to implement a bot using the bot framework from Microsoft. I followed the documentation but it doesn't seem to be adding the buttons properly. On skype it shows a sort of a thumbnail which opens into the skype download page. On facebook messenger it doesn't show anything.

Any advice? Thank you!

Manoj Bhardwaj Manoj Bhardwaj · Accepted Answer · 2017-11-15T11:07:00

Yes you can achieve to add a custom button which will work on every channel of bot framework.

There are two approach to achieve that: 1) Use Cards feature of Bot to get buttons. (Quick and Easy) 2) Use direct Line Channel and Add your custom button. (Complex)

Lets start with approach 1

You need to create a hero card and call it in your dialog. Hero card contains your text response from bot and Thumbnail image url. (You can remove thumbnail if not required). Below is the running code for your help.

public async Task StartAsync(IDialogContext context)
        {
            context.Wait(ImgCardResponse);
        }

        private async Task ImgCardResponse(IDialogContext context, IAwaitable<IMessageActivity> argument)
        {
            var message = await argument;

            //responseMsgOnly is used to pass bot reply message
            //responseImage is used to pass thumbnail image
            var attachment = BotButtonCard(responseMsgOnly, responseImage);
            cardMsg.Attachments.Add(attachment);
            await context.PostAsync(cardMsg);



        }
        private static Attachment BotButtonCard(string responseMsgOnly, string responseImage)
        {
            var heroCard = new HeroCard
            {
                Title = "Here we go with the response",
                Subtitle = "Subtitle goes here",
                Text = responseMsgOnly,
                Images = new List<CardImage>
                {
                    new CardImage(responseImage)
                }
                Buttons = new List<CardAction>
                {
                    new CardAction(ActionTypes.OpenUrl, "Your Button Label", value: "https://www.google.com")
                }
            };

            return heroCard.ToAttachment();
        }
        private async Task ResumeAfterAction(IDialogContext context, IAwaitable<object> result)
        {
            context.Done(new object());
        }

Lets start with approach 2

The Direct Line API is a simple REST API for connecting directly to a single bot. This API is intended for developers writing their own client applications, web chat controls, or mobile apps that will talk to their bot. The Direct Line v3.0 Nuget package simplifies access to the underlying REST API.

You need to create an html page and put the below code

in head part

<link href="../botchat.css" rel="stylesheet"/>
    <script src="../js/botchat.js"></script>

in body part

<div id="bot"></div>
<script>

    var FirstName;
    var emailaddress; 
    var Environment;
    try{

        FirstName =  _spPageContextInfo.userDisplayName;
        emailaddress = "[email protected]";
        Environment= _spPageContextInfo.webAbsoluteUrl ;
    }
    catch(ex)
    {
        spCOntext = 'You';
        Environment = 'Local System';

    }

    BotChat.App({

        directLine: { secret: 'Your direct line secret' },

        user: { id: FirstName,Name: Environment},
        name: spCOntext,
        value: FirstName,
        From: '',
        bot: { id: 'Bot ID' },
        resize: 'detect'
    }, document.getElementById("bot"));

</script>

do let me know in case you need any help

Adding buttons to bot framework application

1 Answers