Add Like and Dislike button after every message in Microsoft Bot Framework

Question

How can I add like and dislike button after each message postback by bot to get user feedback. And if user click on dislike button then my bot should give some suggestions nearer to that topic. Is this possible to implement in Azure Bot Framework?

Answer 1

The best way is to respond with cards. There are different types of cards for different purposes. For an example, we can create a button card and assign action to that button as like and dislike for each message card in the bot conversation.

All the bot responses are stored in .lg file. That file will be exposed to the composer in the bot response page. There are three different templates. Simple response, conditional response and structured response. Based on the requirement, design the bot with these templates.

https://docs.microsoft.com/en-us/azure/bot-service/file-format/bot-builder-lg-file-format?view=azure-bot-service-4.0

The above link can be used for structured response.

The below link is to implement cards for different templates and purpose with flow of implementation.

https://docs.microsoft.com/en-us/composer/how-to-send-cards?tabs=v2x

Answer 2

Is this possible to implement in Azure Bot Framework?

Yes you can implement that using Azure Bot SDK V4.0 specifically on Asp.net Core Bot SDK V-4.0 you can do that.

How can I add like and dislike button after each message postback by bot to get user feedback?

You can use a "Hero card" to add such kind of button then you can set Unicode for like 👍 and dislike 👎 option. Here is the example how you can design that particular card.

Like-Dislike PromptCard:

public IMessageActivity LikeDislikeCard()
        {
            try
            {
                //Break in Segment
                var timeInfoCard = Activity.CreateMessageActivity();
                //Bind to Card
                var heroCard = new HeroCard
                {
                    Title = "How do you think about the answer?",
                    Images = new List<CardImage> { new CardImage("") },
                    Buttons = new List<CardAction> {
                        new CardAction(ActionTypes.ImBack, "👍👍👍👍👍", value: "like") ,
                        new CardAction(ActionTypes.ImBack, "👎👎👎👎👎", value: "dislike")
                    },
                };

                // Create the attachment.
                var attachment = heroCard.ToAttachment();

                timeInfoCard.Attachments.Add(attachment);
                timeInfoCard.AttachmentLayout = AttachmentLayoutTypes.Carousel;
                return timeInfoCard;
            }
            catch (Exception ex)
            {
                throw new NotImplementedException(ex.Message, ex.InnerException);
            }

        }

Call Like-Dislike PromptCard when sending Response:

        var likeDislikeCard = LikeDislikeCard();
        await turnContext.SendActivityAsync(likeDislikeCard);

Note: But as you pointed out that you would like to take user feedback on bot conversation so there are better way out to achieve that. In that case you can use below way to collect user feedback:

User Feedback Card:

public IMessageActivity UserFeedbackCard()
        {
            try
            {
                //Break in Segment
                var timeInfoCard = Activity.CreateMessageActivity();
                var thanks = "Thank you very much for your interaction";
                var rate = "You could rate our service...";
                //Bind to Card
                var heroCard = new HeroCard
                {
                    // Title = "Thank you very much for your interaction, you could rate me..",
                    Text = string.Format("**{0}** " + Environment.NewLine + "**{1}**", thanks, rate),
                    Images = new List<CardImage> { new CardImage("") },
                    Buttons = new List<CardAction> {
                        new CardAction(ActionTypes.ImBack, "\U0001F929", value: "one") ,
                        new CardAction(ActionTypes.ImBack, "\U0001F929 \U0001F929 ", value: "two"),
                        new CardAction(ActionTypes.ImBack, "\U0001F929 \U0001F929 \U0001F929", value: "three"),
                        new CardAction(ActionTypes.ImBack, "\U0001F929 \U0001F929 \U0001F929 \U0001F929 \U0001F929", value: "four"),
                        new CardAction(ActionTypes.ImBack, "\U0001F929 \U0001F929 \U0001F929 \U0001F929 \U0001F929 \U0001F929", value: "five"),
                    },
                };

                // Create the attachment.
                var attachment = heroCard.ToAttachment();

                timeInfoCard.Attachments.Add(attachment);
                timeInfoCard.AttachmentLayout = AttachmentLayoutTypes.Carousel;
                return timeInfoCard;
            }
            catch (Exception ex)
            {
                throw new NotImplementedException(ex.Message, ex.InnerException);
            }

        }

Output: