Implementation & How-To· 5 min read

Name, Colour and Avatar: Making the Assistant Look Like Your Business

How to customise a chat widget so it fits your site: choosing a name, avatar, brand colour and welcome message, and when removing branding matters.


You can usually spot a chat widget that was switched on and never touched. The website is navy and cream with a careful serif font, and in the corner sits a bright default-blue bubble with a cartoon robot and the words "Hi! How can I help you today?" It looks like a sticker someone put on a shop window.

Visitors notice, even if they could not tell you why. A widget that does not match the site reads as a third-party add-on, and people are warier of typing their details into something that feels bolted on. When you customise the chat widget properly, it looks like part of the business, and that makes the first message easier to trust.

None of this takes long. It does take a few deliberate choices.

The colour: copy your buttons, not your logo

The instinct is to use the logo colour. That is often the wrong choice, because logos use colours chosen for print and brand recognition, and they can clash badly with a web page or fail on contrast.

Use the colour your website already uses for its main buttons, the "Get a quote" or "Book now" button. Your designer chose it to be visible against your background and to signal that something is clickable. The widget should inherit that meaning.

To find it, most website builders show the button colour in their theme settings as a hex code like #1F4E79. Copy that exactly. Then look at the widget on a phone in daylight. If the text on the chat button is hard to read, darken the colour slightly rather than choosing a new one. For more on making the widget usable for everyone, see building an accessible website assistant.

The name: honest beats clever

The assistant's name appears in the chat header and beside each reply. There are a few common approaches, each with a trade-off.

Naming style Example Works well for Watch out for
Business name plus role Harbour Dental Assistant Clinics, professional firms, anything formal Can feel long in a small header
Plain role Enquiries Assistant Businesses with several brands or services A little impersonal
Friendly invented name Ava, from Harbour Dental Salons, hospitality, consumer brands Must be clear it is not a staff member
Pun or mascot name Sparky the Electrician Bot Playful brands only Wears thin fast, and grates on upset customers
A real staff member's name "Sarah" when Sarah works reception Nothing Misleads visitors and confuses staff

The last row is the one to avoid. Using a real person's name invites visitors to ask for her on the phone, and they will feel deceived when they learn it was never her.

Whatever you choose, the welcome message should make clear the visitor is talking to an assistant. There is a longer discussion in telling customers the receptionist is AI, and our post on choosing an assistant name and persona goes further into personality and tone.

The avatar: small, simple, yours

The avatar sits in a small circle, often not much bigger than a fingernail on a phone screen. Detail disappears at that size.

Check the avatar against both light and dark page backgrounds if your site has sections of each. A dark logo on a transparent background can vanish.

The words that come before any question

Two text settings do more than any colour: the welcome message and the suggested prompts.

The welcome message should say who the visitor is talking to and what it can help with, in your normal tone. "Hi, I'm the Harbour Dental assistant. I can help with appointments, prices and what to expect at your first visit." That is more useful than "How can I help?", because it tells visitors what is worth asking.

Suggested prompts are the clickable questions shown before a visitor types. Choose the questions people actually ask most, phrased as they would type them. For a garage that might be "How much is an MOT?" and "Can I wait while you do it?". Two to four is plenty. Change them for seasonal businesses when the common questions change.

When removing the branding matters

By default, the widget shows a small "Powered by SpideyChat" line. Removing it is available on Pro and above. For plenty of businesses it simply does not matter, since visitors rarely notice it and it does not affect how the assistant works.

It matters more in a few situations:

If none of those apply, leave it and spend the money elsewhere. The pricing page has the plan comparison.

A ten-minute finishing pass

  1. Copy your main button colour's hex code into the widget colour setting.
  2. Choose a name from the table above and write a welcome message that says what the assistant helps with.
  3. Upload your logo mark or a simple icon as the avatar.
  4. Add two to four suggested prompts taken from real customer questions.
  5. Open your site on a phone and look at the widget next to your header and buttons. If it still looks like a sticker, adjust the colour or avatar until it does not.

Then ask a colleague who has not seen it to open the site and tell you what they think the chat is for. If they get it right from the header and welcome message alone, you are done. You can see how a finished widget looks on the demo page before changing your own.

Frequently asked questions

Can I give the assistant a human name?
You can, but be clear somewhere in the welcome message that visitors are talking to an assistant. A name like Ava is fine if the first message says she is the business's digital assistant rather than a member of staff.
Which plan lets me remove the Powered by SpideyChat branding?
Branding removal is available on Pro and above. Name, colour, avatar, welcome message and suggested prompts are separate settings and do not depend on removing the branding.
Should the chat button match my brand colour or stand out from it?
Match the colour your site already uses for buttons and calls to action. Visitors have learned that colour means clickable on your site, so the widget inherits that meaning.

Keep reading

Name, Colour and Avatar: Making the Assistant Look Like Your Business · SpideyChat