Skip to content

Chat Widget

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.

Configuration

In the studio, the following aspects of the widget can be customized:

  • main color
  • widget button image
  • widget size
  • show conversations y/n

Nudges

Nudges are small conversation starters: chat bubbles and UI elements that are triggered by conditions, like the visitor browsing to a certain web page:

widget.yml properties

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:

The fields title, description, conversation_cta, team_message and powered_by.text can all be made translateable using the $i18n YAML 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 fixed labels.

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.