The first thing almost every business does after installing Aiva Chat's web widget is change how it looks. Not the knowledge, not the voice: the color.
It's the fastest edit available and, it turns out, the one that matters most for whether a widget feels like it belongs on a site or like a third-party tool someone dropped in. A visitor deciding whether to type a question into a chat bubble is also deciding, half-consciously, whether the bubble is really the business they meant to contact.
That instinct to rebrand first is correct. Custom branding on a web widget is how a business tells visitors the assistant speaks for it. Done carelessly, though, branding can make a widget harder to read or clash with the page behind it.
If you're about to open the Widget Builder for the first time, spend your effort on two settings, color and the welcome message, and check both on your real pages rather than the preview. The sections below explain why, and what else is worth touching.
What is custom branding on a web widget?
It's the set of controls that make the chat and voice widget on your website look and sound like your business rather than like the software vendor. On Aiva Chat, those controls live in Web Widget → Widget Builder, on the Design tab, with a live preview alongside.
The controls fall into four groups:
- Branding: header title, subtitle, avatar image, and the welcome message a visitor sees first.
- Colors: a quick preset, or your own header color and bubble button color.
- Layout: widget width, height, header height, and position (bottom left or bottom right).
- Appearance: input placeholder, font, light or dark theme, auto-open delay, and whether the "Powered by" line shows.
The widget itself goes on your site with one script tag, covered in the widget setup guide. Branding changes after that don't require touching the script again.
It's built for businesses without engineering teams: clinics, salons, coaching centers, and service providers. If matching their brand required a developer, most wouldn't do it, and the widget would keep looking like what it technically is instead of their own front desk, online. For an overview of what the widget does beyond looks, see the web widget platform page.
How widget branding works
Step 1: Open the Widget Builder and pick the assistant
Under Assistant that answers, choose which assistant the widget uses. Each assistant has its own script, so pick before you design.
Step 2: Set the brand color
Choose a quick preset or set the header color and bubble button color yourself. Of all the settings, this one changes how visitors see the widget the most.
Step 3: Write the header and welcome message
The header title and subtitle identify who the visitor is talking to. The welcome message is the assistant's first line when a chat opens, and it sets the tone for everything that follows.
Step 4: Add an avatar and choose a font and theme
Paste an image URL for the avatar, or leave it empty for the default icon. Pick a font and a light or dark theme to sit comfortably on your site.
Step 5: Preview on desktop and phone, then save
Switch the preview between pre-chat, chat, and voice screens, and between desktop and phone. When it looks right, click Save changes. The new look reaches your live site on the next page load.
Why branding the widget matters
Trust is visual before it's functional
People trust a storefront more when the signage matches the brand they expected. A widget in default styling reads as a plugged-in tool; the same widget in your colors, with your tone in the greeting, reads as part of the business. It's the same reason a checkout page that suddenly looks unfamiliar makes people hesitate.
The greeting sets the conversation's register
A clinic's greeting tends to be direct and reassuring. A salon's is warmer and more casual. A professional services firm's is terser. Businesses spend real time on this line because it's the first thing a visitor reads, and a good one tells them what to ask.
Consistency across the site
Because the widget appears on every page where the script is installed, its branding shows up everywhere from the homepage to the pricing page. Getting it right once carries across the whole site.
Changes don't need a release
Saved changes reach the live site on the next page load. A seasonal greeting, a refreshed brand color, or a new avatar takes minutes, with no developer and no redeploy.
The site can't break it
The widget runs in its own sealed-off container, so your site's CSS can't leak in and wreck its layout, and the widget can't change your site. Businesses get to make it theirs without accidentally making it worse. The engineering behind that is covered in our post on building an embeddable chat widget.
Our expectation when designing this: color and greeting are what nearly every business will want to change in the first week. Position, size, and avatar are more likely to be changed to solve a specific conflict than out of general preference. Design effort should go where businesses actually spend their time, and that shaped which controls we prioritized.
Widget branding use cases
Five made-up but common situations, each solved with settings rather than code:
The clinic that wants calm, not cute
Problem: A clinic's site is clean and clinical, and the default widget looks too playful. How it's handled: A preset close to the clinic's blue, a plain header title with the clinic's name, and a welcome message that says it can help book appointments or answer questions about services and timings. Outcome: The widget reads as the clinic's own front desk.
The site with a floating button already in the corner
Problem: A salon's site already has a floating booking button in the bottom right. How it's handled: The widget moves to the bottom left, and its width is reduced slightly so it doesn't crowd the content. Outcome: Both buttons coexist without overlapping on phones.
The detailed logo that turns into a smudge
Problem: A firm's full logo is unreadable at the small size the avatar renders at. How it's handled: A simple mark from the logo replaces the full version, checked in the phone preview at actual size. Outcome: The avatar is recognizable instead of a blur.
The dark homepage
Problem: A business's homepage has a dark hero section, and the light theme widget looks like a stray white box. How it's handled: The dark theme, with a bubble color tested against the hero image on the live site. Outcome: The widget fits the page instead of fighting it.
The bilingual site
Problem: A business serves Hindi and English speakers. How it's handled: The widget's own buttons and labels are set to Hindi, while the assistant still replies in whatever language each visitor writes in. Outcome: The interface matches the audience, and conversations follow the visitor.
Dashboard branding vs. a custom-coded chat widget
| Aiva Chat dashboard branding | Custom-coded chat widget | Unbranded default widget | |
|---|---|---|---|
| Who can change it | Anyone with dashboard access | A developer | Nobody needs to |
| Brand colors and greeting | Yes | Yes | No |
| Pixel-level design control | Limited to the settings offered | Full | None |
| Protection from site CSS | Built in | Depends on how it's built | Varies by vendor |
| Time to change | Minutes, live on next page load | A development cycle | None |
| Ongoing maintenance | None for branding | Yours | None |
A custom-coded widget wins on control. If your brand guidelines specify exact animations, unusual layouts, or a chat interface woven into the page itself, settings-based branding won't match that, and a developer-built interface may be worth the cost.
The unbranded default costs nothing but reads as a third-party tool, which works against the trust the widget needs to earn.
Dashboard branding sits in between. It covers the changes that matter most to visitors, color, greeting, avatar, and placement, without a development cycle, and keeps the widget safe from site styles. For most small businesses, that's the right trade. If the whole install still sounds like developer work, our guide on adding a web AI assistant without a developer walks through it.
How to set up a branded widget
Step 1: Gather your brand basics
Collect your primary brand color as a hex code, a simple version of your logo hosted at a URL, and the font your site uses.
Step 2: Write your welcome message
Draft one or two sentences in your business's voice that say who the visitor is talking to and what the assistant can help with.
Step 3: Design in the Widget Builder
Set colors, header, avatar, font, theme, and position. Decide whether to collect name, phone, or email in a pre-chat form, and add a consent message and privacy link if you do.
Step 4: Allow your websites and install
Add your domain under Allowed websites, including *.example.com for subdomains, then copy the script from the Install tab and paste it before the closing body tag.
Step 5: Test on the live site
Open your real pages on a laptop and a phone. Check the bubble against your hero images, dark sections, and any other floating buttons.
Step 6: Revisit after a week
Read a few widget conversations. If visitors open with questions the greeting could have pointed them to, adjust the welcome message.
Common widget branding mistakes
Choosing a color that fails contrast
A light brand yellow used behind white text looks on-brand in a swatch and unreadable in practice. The W3C's contrast guidance asks for a ratio of "at least 4.5:1" for normal text and 3:1 for large text. Check your combination before going live, and use a darker shade of the brand color if needed.
Using a full logo as the avatar
Detailed logos turn into smudges at avatar size. Use a simple mark and preview it at actual size on the phone view, not enlarged.
Judging only in the settings preview
The preview shows the widget on a neutral background. Your real site has images, dark sections, and other buttons. Always check on the live pages where visitors will see it.
A generic welcome message
"Hi, how can I help?" wastes the most-read line in the widget. Tell visitors what the assistant can actually do, such as booking, pricing, or hours, so their first question is one it can answer.
Auto-opening too aggressively
An auto-open delay of a second or two can feel pushy, especially on phones where the widget covers content. If you use auto-open, give visitors time to read the page first.
Widget branding best practices
- Start with color and greeting; they carry most of the trust signal.
- Test contrast against the WCAG standards before saving a light or pastel color.
- Use a simple avatar mark, previewed at real size.
- Match the theme to your page, dark widget on dark pages.
- Check every corner on mobile for clashes with other floating buttons.
- Set the widget's interface language to match your audience; replies follow each visitor anyway.
- Revisit the greeting after reading real conversations.
Conclusion
If you only change two things, change the color and the welcome message. Those decide whether a visitor treats the bubble as your business or as someone else's software, and both take minutes in plain settings.
The trap is branding that looks right in a swatch and fails on the page. A pale brand color behind white text, or a light widget floating over a dark hero, undoes the trust you were trying to build. The settings preview won't show you that; your live site on a phone will.
So the order is: color, greeting, a look at the real pages on a phone, and only then the finer controls.
Ready to make the widget yours?
Have your brand hex code and a simple logo mark ready, and you can have a branded widget on your site in one sitting: design it in the Widget Builder, add your domain, paste the snippet before the closing body tag.
The Widget Builder and every design control come with every plan, including the $49 Starter. Chat replies use your own OpenAI key, so AI usage is billed by OpenAI rather than marked up by us. Starting from nothing? Read how the widget fits into a full web AI assistant setup.
Open the Widget Builder on a 14-day trial, no card required, or book a demo and we'll style it with you.
Posts from the people building Aiva Chat in Rajkot — how the product works, what we have learned building it, and guides for getting the most out of an AI receptionist.