Overview of Webview Actions
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.
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.
webview.multipleSelect
The webview.multipleSelect
template looks like the radio select, but allows multiple items to be selected.
webview.terms
The webview.terms
template displays an article or webpage with a confirmation button.
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.
Updated 11 months ago