Bot Framework v4 Loading Facebook Webview

Question

I'm trying to figure out how to get the MS Bot Framework v4 to work with the Facebook Web View. Currently there isn't anything on the entire internet on how to get this working. There are some examples, like this one , showing how it can work with BF v3.

What I can't figure out is how this works with HeroCard s and CardAction s in v4.

It seems from the documentation that this type of feature would require an ActionTypes that included a value for web_url which that enum completely ommits. Suggesting this feature isn't supported in BF v4.

I'm currently porting a Botman PHP Bot to MS Bot Framework at it seems it's extremely trivial to do this in Botman by simple calling enableExtensions() on the button element.

I've tried too many approaches to list here but the current attempt looks like this:

var viewButton = new CardAction(
    "web_url", 
    "View Details", 
    null, 
    "",
    "",
    "https://myurl",
    JObject.FromObject(new { messenger_extensions = true }));

I've gone through all the domain whitelisting processes so I'm sure that is all ready to go, However, with my current attempts in place Messenger just errors as it seems Favebook dislikes the JSON the Bot Framework is producing.

I've also tried sub-classing the CardAction class like this:

public class WebViewCardAction : CardAction
{
    public WebViewCardAction(string displayText, string url)
    {
        Type = "web_url";
        Url = url;
        Title = displayText;
        MessengerExtensions = true;
        WebviewHeightRatio = "compact";
    }

    [JsonProperty(PropertyName = "url")]
    public string Url { get; set; }

    [JsonProperty(PropertyName = "webview_height_ratio")]
    public string WebviewHeightRatio { get; set; }

    [JsonProperty(PropertyName = "messenger_extensions")]
    public bool MessengerExtensions { get; set; }
}

Which when looking at the JSON in the Bot Framework emulator produces JSON like this:

{
    "messenger_extensions": true,
    "title": "View Details",
    "type": "web_url",
    "url": "https://myurl",
    "webview_height_ratio": "compact"
}

Which seems to agree with the stuff I can find in the examples for FB messenger. But with this in place FB messenger errors without even displaying the HeroCard .

Has anyone got this working?

Are there any examples online to look at?

Answer 1

Because the activity schema has not changed, the example you linked also works in V4:

private async Task TestFacebookWebview(ITurnContext turnContext,
    CancellationToken cancellationToken)
{
    var reply = turnContext.Activity.CreateReply();

    var attachment = new
    {
        type = "template",
        payload = new
        {
            template_type = "button",
            text = "Your 🍕 is on it's way!",
            buttons = new[]
            {
                new
                {
                    type = "web_url",
                    url = "https://mybot.azurewebsites.net/",
                    title = "See on map",
                    webview_height_ratio = "compact",
                    messenger_extensions = true,
                },
            },
        },
    };

    reply.ChannelData = JObject.FromObject(new { attachment });

    await turnContext.SendActivityAsync(reply, cancellationToken);
}

As you can see, there's no need for hero cards or card actions. In this example, the Facebook webview is invoked using a button template that's passed through the ChannelData , which is metadata in the activity that's specific to the channel. Messenger reads that data and creates something that looks like a card for you.

Make sure you whitelist your domain in order for this to work.