MessengerExtensions.requestCloseBrowser doesn't seem to work

Question

I'm using a webview in my Facebook Messenger chatbot for payment and MessengerExtensions.requestCloseBrowser is supposed to close the webview window and return the user back to the chat flow - but it doesn't work. The docs say it works and I tried to do exactly what they said; apparently I am missing something. Does anyone see what I'm missing here?

I am hosting the webview in a rails 4.2 app, so the js is in a separate file. I'm using jquery to handle the event. Here is the code:

the button in the view that should trigger the action (using slim): button type="button" class="chat-button" id="closeButton" Done!

the .js file:

$(function(d, s, id){
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.com/en_US/messenger.Extensions.js";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'Messenger'));

$(function() {
  $("#closeButton").click(function() {
    alert("hit me");
    MessengerExtensions.requestCloseBrowser(
      function success() {},
      function error(err) {
        alert(err)
      }
    );
    return false;
  });
});

window.extAsyncInit = function() {
    alert("js sdk finished loading");
};

Note that both alerts do fire, one when the sdk is loaded, and one when the button is clicked. But the webview does not close as advertised. BTW - the error returned is 2071010. What am I missing?

Answer 1

messenger_extensions needs to be set to true.

"attachment": {
    "type": "template",
    "payload": {
        "template_type": "button",
        "text": "Check this out!",
        "buttons": [
            {
                "type": "web_url",
                "url": "https://yourpage.com",
                "title": "Some Title",
                "webview_height_ratio": "compact",
                "messenger_extensions": true
            }
        ]
    }
}