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.



2 Comments

Leave a Reply