Make the chat widget look like part of your website. On the Appearance page you choose the accent colour, which corner the widget sits in, the launcher’s shape and bubble text, the panel size, and your logo. Changes show instantly in the preview on the right.
Accent colour#
The Accent color is your widget’s main brand colour. Pick one of seven presets, use the colour picker, or type a hex code such as #1e3a8a (the default).
Position and launcher#
- Position: Bottom right (default) or Bottom left. Pick the corner that doesn’t clash with other buttons on your site, such as a cookie banner.
- Launcher shape: Round (default) or Square.
- Launcher bubble text: a small speech bubble shown above the launcher, such as “Chat with us”, up to 100 characters.
Widget size#
Set how large the chat panel is when it opens on a desktop screen.
| Setting | Range | Default |
|---|---|---|
| Widget width | 300–560 px | 370 px |
| Widget height | 380–760 px | 560 px |
Visitors can also click Expand in the chat header to make the panel larger, and their browser remembers that choice. On phones the panel always fits within the screen, and the Expand button is hidden on small phones.
Logo#
Your logo appears in the chat header, fitted to a neat square, and is also used on the launcher. It’s optional; without one, the widget uses a default logo.
Click Upload image
Choose a PNG, JPG, WebP, GIF or SVG file up to 5 MB.
Check the preview
Uploading or removing a logo applies immediately; you don’t need to click Save changes for it.
Prefer to use an image that’s already online? Use …or link to an image and paste its web address. A linked image is saved together with the rest of the form when you click Save changes.
- File types
- PNG, JPG, WebP, GIF, SVG
- Max file size
- 5 MB
- Shown in
- Chat header and launcher
- If empty
- Default logo
The widget header and footer#
Header
The header shows your logo, your chatbot’s name and a short “replies instantly” note, along with buttons to end the chat, expand the panel and minimise it.
Footer
The footer always shows the disclaimer “AI responses can make mistakes — please verify important information.” and the Powered by Liyobot badge.
The widget is kept separate from your website’s own styles, so your site’s fonts and colours won’t change how it looks. Remember to click Save changes when you’re happy with the preview.