Webviews allow you to offer experiences and features that require a more complex user interface that might be difficult to create in-conversation, such as picking seats to book, or browsing available dates.

Built-in Templates

Normally you are required to set up a separate service to host a Webview. To make it easier to take advantage of Webviews, Flow.ai provides pre-built webview templates straight from code actions.

Using cloud actions you can configure, customize and add dynamic data to any webview.

Getting started

A webview is created using the webviews library inside a code action.

async payload => {

  // Create a new Article webview
  const url = await webview.article.create({
    ref: 'news-item',
    title: 'Hello world',
    content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.`
  })

  // After generating a webview you receive a URL
  // that can be used with any button or within a simple text message
  const buttons = new Buttons('Hello world article')
  buttons.addButton(new Button({
    label: 'Read article',
    type: 'webview',
    value: url
  }))

  const message = new Message(`Read my article at ${url}`)
  message.addResponse(buttons)

  return message
}

Customize

Templates allow customization using a tint property.

const url = await webview.radioSelect.create({
    ...
    tint: '#50E3C2',
    ...
  })

Templates

The following overview displays all the available templates.

webview.article

The webview.article template displays a long-read article. Read Reference.

webview.dataPicker

The webview.dataPicker template helps to select a date.

Read Reference.

webview.radioSelect

The webview.radioSelect template displays a list of items a user can select from. If the list becomes long you can optionally provide a search bar.

Read Reference.

webview.multipleSelect

The webview.multipleSelect template looks like the radio select, but allows multiple items to be selected.

Read Reference.

webview.terms

The webview.terms template displays an article or webpage with a confirmation button.

Read Reference

Supported Channels

Webview is only fully supported with Facebook Messenger and Web Widget. Other messaging and voice channels, that do not allow the rendering of HTML, are not supported. The appearance of a webviews depends on the messaging app and device it is displayed on: iOS, Android, or Desktop.

Languages

Most of the text inside the webview templates can be customized. The default labels and text are available in the following languages:

• English
• Dutch
• German
• French
• Spanish
• Portuguese
• Russian
• Turkish
• Swedish
• Greek
• Polish
• Norwegian
• Japanese
• Italian
• Danish
• Ukrainian

Context

Webviews are always created within the context of a thread ID and are static by nature. In other words, they are unique for a user and created once.

Whenever you would call create() again, it would create a new webview unless you provide a ref property during creation.

Troubleshooting

The window will not open or close in Messenger

Please make sure the allowed-listed domains within your Messenger configuration contains https://app.flow.ai. You can find the allowed-listed domains within the bottom of the Customize tab of the Messenger integration screen.

It does not work in WhatsApp or Telegram

At this time we only support Facebook Messenger and the web widget.