Progressive Web App (PWA)

Bots can be exposed as a progressive web app, hosted on DialoX, either on a .bsqd.me subdomain, or on a custom top-level domain of your choosing.

Hosting on a TLD is currently part of our enterprise package.

Configuration

After connecting the PWA channel, the chat widget shows in the basic, "full screen" mode, for instance like this:

This basic version is good for demonstration purposes and for fullscreen desktop experiences.

To have a more app-like experience, you need to add a pwa.yml file, like this:

appearance: app
manifest:
  theme_color: "#990000"

After publishing, the bot will render now like this:

This view is meant for mobile usage only. On desktop, a phone frame will be rendered around the chat window, to be able to demonstrate the mobile experience.

pwa.yml properties

The following is a full example of a PWA configuration.

manifest:
  theme_color: "#261b6a"
  background_color: "#AFCB00"
appearance: app
splash_screen:
  title: MyBot
  description: Please accept the terms.
  call_to_action: Start
  footer: |
    I have read and understood the <a href="https://www.mybot.com/nl/contact/chatbot-privacy">privacy-statement</a> of MyBot.
intro_screen:
  type: conversation
  title: Welcome to MyBot!
  g: intro
start_screen:
  title: "MyBot"
  description: Your bot for every purpose.
  home_buttons:
    - type: conversation
      title: Ask
      event:
        name: "menu:home"
      icon: question_answer
    - type: conversation
      title: Calendar
      g: calendar
      icon: event
  new_conversation_button: true
ua_tracking_id: "UA-123456789-1"

• The splash_screen config is a screen that gets loaded first and can be used to accept the Terms and Conditions of a bot.
• intro_screen, when defined, will be shown afterwards, which is supposed to be used to let the bot introduce itself before introducing the start screen. To get out of the intro conversation, use emit "pwa_intro_done".
• The start_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.

Overriding PWA UI labels

Some fields of the pwa YAML file can be made translatable using the $i18n YAML syntax:

start_screen:
  title:
    $i18n: true
    en: "My bot"
    nl: "Mijn bot"
    es: "Mi bot"
  description:
    $i18n: true
    en: "Answers all your questions"
    nl: "Beantwoord al uw vragen"
    es: "Contesta todas tus preguntas"
  new_conversation_button_label:
    $i18n: true
    en: "New conversation"
    nl: "Nieuwe conversatie"
    es: "Nueva conversación"

These UI labels will adapt to the user's language, based on his web browser language and the language preference of his most recent conversation with the bot.