Tips for chatbot appearance
A few practical recommendations that help you configure the chatbot so it fits visually into your website and works reliably.
1. Colors
- Use your brand's exact RGB values. Guessing colors in the picker leads to slight deviations. You can find your primary color's RGB values in your brand manual or extract them from your website with a tool such as ColorZilla.
- Try preset themes as a starting point. Then fine-tune the light or dark style with your own colors.
- Check text readability. Light foreground on a light background or dark on dark is hard to read. Always review the result in Playground.
2. Images
- Header logo: use an image with a transparent background. The logo appears in the colored top bar of the chat — an image with a white background will look awkward there.
- System avatar and logo bubble: images are displayed as a circular crop. Use a square image to avoid unwanted cropping.
- Stay within the file size limit — 512 KB for the system avatar, 1 MB for the header logo and logo bubble. Smaller files also load faster for visitors.
3. Placement
- Check for overlap with other elements. Cookie bars, fixed navigation, or buttons can overlap the chatbot or vice versa. Use Offset Y for spacing — see Chatbot placement.
- Test on mobile and desktop. Position and offset can behave differently on different devices.
- For a landing page, QR, kiosk, or dedicated help page, use Full page + Open chat automatically. The chat becomes the main page interface. To share a widget preview with a colleague (same as on the website), keep Widget and send the Playground link — details in Chatbot placement and Bubbles and prompts.