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: 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"
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.