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