The chat widget presents a Botsquad bot as a regular chat widget on your website. Initially it shows as a small bubble, but when clicked a chat window pops out.
In the studio, the following aspects of the widget can be customized:
- main color
- widget button image
- widget size
- show conversations y/n
Nudges are small conversation starters: chat bubbles and UI elements that are triggered by conditions, like the visitor browsing to a certain web page:
It is possible to add a YML file called
widget to the bot. The
properties from this file will be used to render the texts on the
start screen of the widget.
home: image_url: "https://mybot.com/avatar.png" title: "Hello 👋" description: "Welcome to MyBot!" conversation_cta: "Talk to us" team_message: "We are ready for your questions" powered_by: text: "Powered by MyBot" url: "https://mybot.com/"
When configured like this, the home widget will look like the following:
powered_by.textcan all be made translateable using the
$i18nYAML syntax (see below)
Disabling certain input elements¶
It is possible to disable certain chat input elements by setting the
chat_config portion of the
widget YAML file:
chat_config: disabled_inputs: - location - image - text
Customizing the user interface labels¶
The chat user interface contains a few user interface labels that can be customized. These are for instance the text input placeholder label and several button labels.
By defining the
labels YAML file, it is possible to customize these
ui: # Placeholder text for the main text input text_input_placeholder: "Type message…" # The label on the button for forms and item pickers form_submit_button: "Send" # Text for any cancel button cancel: "Cancel" # The label on the button for the location picker location_picker_select: "Select location" # widget: text of the button to start a new conversation new_conversation: "New conversation" # widget: caption text of the conversations list conversations: "All conversations" # widget: caption text of the conversations list link show_all: "Show all"
Any of these labels can be internationalized using the
$i18n YAML syntax:
ui: text_input_placeholder: $i18n: true en: "Type message…" nl: "Typ een bericht…"
These interface 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.