cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Overview of Webview Actions

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.

 

webviews_overview.png

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.

 

webviews_date_picker_tint1.png

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

Templates

The following overview displays all the available templates.

  Template Description
 

webviews_article3.png

webview.article Display a long-read article. Read Reference
 

webviews_date_picker4.png

webview.datePicker Helps to select a date. Read Reference

 

 

 

webviews_radio_select6.png

webview.radioSelect Display a list with items a user can select from. If the list becomes long you can optionally provide a search bar. Read Reference
 

webviews_radio_select6.png

webview.multipleSelect Like the radio select, but allows multiple items to be selected. Read Reference
 

webviews_terms7.png

webview.terms Display an article or webpage with a confirmation button. Read Reference

Supported Channels

Webview are 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.

Read more on Webview actions:

Labels (1)

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.

 

webviews_overview.png

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.

 

webviews_date_picker_tint1.png

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

Templates

The following overview displays all the available templates.

  Template Description
 

webviews_article3.png

webview.article Display a long-read article. Read Reference
 

webviews_date_picker4.png

webview.datePicker Helps to select a date. Read Reference

 

 

 

webviews_radio_select6.png

webview.radioSelect Display a list with items a user can select from. If the list becomes long you can optionally provide a search bar. Read Reference
 

webviews_radio_select6.png

webview.multipleSelect Like the radio select, but allows multiple items to be selected. Read Reference
 

webviews_terms7.png

webview.terms Display an article or webpage with a confirmation button. Read Reference

Supported Channels

Webview are 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.

Read more on Webview actions:

Labels (1)
Last Reviewed:
02-02-2022 11:54 AM

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.

 

webviews_overview.png

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.

 

webviews_date_picker_tint1.png

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

Templates

The following overview displays all the available templates.

  Template Description
 

webviews_article3.png

webview.article Display a long-read article. Read Reference
 

webviews_date_picker4.png

webview.datePicker Helps to select a date. Read Reference

 

 

 

webviews_radio_select6.png

webview.radioSelect Display a list with items a user can select from. If the list becomes long you can optionally provide a search bar. Read Reference
 

webviews_radio_select6.png

webview.multipleSelect Like the radio select, but allows multiple items to be selected. Read Reference
 

webviews_terms7.png

webview.terms Display an article or webpage with a confirmation button. Read Reference

Supported Channels

Webview are 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.

Read more on Webview actions:

Labels (1)
Version history
Last update:
‎06-17-2021 06:01 AM
Updated by:
Contributors