Customizing Widget Appearance
Customize colors, avatars, and position of the WhisperBot widget to match your brand.
Updated: 29 May 2026
You can customize how your WhisperBot looks to match your brand identity.
Appearance Settings#
Navigate to WhisperBots and click on your bot to access these settings:
- Widget color: This is the main color of the widget, used in the header, messages, and other UI elements. Click the color circle to use a color picker or enter a hex code.
- Chatbot avatar image: Upload a custom logo to be used as the chatbot's avatar in the widget. The maximum file size is 2MB. If you don't upload an image, the widget will use the first letter of the chatbot's name.
- Chatbot name: This is the name displayed in the widget header (e.g., "Chatbot assistant").
Position Settings#
You can choose where the chat widget appears on both desktop and mobile viewports.
Desktop Position#
- Horizontal anchor: Choose where the widget is anchored (Left, Center, Right).
- Horizontal offset (px): The distance in pixels from the selected anchor edge. (Not used when the anchor is Center).
- z-index: Controls the CSS stack order. The default is very high (2147483647) to keep the widget on top. Lower it only if you need specific page elements to appear above the chat.
Mobile Position#
When the viewport width is at or below the mobile breakpoint, the widget uses these mobile-specific anchors and offsets. (It falls back to desktop values if left empty).
- Mobile breakpoint (px): Viewport width at or below which the mobile layout applies. Default is 640px.
- Mobile horizontal anchor: Where the chat launcher sits on small screens.
- Mobile horizontal offset (px): Distance from the edge on mobile.