Create GUI with Webviews

Sometimes a chat-like interaction isn’t right for a particular experience. Bots needn’t be purely conversational: you can provide moments of more app-like functionality via the webview. For example:
  • Display longer forms or lists of options.
  • Allow easy changes to information previously entered.
  • Present multi-select lists.
  • Create highly interactive moments—especially those requiring direct manipulation—like a map or seating chart.

Usage Guidelines

Use it for longer interactions (more than three steps) where people might want to edit their input or otherwise proceed in a non-linear fashion.

Use it for content that's especially visual.

Use it for user preferences, or to allow on-demand changes to previous selections.

Use it in combination with more conversational interactions.

Don't feel limited to collecting all form information at once. You can capture it piece by piece conversationally, then use a form in the webview for later edits.

Don't build an app inside a thread instead of a bot. Mix conversational and webview interactions, and keep any given interaction brief.

Example Scenarios

  • A ticket-search bot can display an interactive stadium seat map for choosing a seat.
  • A travel bot can provide travel preferences—aisle vs. window, inn vs. hotel, dietary needs—accessible from the persistent menu.
  • A dental-appointment bot can display an interactive calendar for choosing an appointment slot.
  • A news bot can provide a multi-select list of topics to subscribe to.
  • A commerce or brand bot can offer personal preferences to customize offers and free gifts. (See demo below.)

Recommended Design Flow

  1. People access your webview experience one of two ways: via a button if it's part of a larger conversational flow, or a menu item for ongoing access (e.g., preferences)—or both.
  2. Your experience appears as a layer over the thread—full screen, at 75% height, or at 50% height, depending on your content and use case.
  3. You may want to send content to the thread during or after the webview interaction.
  4. When they're done, people can close the webview and return to the thread—or you can close it yourself in response to actions they take (e.g., a Save button).