Widget Customization
You can customize the widget to blend in with your site's design. All settings are made in the Chat Widget section of the panel and can be seen instantly with a live preview.
Appearance Settings
- Primary color: Set the color of the widget header and button/message bubbles to match your brand.
- Title: The text shown at the top of the chat window (e.g. "Support", "How can I help?").
- Welcome message: The first message the assistant shows when the window opens.
- Position: Whether the floating button appears in the bottom-right or bottom-left corner.
Avatar
You can choose the avatar shown in the chat header:
- Default: The standard HaveAI icon.
- Your logo: Use your brand logo.
- Custom image: An avatar you upload yourself.
- No avatar: Hide it for a minimal look.
Use the live preview
Every change you make in the panel appears instantly in the preview beside it. Check how the widget will look on your site before going live.
Changes apply without editing code
You don't need to update the code on your site to change appearance settings. Just save the setting in the panel; the widget appears with its new look on the next open.
Best Practices
- Match the primary color to your site's accent color so the widget doesn't look foreign.
- Keep the welcome message inviting and clear ("Type your question, I'll help right away").
- Choose a position that doesn't cover other elements (e.g. a "back to top" button).
Related Topics
Was this page helpful?