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.

Displaying the Webview

You can open the webview with any of the following:

The persistent menu
A URL button inside a message, including the generic template.
A Chat Plugin

In each of these instances, you can specify how the webview should look and behave.

If your experience uses the Messenger Extensions described in this section, remember to set the messenger_extensions parameter to true in the menu item or button you are invoking it from!

Messenger Extensions SDK - Required Domain Whitelisting

Messenger 웹 보기에서 Messenger Extensions SDK를 활성화하고 웹페이지를 표시하려면 반드시whitelisted_domains봇의 Messenger 프로필 속성에서 도메인(하위 도메인 포함)을 화이트리스트에 추가해야 합니다. 그러면 신뢰하는 도메인만 SDK 함수를 통해 제공되는 사용자 정보에 액세스할 수 있습니다.

도메인을 화이트리스트에 추가하는 방법에 대한 자세한 내용은 whitelisted_domains 참고 자료를 참조하세요.

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.

MessengerExtensions.requestCloseBrowser(function success() {
  // webview closed
}, function error(err) {
  // an error occurred
});

Closing with Redirect

You can also close the webview by redirecting the user to a URL with the following format:

https://www.messenger.com/closeWindow/?image_url=<IMAGE_URL>&display_text=<DISPLAY_TEXT>

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.

For more information, see Adding the Messenger Extensions SDK.

Best Practices

Use it for longer interactions (more than three steps) where people might want to edit their input or otherwise proceed in a non-linear fashion.

Use it for content that's especially visual.

Use it for user preferences, or to allow on-demand changes to previous selections.

Use it in combination with more conversational interactions.

Configure the height of your webview to match its content — and preserve the context of the thread beneath.

Take advantage of Messenger's webview extensions to bring the thread's context into the webview.

Don't feel limited to collecting all form information at once. You can capture it piece by piece conversationally, then use a form in the webview for later edits.

Mix conversational and webview interactions, and keep any given interaction brief. Combine thread and webview interactions for a "Messenger-native" experience.

Example Uses

A ticket search experience can display an interactive stadium seat map for choosing a seat.
A travel experience can provide travel preferences—aisle vs. window, inn vs. hotel, dietary needs—accessible from the persistent menu.
A dental appointment experience can display an interactive calendar for choosing an appointment slot.
A news publisher can provide a multi-select list of topics to subscribe to.
A brand can offer personal preferences to customize offers and free gifts.

Recommended Design Flow

People access your webview experience one of two ways: via a button if it's part of a larger conversational flow, or a menu item for ongoing access (e.g., preferences)—or both.
Your experience appears as a layer over the thread—full screen, at 75% height, or at 50% height, depending on your content and use case.
You may want to send content to the thread during or after the webview interaction.
When they're done, people can close the webview and return to the thread—or you can close it yourself in response to actions they take (e.g., a Save button).