You will need:
  • A published bot
  • Familiarity with CSS (if you want to use custom styles)

​
General configuration

You can configure your bot in the Dashboard:
  1. Navigate to the Dashboard and open your bot’s Workspace.
  2. In the left navigation bar, find the bot you want to style and select Webchat.
Here’s a breakdown of each configuration section:

​
About your bot

This section lets you configure general information about your bot:
  • Your bot’s name (defaults to Bot)
  • Your bot’s avatar (defaults to the first letter of your bot’s name)
  • Your bot’s description (optional)
  • A placeholder for your bot’s composer (defaults to Type your message...)
  • A custom footer for your bot (requires a Plus plan)
  • A custom avatar for the Floating Action Button (FAB)

​
Contact

This section lets you configure optional contact information for your bot:
  • Email address
  • Phone number
  • Website
  • Terms of service
  • Privacy policy

​
Settings

This section lets you configure your bot’s settings:
  • Enable/disable message feedback. When enabled, you can view feedback data in the Analytics tab
  • Enable/disable user file upload
  • Choose between local storage and session storage

​
Session storage vs. Local storage

Session storage creates a new user and conversation each time the page is re-opened. Local storage keeps them for your next visits.You can learn more about local and session storage.

​
Style and appearance

To style your bot using the built-in Webchat theme editor:
  1. Navigate to the Dashboard and open your bot’s Workspace.
  2. In the left navigation bar, find the bot you want to style and select Webchat.
  3. Select the Theme tab to open the theme editor:
Appearance
The following styling options are available:
  • Theme (defaults to Light)
  • Accent colour (defaults to #3276EA). Choose a recommended colour, or use the colour picker to specify a hex code.
  • Header theme (defaults to Glass)
  • Message theme (defaults to Solid)
  • Radius (defaults to fully rounded)
  • Font (defaults to Inter). Use the search bar to choose any available Google Font.
You can view your changes in the Webchat preview on the right side of the screen. Whenever you want to update the bot’s configuration, select Save Configuration in the bottom-right corner.
Styles from this section won’t apply if:

​
Use custom styles

If you want to customize your bot’s appearance further, you can modify the built-in CSS classes:
Just add your styles to the Styles field.

​
Position Webchat on the Left

By default, the Webchat FAB and the chat window appear on the right side of the screen. You can move them to the left by overriding the default CSS. Add the following CSS to your website’s stylesheet: 
.bpFabWrapper {
  left: 20px !important;
  right: auto !important;
}

.bpWebchat {
  left: 20px !important;
  right: auto !important;
}
This will position both the FAB icon and the main Webchat window 20 pixels from the left edge of the viewport. You can adjust the 20px value as needed.