FB Messenger Web Views

On Messenger, webviews are pop-up html windows that are useful for displaying large amounts of information or allowing the user to select multiple preferences at once. A webview consists of standard HTML code and can be inside a custom block. The URL for the webview will have a reference to that state. Webviews can be accessed via a standard URL button inside the chat window.

Forming the Webview URL

The webview url to link out should look similar to:

'https://chatbot-{{ env }}.snapsmedia.io/web/components/{{ webviewStateId }}?webView=true&height=tall&extensions=true'
// env: current environment - can be determined by: bot.antares.isStaging ? 'staging' : 'production';
// webviewStateId: the state id where the webview HTML code is stored

The bot script will then need to be instantiated:

const bot = new Bot(`https://chatbot-{{ env }}.snapsmedia.io`);
// env: current environment - can be determined by: window.location.href.split('chatbot-')[1].split('.snapsmedia.io')[0];

Bot/Webview-Specific Functions

In your webview, you can write custom functions to support the component you are building by using an inline <script> tag. In addition, you can load the bot helper script via : <script src="https://chatbot-production.snapsmedia.io/js/bot.js"></script>. Here are some things you can do:

• pass data back to the bot (see below)
• take the user to a different state
• close the window
• get any passed in URL parameter by name

Passing Data

Webview windows can have data passed to them and can also pass data back (usually followed by window close). We can access all parameters passed in the original url with window.location.href.split('?') or by calling bot.getParameterByName(name).

In order to pass data back to another state in the bot, call bot.postback(data, postbackStateId). The postback data will be available on context.input in the receive function of that postback state.