Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Facebook Messenger API: Webviews Opening in Browser – Facebook api

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

Tags:

5

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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/

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
  4. 0

    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/

    Login or Signup to reply.
  5. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search