Botframework-sdk: Need Information

[vignestheo]

Hello Team

Is it possible to achieve web view functionality in Facebook Messenger app in my bot using node js Microsoft framework

[eanders-MS]

@vignestheo Can you provide more detail about what you are trying to do? Is it something that Facebook Messenger supports natively? If so, can you please provide a link to their docs on this feature, if possible? If it is possible on the platform, there's usually a way to get it to work, even if we don't explicitly support it in the BotBuilder API.

[haggaishachar]

Here's the link to the FB Messenger webview reference:
https://developers.facebook.com/docs/messenger-platform/messenger-extension

[olumytee]

Hi everyone, any update on this ?

[gilesbutler]

I'd love to know if this is possible too

[amitbend]

me too

[kralmajster]

Same here... no updates?

[olumytee]

I was able to use webview by composing the message using sourceEventin Node. See sample below.

let msg = new builder.Message(session)
        .sourceEvent({
            facebook: {
                attachment: {
                    type: "template",
                    payload: {
                        template_type: "generic",
                        "elements":[
                        {
                            "title":"Page Title",
                            "image_url": "https://link-to-image/",
                            "default_action": {
                                "type": "web_url",
                                "url": "https://link-to-webview/",
                                "messenger_extensions": true,
                                "webview_height_ratio": "compact",
                                "fallback_url": "https://link-to-webview/"
                            },
                            "buttons":[
                            {
                                "title": "Page Title",
                                "type":"web_url",
                                "url": "https://link-to-webview/",
                                "messenger_extensions": true,
                                "webview_height_ratio": "compact", 
                                "fallback_url": "https://link-to-webview/",
                            }            
                            ]  
                    }
                    ]
            }}}
        });
session.send(msg);

[deriyuval]

@olumytee I tried working by your sample but with no success,

Request to 'https://facebook.botframework.com/v3/conversations/1420192521385331-1453766934648207/activities/mid.1489633209554%3A29bbf6ea98' failed: [400] Bad Request

would you mind posting a more specific message that works for you?

[olumytee]

@deriyuval

This is the exact code I use in my bot

/**
 * 
 * If Messenger, use webview else send Hero Card
 */

let msg;

if (session.message.source === "facebook"){ 
    msg = new builder.Message(session)
        .sourceEvent({
            facebook: {
                attachment: {
                    type: "template",
                    payload: {
                        template_type: "generic",
                        "elements":[
                        {
                            "title":"Enter your PIN",
                            "image_url": 'https://biya.com.ng/logo.png',
                            "subtitle":"Secure your Biya account",
                            "default_action": {
                                "type": "web_url",
                                "url": `https://biya.com.ng/?user=${session.message.user.id}`,
                                "messenger_extensions": true,
                                "webview_height_ratio": "tall",
                                "fallback_url": `https://biya.com.ng/?user=${session.message.user.id}`
                            },
                            "buttons":[
                            {
                                "type":"web_url",
                                "url": `https://biya.com.ng/?user=${session.message.user.id}`,
                                "messenger_extensions": true,
                                "webview_height_ratio": "tall",
                                "fallback_url": `https://biya.com.ng/?user=${session.message.user.id}`,
                                "title": "Set PIN"
                            }            
                            ]  
                    }
                    ]
            }}}
        });
} else {
    msg = new builder.Message(session)
        .attachments([
            new builder.HeroCard(session)
                .text("Click 'Set PIN'")
                .images([
                    builder.CardImage.create(session, 'https://biya.com.ng/logo.png')
                ])
                .buttons([
                    builder.CardAction.openUrl(session, `https://biya.com.ng/?user=${session.message.user.id}`, "Set PIN")
                ])
        ]);
}


// send message

session.send(msg);

Also you have to whitelist your domain on Facebook https://developers.facebook.com/docs/messenger-platform/messenger-profile/domain-whitelisting

Hope that helps.

[deriyuval]

@olumytee Thank you!!!,
I was careless and didn't bother to check that my domain was white listed correctly. everything works now.
thanks again!