Category Archives: Emerging Technology

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!

Sending Facebook’s Quick replies using Microsoft Bot Framework

Facebook’s quick replies are a great way to present buttons to the users. Per Facebook’s Quick Replies documentation:

Quick Replies provide a new way to present buttons to the user. Quick Replies appear prominently above the composer, with the keyboard less prominent. When a quick reply is tapped, the message is sent in the conversation with developer-defined metadata in the callback. Also, the buttons are dismissed preventing the issue where users could tap on buttons attached to old messages in a conversation.

Taking advantage of this feature when using Microsoft Bot Framework is really simple, even knowing this functionality is very specific to Facebook.

If you want to use special features or concepts for a channel, the Bot Framework provides a way to send native metadata to that channel giving you much deeper control over how your bot interacts on a channel. The way Bot Framework enables this is through the ChannelData property in the C# SDK and the sourceEvent property in Node.js.

Not every capability provided by a channel must go through the ChannelData property; that will basically depend on whether the functionality can be consistent across channels. When that’s the case, it’s very likely the functionality will be addressed in the core API, like with Rich card attachments.

 

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 quick replies schema is pretty straightforward. Below is the portion of the code that creates some text only quick replies and assigns them to the activity’s ChannelData.

if (reply.ChannelId.Equals("facebook", StringComparison.InvariantCultureIgnoreCase))
{
var channelData = JObject.FromObject(new
{
quick_replies = new dynamic[]
{
new
{
content_type = "text",
title = "Blue",
payload = "DEFINED_PAYLOAD_FOR_PICKING_BLUE",
image_url = "https://cdn3.iconfinder.com/data/icons/developperss/PNG/Blue%20Ball.png"
},
new
{
content_type = "text",
title = "Green",
payload = "DEFINED_PAYLOAD_FOR_PICKING_GREEN",
image_url = "https://cdn3.iconfinder.com/data/icons/developperss/PNG/Green%20Ball.png"
},
new
{
content_type = "text",
title = "Red",
payload = "DEFINED_PAYLOAD_FOR_PICKING_RED",
}
}
});

reply.ChannelData = channelData;
}

Note that in the code I’m checking for the channel so quick replies are only sent in outgoing messages to a Facebook channel.


ProTip
: If you are planning to use quick replies in many places or in many bots and you don’t want to remember the required schema; I would recommend creating some helper classes to ease the work. I included those as part of the sample, and now the code looks like:

var channelData = new FacebookChannelData
{
QuickReplies = new[]
{
new FacebookTextQuickReply("Blue", "DEFINED_PAYLOAD_FOR_PICKING_BLUE", "https://cdn3.iconfinder.com/data/icons/developperss/PNG/Blue%20Ball.png"),
new FacebookTextQuickReply("Green", "DEFINED_PAYLOAD_FOR_PICKING_GREEN", "https://cdn3.iconfinder.com/data/icons/developperss/PNG/Green%20Ball.png"),
new FacebookTextQuickReply("Red", "DEFINED_PAYLOAD_FOR_PICKING_RED")
}
};

When a Quick Reply is tapped, a text message will be sent to your webhook Message Received Callback. The text of the message will correspond to the title of the Quick Reply. The message object will also contain the payload custom data defined on the Quick Reply.

Accessing the payload information only requires using the ChannelData of the message received after the user tapped the Quick Reply button. Optionally, you can create a typed model of the response and deserialize the channel data.

private async Task OnColorPicked(IDialogContext context, IAwaitable<IMessageActivity> result)
{
var colorMessage = await result;

var message = $"Color picked: {colorMessage.Text}.";

if (colorMessage.ChannelId.Equals("facebook", StringComparison.InvariantCultureIgnoreCase))
{
var quickReplyResponse = colorMessage.ChannelData.message.quick_reply;

if (quickReplyResponse != null)
{
message += $" The payload for the quick reply clicked is: {quickReplyResponse.payload}";
}
else
{
message += " It seems you didn't click on a quick reply and you just typed the color.";
}
}

await context.PostAsync(message);

context.Wait(this.MessageReceivedAsync);
}

 

The outcome

As soon as you send a message to the Bot, it will respond with a question and the three quick replies. Intentionally, I’m showing quick replies with and without images.

image_thumb17

Once you tap on the quick reply button, the Bot will respond with the selected color and also it will show the defined payload for the quick reply button.

image_thumb18

Quick replies are just hints, you can still type something different, in which case the sample will detect that you didn’t tap on a quick reply button and it won’t look for the defined payload.

image_thumb19

 

As you can see, quick replies are powerful and really easy to use right from your Bot Framework based bot. If one of the channels you are supporting within your bot is Facebook, I would strongly recommend using them. To learn more about Facebook features with Bot Framework, please read here.