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.
- Do not exceed the 5 MB limit. Large files slow down chatbot loading.
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 and opens on load — details and more use cases in Chatbot placement and Bubbles and prompts.