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.
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.
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"
splash_screenconfig 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
start_screenis 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
gparameter given, or into a specific conversation, when
gis set). Furthermore, each button has an optional
eventthat will be triggered when the button is clicked. The start screen can be programmatically shown again using
ua_tracking_idis 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
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.
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" description: $i18n: true en: "Answers all your questions" nl: "Beantwoord al uw vragen"
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.