Appearance & Theming

Match the chatbot to your brand with colors, themes, and custom styling

The UserBoost widget is designed to blend seamlessly with your website's design.

Theme Modes

The widget supports three theme modes:

Auto — follows the visitor's system preference (light/dark)
Light — always uses a light background
Dark — always uses a dark background

Set the theme in Config → Widget Settings → Theme.

Brand Colors

The Primary Color setting controls:

Chat bubble button color
Send button color
User message bubble color
Link colors in AI responses
Predefined question button borders
Contact form submit button

Use your brand's primary color for a cohesive look.

Custom Avatar

Set a custom avatar URL in Config → Widget Settings → Avatar URL to replace the default bot icon. Use a square image (recommended: 72×72px or larger).

Position

The widget can be positioned in the bottom-right or bottom-left corner of the page. Choose the position that doesn't conflict with other floating elements on your site.

Mobile

By default, the widget is visible on all devices. Check Hide on mobile devices if the chatbot isn't useful on mobile or conflicts with your mobile layout.

On mobile, the chat panel takes up most of the screen width for a comfortable typing experience.

Accessibility

The widget includes:

ARIA labels on all interactive elements
Keyboard navigation (Tab, Escape to close)
Focus trapping within the chat panel
prefers-reduced-motion support (animations disabled)
High contrast mode support