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 FAB (Floating Action Button)

​
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/disbable 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 here.

​
Style and appearance

To style your bot using the built-in Webchat styler:
  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 styler:
AppearanceAppearance
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.

​
Positioning the Webchat on the Left

By default, the Webchat FAB (Floating Action Button) 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: 
.bpFab {
  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 20px from the left edge of the viewport. You can adjust the 20px value as needed.