Using Facebook’s QuickReplies with PromptDialogs

In my last post I showed how easy it is to send Facebook’s quick replies using Microsoft Bot Framework. Using what we’ve learned; I’m now going to show you how you can use quick replies when using a PromptDialog.

 

Some of the PromptDialogs coming out of the box with the BotBuilder library (like the PromptChoice or PromptConfirm) expects a set of options (like the options to choose from) to be presented to the user. By default, these dialogs use a PromptStyler that based on the PromptStyle selected when creating the dialog; it will render the options in different ways: cards with buttons, all the options inline or one option per line to mention some of them.

The good news is that you can create your own PromptStyler and so, change the way the options are being rendered.

 

At this point, you might already have spotted what I will be doing as part of this post Smile. The whole idea is to create a custom PromptStyler that will take the provided options and render them as quick replies.

 

The code
The full sample is in GitHub. To run the sample, publish your bot, for example to Azure or use Ngrok to interact with your local bot in the cloud.

The code is extremely simple and is taking advantage of the models I put together in the previous post.

[Serializable]
public class FacebookQuickRepliesPromptStyler : PromptStyler
{
public override void Apply<T>(ref IMessageActivity message, string prompt, IList<T> options)
{
if (message.ChannelId.Equals("facebook", StringComparison.InvariantCultureIgnoreCase) && this.PromptStyle == PromptStyle.Auto && options != null && options.Any())
{
var channelData = new FacebookChannelData();

var quickReplies = new List<FacebookQuickReply>();

foreach (var option in options)
{
var quickReply = option as FacebookQuickReply;

if (quickReply == null)
{
quickReply = new FacebookTextQuickReply(option.ToString(), option.ToString());
}

quickReplies.Add(quickReply);
}

channelData.QuickReplies = quickReplies.ToArray();

message.Text = prompt;
message.ChannelData = channelData;
}
else
{
base.Apply<T>(ref message, prompt, options);
}
}
}

 

Using it in your dialogs is a no-brainer. Just provide an instance of the new PromptStyler when defining the prompt options and that’s it.

var promptOptions = new PromptOptions<string>(
"Please select your age range:",
options: new[] { "20-35", "36-46", "47-57", "58-65", "65+" },
promptStyler: new FacebookQuickRepliesPromptStyler());

PromptDialog.Choice(context, this.ResumeAfterSelection, promptOptions);

 

One caveat that I’m not addressing in this post is how to access the payload of the quick replies from the PromptDialog. In order to access to the payload, you will likely have to extend the PromptDialog (PromptConfirm is sealed but you can inherit from PromptChoice), override the MessageReceivedAsync and/or the TryParse and include the logic related to extracting the payload. Please refer to my previous post for the logic on how to extract the payload.

 

The outcome

image

image

Enjoy!



One Comment

Leave a Reply