Branding your chat widget so visitors actually trust it

Why widget branding is the most under-rated UI on your site

A visitor lands on your site. Maybe they got there from an ad, maybe from a search result, maybe a friend mentioned you. The first three things they evaluate, in roughly this order:

1. Does this look like a real company?
2. Is the product what I expected from the link I clicked?
3. If I have a question, can I ask without it being a chore?

The chat widget is the answer to question three. And a widget that screams “third-party bolt-on” reads as a tell: this team didn't care enough to make support feel like part of the product. That impression carries into the question they were about to ask, and into whether they bother typing it at all.

Conversely, a widget that uses your accent colour, says your tone, and cites your privacy policy reads as “this is the same team that built the rest of the site.” Visitors talk to it more, and what they say is more useful.

The seven surfaces worth branding

1. Logo and bubble icon

The bubble in the corner is the entry point. Two options inside OpenAgent: upload a logo (PNG, JPG, WebP, SVG, up to 2 MB), or pick a single emoji (the default is 💬, but 👋 or 🤖 work for less formal brands).

If you have a brand mark that holds up at 32x32 pixels, use it. If you don't, emoji beats a generic chat-bubble icon every time, because emoji at least conveys personality.

2. Accent colour

One colour controls the bubble background, send button, and message accent stripes. Use your primary brand colour. The widget computes a darker shade for hover states automatically; you don't need to provide both.

Two tips that come up a lot:

• Don't use pure black or pure white. Pure black reads as “system UI”; pure white disappears against the chat panel. Pick the off-black or off-white from your design system.
• Test contrast at WCAG AA. The widget renders body text in white over the accent in some places; if your accent is pastel, the text gets hard to read. Aim for a contrast ratio above 4.5:1.

3. Header title and subtitle

Two short strings at the top of the chat panel. Defaults are “Chat with us” / “We typically reply in minutes,” which is fine but generic. Strong copy looks more like:

The shorter the better. Two lines is the budget; visitors don't read a header, they glance at it.

4. Agent identity

OpenAgent ships AI agents as named personas (Aria is the default). Names matter. “Aria from your team” reads warmer than “AI Assistant.” You can override the name and avatar per agent in Agents → Edit.

Two design rules that hold up:

• Give the AI a fixed name. Don't hide that it's an AI, but also don't call it “OpenAgent Bot.” Names humanise without deceiving.
• Match the avatar to the brand. A clean illustrated avatar is fine; the random Dicebear default is not.

5. Voice in the system prompt

This is the underrated one. The system prompt isn't just rules for the AI; it's the voice the AI ships in.

Default prompt: “You are a helpful customer support assistant. Answer using the context below.” Fine, generic.

Second-revision prompt:

You are Aria, our support agent. You speak like a senior teammate
who has done a thousand of these calls: warm but direct, never
performative. Bullet points are fine for steps; full sentences for
answers. Never apologise more than once per message. If you don't
know, say so and offer to bring a human in.

Five sentences. Massive difference in output quality. Iterate on the prompt the same way you'd iterate on a product copy doc.

6. Consent text and privacy URL

For workspaces with consent required enabled, the widget shows a consent overlay before the first message. Two fields to fill:

• Consent text: 1-2 sentences. Honest is better than comprehensive. “We use this chat to provide support and may store your messages. By continuing you agree to that.”
• Privacy URL: point to your privacy page. The widget renders a “Privacy policy” link below the consent buttons. We recently fixed a SEO issue where the link rendered with no href when the URL was empty. Now the link is removed from the DOM entirely if there's no URL configured. So if your consent text mentions a privacy policy, set the URL.

7. Bubble position

Bottom-right is the default and works for 95% of layouts. Switch to bottom-left only if you have a persistent UI element in the bottom-right (a CTA, a help button, etc.).

Don't put the widget anywhere other than bottom-right or bottom-left. Centre-bottom collides with mobile gesture areas. Top-anywhere feels like a notification and visitors miss it.

How it looks in OpenAgent

All seven surfaces live under Settings → Brand. The page renders a live preview that updates as you type:

Custom domain and white-label (Business tier)

On the Business tier you can serve the widget from your own subdomain (chat.yoursite.com) and remove the “Powered by OpenAgent” footer. The mechanics are a CNAME record pointing at our edge and a flag on the workspace; we'll set it up during onboarding.

For most teams this isn't necessary. The default install is already shadow-DOM-isolated from your site's CSS and the “Powered by” line is small enough that visitors don't notice it. White-label is mostly for agencies running the platform on behalf of clients.

Bottom line

Five minutes spent on brand on day one saves you the slow drift of “our chat widget feels like a different company’s product” six months later. Pick the accent colour, write the heading, give the AI a name, point to your privacy page. Ship.