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).

score 4 · Answer 1 · answered Oct 04 '17 at 14:11

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/

score 2 · Answer 2 · answered Feb 28 '18 at 04:06

2

In order for the webview to work on browser(chrome & rambox messenger tested) you need to set messenger_extensions to true aside from adding the webview_height_ratio field.

answered Feb 28 '18 at 04:06

Theo

1,932
4
17
40

score 1 · Answer 3 · answered Oct 11 '16 at 01:09

1

Apparently, webview only started to work in the last update.

Try to update your Messenger app.

https://messengerblog.com/bots/messenger-platform-1-2-link-ads-to-messenger-enhanced-mobile-websites-payments-and-more/

answered Oct 11 '16 at 01:09

gustavopch

796
9
16

Thanks for the suggestion, but I don't have a Messenger app to update: I'm writing the JSON myself so I know it's generating the JSON shown in my question. It's just that for some reason Facebook appears to be ignoring the `webview_height_ratio` property. – machineghost Oct 26 '16 at 18:40
I'm not sure about what you meant by "I don't have a Messenger app to update", but if I understood you correctly, when you touch the button created from your JSON in the Messenger app, it's leaving the app to open the page with a browser. What I meant is that you should go to Google Play / App Store and update your Messenger. – gustavopch Oct 26 '16 at 21:03
Ohhh, I see what you meant. – machineghost Oct 26 '16 at 21:33

score 1 · Answer 4 · answered Oct 22 '16 at 14:05

I figured out that webview only worked with sizes 'tall' and 'compact', as 'full' would open the default browser on my Android phone. I'm not using extensions, but tried setting this option to false and true, but that just made the button not appearing.

score 1 · Accepted Answer · answered Oct 26 '16 at 19:06

1

It turns out that I was doing everything right: the problem was Facebook. Evidently when you use a webview it only affects mobile users. Web-based Messenger users get a new window regardless of whether or not you specify a webview_height_ratio.

answered Oct 26 '16 at 19:06

machineghost

33,529
30
159
234

1

This is outdated. – Incepter Jun 05 '18 at 10:06

Facebook Messenger API: Webviews Opening in Browser

5 Answers5