Customizing Your AI Chatbot Widget: Branding That Matches Your Site

A chat widget is a guest on your website. When it shows up in someone else's colors, with someone else's default greeting, visitors read it as third-party software bolted onto your product — and they trust its answers a little less. The same RAG pipeline behind a widget that matches your brand simply performs better.

This guide walks through every customization AskEmbed offers, from the basics available on every plan to the advanced options, and ends with the three settings most teams get wrong.

The basics (every plan)

All of these live in your dashboard under the bot's settings, and they take effect on reload — no redeploy, no code changes.

Theme color

One hex value drives the entire widget chrome: the launcher button, the chat header, the send button, and input focus rings all derive from it. The fastest win is to copy your brand's primary color straight from your design tokens.

Theme color: #6366f1   ← example (indigo)

A good rule: use the same color your primary call-to-action buttons use. The launcher competes with every other floating element on your site for attention; brand consistency makes it feel intentional rather than noisy.

Position

bottom-right or bottom-left. Most sites default to bottom-right because Western readers scan left-to-right and the corner is the last place their eye lands. Choose bottom-left if your site already parks something in the bottom-right corner — a cookie banner, a newsletter nudge, a support bubble from another tool. Two floating widgets stacked on top of each other is the single most common embedding mistake.

Welcome message

The first thing a visitor reads when the panel opens. Generic greetings waste this slot. Compare:

• ❌ "Hi! How can I help you today?"
• ✅ "Hi! Ask me anything about AskEmbed — setup, pricing, or how doc-trained chatbots work."

The second one teaches visitors what the bot actually knows, which steers them toward questions it can answer well. Keep it under a sentence or two; it renders as a chat bubble.

Input placeholder

The gray hint text inside the input box. This is your best prompt-engineering surface for visitors: an example question does more than any instruction. "e.g. How do I embed the widget?" invites copying — and copied questions are usually ones your docs answer.

Advanced customization (Business plan)

The Business tier unlocks the settings that make the widget fully yours:

• Custom header text — replaces the default "Ask me anything" in the panel header with your product or team name ("Ask Acme Support").
• Custom avatar — your logo rendered inside the launcher button instead of the default chat icon.
• Domain allowlist — the widget script only initializes on domains you list. Paste your embed snippet on a staging site or an old project, and it stays inert. This is also your defense against someone hotlinking your bot on an unrelated site.
• Watermark control — the "Powered by AskEmbed" badge can be hidden (on lower tiers it stays, which is how the free plan stays free).

Everything above is enforced server-side, not just hidden in the UI — a domain outside the allowlist is refused config, and watermark state is clamped by plan on every request.

The three settings most teams get wrong

1. A welcome message that over-promises. "Ask me anything!" sets expectations the retrieval layer may not meet — your bot only knows what's in your indexed content (here's how that works). Scope the greeting to what you actually trained it on.

2. Forgetting mobile. The widget renders as a full-screen chat sheet on phones. Brand color matters even more there, because the header is the only visible chrome — test your color choice against it, not just the desktop bubble.

3. Setting and forgetting. Widget copy is product copy. When your pricing changes or a feature ships, the welcome message and placeholder that reference the old world become subtly wrong. Put them on the same review checklist as your homepage headline. (The question log in your dashboard is the best source for what the placeholder should tease — measure what people actually ask.)

A five-minute checklist

1. Theme color = your primary CTA color.
2. Position = the corner nothing else occupies.
3. Welcome message = what the bot knows, in one sentence.
4. Placeholder = one example question your docs nail.
5. Business plan? Add header text, avatar, and the domain allowlist.

That's the whole surface. No CSS to override, no iframes to fight — the widget ships its styles inside an isolated Shadow DOM precisely so your page and the widget never corrupt each other.

Want to see the defaults in action before an account? Chat with the bot on this very site — it's AskEmbed all the way down, configured with the settings above.