Progressive Web App (PWA)

Apps can be exposed as a progressive web app (PWA), hosted by DialoX on a .bsqd.me subdomain.

Configuration

Enable the PWA via the Channels menu.

Then provide the subdomain under which the app will be hosted.

Design

The app appearance can be altered via the Design tab. After connecting the PWA channel, the chat widget shows in an app-like experience like this:

When running as a full page chat, the phone frame is replaced by the name and logo of the app, making it more useful to run in an iframe:

Besides the app appearance, the design allows other

• The Splash screen is a screen that gets loaded first and can be used to accept the Terms and Conditions of a bot.

• The Launcher screen is the launcher board for the PWA that can be used to trigger events in the conversation. It shows rows of buttons, where each button has a title and an icon, and links into the main conversation (if there is no g parameter given, or into a specific conversation, when g is set). Furthermore, each button has an optional event that will be triggered when the button is clicked. The start screen can be programmatically shown again using emit "pwa_menu".

• The ua_tracking_id is a Google Analytics UA code to hook up the PWA to your own Google Analytics account.

The icons used in the buttons are from the Material Design icon set.

Disabling certain input elements¶

It is possible to disable certain chat input elements by setting the chat_config portion of the pwa YAML file:

chat_config:
  disabled_inputs:
  - location
  - image
  - text

This chat_config element can also be placed inside a button definition of the start_screen.home_buttons item; this way, you can enable the chat input on one PWA chat screen but not on the other.