You will need:

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

​
Use the theme styler

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

You can view your changes in the Webchat preview on the right side of the screen.

​
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.