Customizing Your Chat Widget (Branding)
Make your chatbot look like it belongs on your site.
Written by Outlearn Documentation
Updated at April 24th, 2026
Table of Contents
A customer opens the chat on your website. The widget is a different shade of blue than everything else on the page, and the name in the header is "AI Assistant." They close it. Not because the agent is bad - they never found out. The widget did not feel like part of your product.
Five minutes of branding changes that entirely. Your colors, your logo, your name in the header. A widget that looks like it was built by your team gets opened, trusted, and used. This article walks you through every branding option so your agent looks the part before your first real conversation.
In this article, you'll learn:
- How to access the widget branding settings
- What you can customize
- How to preview changes before saving
How to Access Branding Settings
- Go to the Deploy tab.
- Click Customize Widget on the Chat Widget card.
- You'll land on the Branding tab automatically.
What You Can Customize
Chat Title
The name displayed at the top of the chat widget - what users see when they open it.
Example: "Helpjuice Support", "Ask Us Anything", "Support Chat"
Logo
Upload your brand logo to appear inside the widget header. Accepted formats: JPG, PNG, SVG. Maximum size: 1MB.
Widget Position
Choose where the chat bubble appears on your website:
- Bottom Left
- Bottom Right (default)
Colors
Customize three color settings to match your brand:
| Setting | What it controls |
|---|---|
| Primary Color | Main accent color - used for buttons, highlights, and active elements inside the widget |
| Button Background | Background color of the floating chat bubble |
| Button Icon | Color of the icon inside the chat bubble |
Enter colors as hex codes (e.g., #1A2B3C).
Live Preview
As you make changes, the Preview panel on the right side of the screen updates in real time. You can see exactly how your widget will look to users before saving anything.
When you're happy with the result, click Apply Changes to save.
Best Practices
- Match the Primary Color to your main brand color - it's the most visible color in the widget and has the biggest impact on how on-brand it feels.
- Keep the Chat Title short - one to three words is enough. Long titles get cut off on smaller screens.
- Use the Preview panel to check how your colors look together before saving - some combinations that look fine in isolation can clash in the widget.
- If your logo has a transparent background, SVG format works best and scales cleanly at any size.