Skip to main content

Using the new Facebook Messenger 1.2 Features with Bot Framework

This week, Facebook announced new v1.2 updates to their Facebook Messenger bot platform including new capabilities for developers. Bot Framework’s design allows you to take advantage of several of these features immediately, and we’ll make it even easier to use them as we add native support over time.

Bot Framework Schema and ChannelData

The Bot Framework makes it easy to write a conversational Bot that works across multiple channels. It does so by bringing the most common features together into the schema and SDK’s, and normalizes the differences in capabilities between channels. As such, a series of radio buttons in one channel might become a numbered text list on SMS.

The Bot Framework is designed to quickly adapt to new channel capabilities. The ChannelData feature enables developers to immediately get access to new channel features as soon as they’re available, before they’ve become common across channels and incorporated into the core framework.

Using ChannelData to access new Facebook Quick Replies

Facebook’s Quick Replies (aka keyboards on other channels) were updated to include two new features this week; specifically the ability to have icons on the individual buttons, and the location button to enable location sharing on mobile devices. Below is a C# sample demonstrating how to use the C# BotBuilder SDK, channelData and JSON.net:

Activity replyToConversation = message.CreateReply("Quick Replies");

dynamic quickReplies = new JObject();

dynamic fbQRButtonRed = new JObject();
fbQRButtonRed.content_type = "text";
fbQRButtonRed.title = "red";
fbQRButtonRed.payload = "DEVELOPER_DEFINED_PAYLOAD_FOR_PICKING_RED";
fbQRButtonRed.image_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Button_Icon_Red.svg/300px-Button_Icon_Red.svg.png";

dynamic fbQRButtonBlue = new JObject();
fbQRButtonBlue.content_type = "text";
fbQRButtonBlue.title = "blue";
fbQRButtonBlue.payload = "DEVELOPER_DEFINED_PAYLOAD_FOR_PICKING_BLUE";
fbQRButtonBlue.image_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Button_Icon_Blue.svg/768px-Button_Icon_Blue.svg.png";

dynamic fbQRButtonLocation = new JObject();
fbQRButtonLocation.content_type = "location";

quickReplies.quick_replies = new JArray(fbQRButtonRed, fbQRButtonBlue, fbQRButtonLocation);

replyToConversation.ChannelData = quickReplies;

await connector.Conversations.ReplyToActivityAsync(replyToConversation);

The Button objects now have the new image_url field for the button icon, and there’s a new button with content_type location that will add a location sharing button on the mobile client.

You can get the same behavior using the Node.JS version of the BotBuilder SDK with the sourceEvent property:

var replyMessage = new builder.Message(session)
    .text("Testing");

replyMessage.sourceEvent({ 
        facebook: { 
            quick_replies: [{
                content_type:"text",
                title:"Red",
                payload:"DEVELOPER_DEFINED_PAYLOAD_FOR_PICKING_RED",
                image_url:"https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Button_Icon_Red.svg/300px-Button_Icon_Red.svg.png"
            },            
            {
                content_type:"text",
                title:"Blue",
                payload:"DEVELOPER_DEFINED_PAYLOAD_FOR_PICKING_BLUE",
                image_url:"https://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Button_Icon_Blue.svg/768px-Button_Icon_Blue.svg.png"
            },
            {
                content_type:"location"
            }]
        }
    });

session.send(replyMessage);

You can use the ChannelData feature to also take advantage of the new Facebook Share button type on generic template cards, as well as controlling the view height of the webview control.

ChannelData works for mulitple channels, not just Facebook, and gives you additional control over your interaction with the channel, as well as additional channel-specific information in messages coming into the bot. To learn more about ChannelData check out the ChannelData Documentation.

As always, you can send feedback on StackOverflow using the [botframework] tag, and on our Bot Builder github repo.

Thanks and happy bot building!

Jim Lewallen from the Bot Framework Team