iOS Facebook Messenger, automatically close link after its been opened and task completed

Question

Using the iOS Facebook Messenger App on my iPad, I'm building a bot that will send a user a media player link.

After the user has clicked the link, it opens the link inline, inside the Facebook Messenger App (at least this is the iPad behavior). At the end of the media playback, I'd like to automatically close the inline browser window and return the user to the current conversation.

When I try to and do window.close() that is not closing the inline browser window that is opened within iPad Facebook Messenger. Is there any other way to close the Facebook browser window?

Answer 1

Widely Supported

Facebook Messenger Extension close method is the most compatible way to do it. On mobile it closes the webview, on desktop it will close the tab (webviews open in new tabs on desktop messenger).

First, whitelist your domain to be able to use Messenger Extensions, use the access token for your app. Use the page_access_token you generated for your bot.

curl -X POST -H "Content-Type: application/json" -d '{
  "whitelisted_domains":[
    "https://petersfancyapparel.com"
  ]
}' "https://graph.facebook.com/v2.6/me/messenger_profile?access_token=PAGE_ACCESS_TOKEN"

Load the Messenger SDK on your webview page with the video

<script>
(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'));
</script>      

Then add an event listener to the video element to call the close browser function

<video src="video.ogv" id="myVideo">
  video not supported
</video>

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
       MessengerExtensions.requestCloseBrowser(function success() {

      }, function error(err) {

      });
    }
</script>

---

iOS Only

Quick and dirty ios only way is to do a redirect to to https://www.messenger.com/closeWindow/?image_url=IMAGE_URL&display_text=DISPLAY_TEXT which shows the specified image and text briefly before the window closes. Docs on this

For that you would do

window.replace('https://www.messenger.com/closeWindow/?image_url=IMAGE_URL&display_text=DISPLAY_TEXT')