Webview

The Messenger Platform allows you to open a standard webview, where you can load webpages inside Messenger. This lets you offer experiences and features that might be difficult to offer with message bubbles, such as picking products to buy, seats to book, or dates to reserve.

Setting Webview Height

You can specify the height of the webview when it opens in messenger by setting the webview_height_ratio property when configuring any of the entry points above. The following sizes are supported:

compact

tall

full

Setting Webview Title

As with any webpage, the <title> tag sets the text displayed in the title bar for the webview.

<html>
<head>
<title>My Awesome Webview</title>
</head>
...
</html>

Closing the Webview

It is a good idea to close the webview after a transaction is complete, especially if actions the user took will result in a message in the thread. This can be done with the Messenger Extensions SDK or by using a redirect URL.

Closing with Messenger Extensions SDK

To close the webview using the Messenger Extensions SDK, call MessengerExtensions.requestCloseBrowser(). You can also optionally implement success and error callbacks functions.

Closing with Redirect

The values set for the display_text and image_url parameters will be displayed briefly until the window closes. Note that this method will only close if you redirect from your URL/Page. Directly opening the URL will not close the browser.

This only works on Android. On iOS, the text and image will be displayed, but the browser will not close automatically.

Messenger Extensions SDK

To give you the ability to tightly integrate experiences in the webview with the Messenger experience, we also have made the Messenger Extensions JS SDK available, which makes added functionality accessible in the webview, such as information about the thread context.