Facebook Messenger API: Webviews Opening in Browser

Question

I'm trying to use the Facebook Messenger API to create a "generic" message with a button. When that button is clicked, I want to display a "webview" (ie. a framed version of a webpage inside Messenger).

However, even though my button has the required webview_height_ratio property, it still opens up in my phone's browser, not inside Messenger. Since the Facebook documentation claims that that's all you need to make a button open a webview, I'm not sure what I might be doing wrong.

The message I'm sending to Facebook to create the button (as part of a generic template) is:

{
    "recipient":{
        "id": "some ID"
    },
    "message": {
        "attachment":{
            "payload":{
                "elements":[{
                    "buttons": [{
                        "title":"Webview example",
                        "type":"web_url",
                        "url":"http://www.example.com",
                        "webview_height_ratio":"compact"
                    }],
                    "image_url": "http://www.example.com/image.png",
                    "item_url": "http://www.example.com",
                    "subtitle":"It's a TV!",
                    "title":"Some TV"
                }],
                "template_type":"generic"
            },
            "type":"template"
        }
    }
}

Can anyone tell me what I might be doing wrong?

EDIT: I'm not sure if it was necessary, but I have white-listed the domain I'm trying to point to for the webview (but obviously that hasn't helped).

Answer 1

I have faced same issue.

In this Block

      "buttons": [{
                    "title":"Webview example",
                    "type":"web_url",
                    "url":"http://www.example.com",
                    "webview_height_ratio":"compact"
                }],

Try Adding this part after web view height ratio

"messenger_extensions": "true"

The Url Should be WhiteListed before using it in the webview. For making the domain Whitelisted. Refer the Link

https://developers.facebook.com/docs/messenger-platform/thread-settings/domain-whitelisting/