Skip to content

Progressive Web App (PWA)

Bots can be exposed as a progressive web app, hosted on Botsquad, 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: Your bot for every purpose.
  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:
  home_buttons:
    - type: conversation
      title: Ask
      event:
        name: "menu:home"
      icon: question_answer
    - type: conversation
      title: Calendar
      g: calendar
      icon: event
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.