Messenger Webviews and Chat Extensions on Dexter

Any time you link out to a separate website from a bot, Messenger opens the url in a separate window called a webview.

For most scenarios, bot creators simply need to link to an existing website on the internet, which can be done easily by following the examples in the docs given on creating URL buttons for templates, and including a url button in your bot's persistent menu on the Dexter Platforms page.


If you are looking to create a webview specifically for your Dexter bot, read below on how to prepare your webview to display from within your bot:

1. Develop a Webview for Your Bot

As you create your webview, consider making use of the Messenger Extensions SDK, which will allow you to tightly integrate webview functionality with the Messenger experience.

2. Whitelist the Domains

If your bot makes use of the Messenger Extensions SDK, it must be included as a whitelisted domain before Facebook allows you to include it as a valid url.

To do this, head to the Settings > Messenger Platform page on the Facebook Page you've created for your bot and include the domain as a third-party domain under Whitelisted Domains.

Whitelisted Domains

3. Include the messenger_extensions Attribute

Once you have created your separate webview, you can trigger it to show:

URL Button inside a ^template() shortcode

To link out to a webview that makes use of the Messenger Extensions SDK from within a URL button of a ^template() shortcode, include additional attributes for messenger_extensions in the buttons object:

"buttons":[
  {
    "type":"web_url",
    "url":"https://petersfancyapparel.com/criteria_selector",
    "title":"Select Criteria",
    "webview_height_ratio": "full",
    "messenger_extensions": true,  
    "fallback_url": "https://petersfancyapparel.com/fallback"
  }
]
Persistent Menu

While we do support adding URL buttons for the Persistent Menu from your bot's Platform Page, you will need to make a separate request to enable URL buttons for webviews that make use of the Messenger Extensions SDK.

To link out to a webview that makes use of the Messenger Extensions SDK from within the Persistent Menu of the bot, make a separate POST request to the Messenger Profile API to enable messenger_extensions for the Persistent Menu button that links to a webview that makes use of the Messenger Extensions SDK.

Chat Extensions

To include the webview as a Chat Extension in your user's Messengers Extensions drawer, you must first:

Chat Extensions

  1. Confirm that the webview url is included as a whitelisted domain.
  2. Include this as a home_url for your bot's Facebook Page: Do this by making a POST request to the Messenger Profile API with your Page's Access Token.

When a user interacts with the bot's Get Started Button or opens the webview from within the bot conversation (through a URL button or through a Persistent Menu button), this webview will be added to the drawer for use in other Messenger conversations your user has with other Messenger users.