Customize Your Alee Widget: Color, Avatar & Welcome

Your Alee chat bubble is the first thing visitors see, so it should feel like your brand, not a generic plugin. The good news: every part of the widget's appearance is editable from the dashboard, and changes go live without you touching the embed code again. This guide walks through every appearance option Alee gives you — brand color, avatar, launcher icon, welcome message, position and theme — with the order that works best and a worked example at the end.

Where appearance settings live

Open your bot from the dashboard and look for the bot's settings, then the Appearance (or "Widget" / "Customize") area. This is separate from your knowledge sources and your bot persona — here you are only changing how the widget looks and greets people, not what it knows or how it answers.

Two things worth knowing before you start:

• Changes are live, not re-embedded. Your site loads the widget from one <script> line. When you save an appearance change, every page already running that script picks it up — no need to paste new code or ask a developer.
• Use the live preview. Alee shows a preview of the bubble and open chat panel as you edit. Tweak, glance at the preview, save. It is faster than hopping to your real site after every change.

Brand color

The brand color is the single highest-impact setting. It tints the launcher bubble, the header of the open chat, the send button, and the visitor's message bubbles, so one good value makes the whole widget feel on-brand.

1. Find the Brand color (or "Accent color" / "Primary color") field.
2. Enter your brand's hex code — for example #e11d2a — or use the color picker.
3. Watch the preview update the bubble and header, and save.

Tips for getting it right:

• Use your real brand hex. Grab it from your logo, website CSS, or brand kit so the widget matches your site exactly. Guessing "close enough" is what makes a chat widget look bolted-on.
• Mind contrast. The color sits behind white text in the header and send button. Very light colors (pale yellow, mint) can make text hard to read. If your brand color is light, that is a good reason to lean on the dark theme or pick a deeper shade of the same hue.
• One strong color beats many. Alee uses a single accent and derives the rest, so you do not need to set five colors. Pick the one people associate with you.

Avatar: mascot or custom image

The avatar is the face inside the chat header and next to the bot's replies. You have two routes:

• Use a custom avatar — upload your logo mark, a product icon, or a friendly face. Square images work best (think 256×256 or larger); the widget crops to a circle, so keep the important part centred. PNG with a transparent background looks cleanest.
• Keep the default mascot — Alee's friendly red pixel cat. It is approachable and works well if you do not have a square logo handy or want a softer, less corporate feel.

To set it, open the Avatar (or "Bot image") field, upload your file, and check the preview. Replace it any time — there is no penalty for iterating.

A quick note on which image is which: the avatar is the small round face inside the chat. The launcher icon is the bubble on the page before anyone opens the chat. They can be the same image or different — covered next.

Launcher icon

The launcher is the floating bubble in the corner of your site. By default it is a chat-bubble glyph in your brand color, but you can swap it for your own.

• Upload a launcher image to show your logo or mascot as the closed bubble. This is great for brand recall — visitors see your mark before they even click.
• Keep the default bubble if you want the universal "chat with us" signal, which some audiences recognise faster.

Practical guidance:

• Keep launcher art simple and high-contrast — it renders small (roughly 50–60px). Fine detail and thin text disappear at that size.
• A transparent PNG sits nicely on the colored bubble. A square or circular mark reads best.
• If you set both a custom avatar and a custom launcher, make sure they feel like the same brand even if they are not identical files.

Welcome message

The welcome message is the first line the bot "says" when someone opens the chat. A good one sets expectations and invites a question instead of leaving people staring at an empty box.

1. Open the Welcome message (or "Greeting") field.
2. Write one or two short, warm sentences.
3. Save and open the preview chat to read it back.

What makes a welcome message work:

• Say who you help and invite a question. "Hi! I'm the Alee assistant for [Your Brand]. Ask me about our plans, classes or timings." beats a bare "Hello".
• Keep it short. One or two sentences. People skim.
• Match your audience's language. If your visitors are in India and you greet customers in Hindi or Hinglish on your site, do the same here — a "Namaste! Kuch bhi pooch sakte hain" greeting can feel more natural than a stiff English line.

Pair the welcome message with suggested starter questions (set elsewhere in the bot's settings) so visitors can tap a question instead of typing. The greeting opens the door; the starters give people something to click.

Position: which corner

Alee lets you choose where the bubble sits — typically bottom-right (the default and what most users expect) or bottom-left.

• Stick with bottom-right unless something already lives there.
• Switch to bottom-left if a bottom-right element collides with the bubble — a "back to top" button, a cookie banner, a WhatsApp float, or your theme's own help icon. Moving Alee to the opposite corner avoids overlap and keeps both tappable on mobile.

Light or dark theme

The theme controls the chat panel's background and text. Pick the one that sits comfortably against your site.

• Light suits most sites and keeps text crisp on a white panel.
• Dark looks sharp on dark or image-heavy sites and is the safer choice when your brand color is pale — dark chrome with a light accent reads cleanly.

Choose based on your site, then double-check that your brand color still has enough contrast against the chosen background in the preview.

Remove the "Powered by" badge (white-label)

By default the widget shows a small "Powered by Alee" line. On paid plans you can turn the badge off so the widget is fully your brand — essential if you are an agency shipping bots for clients. See pricing for which plans include white-label removal, and the broader features list for what else the Agency and Scale tiers unlock.

A worked example

Say you run a fitness studio called FlexFit and want the widget to match your site:

1. Brand color — paste your logo's hex, e.g. #1f7a4d (your green).
2. Avatar — upload the FlexFit dumbbell mark as a 256×256 transparent PNG.
3. Launcher icon — reuse the same dumbbell mark so the closed bubble shows your brand.
4. Welcome message — "Hey! I'm FlexFit's assistant. Ask me about memberships, class timings or our trainers."
5. Position — keep bottom-right (nothing else is there).
6. Theme — light, since your site is white; the green accent has good contrast.
7. White-label — on a paid plan, switch off the "Powered by" badge.

Save, open the preview, and you have a widget that looks built for FlexFit — in about five minutes, no code.

For more walkthroughs like this, browse our tutorials and more guides.

Frequently asked questions

Do I need to re-paste the embed code after changing the look?

No. The widget loads from the single <script> line already on your site, so any appearance change you save in the dashboard appears automatically on every page running that script.

What image size should I use for the avatar and launcher?

Use a square image, ideally 256×256 or larger, as a transparent PNG. The avatar is cropped to a circle, so keep the key part centred, and keep the launcher art simple since it renders small.

Can I remove the "Powered by Alee" badge?

Yes, on paid plans. Turning off the badge gives you a fully white-labelled widget, which is what agencies use to ship bots under their own — or their clients' — brand.

Ready to make the widget yours? [Start free](/signup) with Alee and customise your chat bubble in minutes.