A chat mascot is a character that stands in for the plain chat bubble in the corner of your site. You have three ways to get one: upload a still image as your chat tool's launcher icon (only some tools allow it), build your own animated button that opens the chat through the tool's JavaScript API, or add a launcher layer that does the animation and the wiring for you.
Why a mascot?
A character is easier to notice and feels friendlier than a generic icon, and it can carry your brand: your colors, your tone, even your logo. We don't have independent data on how much it changes chat rates, so measure it on your own site: compare chats opened per visit before and after.
Option 1: your chat tool's launcher icon
Some tools let you replace the launcher icon with your own image: Intercom (Advanced and Expert plans) and Freshchat. Zendesk, Crisp and LiveChat don't offer a launcher icon upload, and for Tidio, HubSpot and Tawk.to it isn't documented.
- Cost: included in those plans.
- Limit: it's a still image in the tool's usual button. No greeting, no movement.
Option 2: build your own animated button
Most chat tools let you hide their launcher and open the chat from your own element, for example Intercom('show'), zE('messenger','open'), tidioChatApi.open() or $crisp.push(["do","chat:open"]). Your button can be any animation: an SVG, a Lottie file or a video.
- Cost: design and developer time, plus upkeep when the chat tool changes.
- You handle: hiding the tool's launcher, mobile behavior, keyboard and screen-reader support, reduced-motion visitors, and what happens if the chat tool fails to load.
Option 3: a launcher layer
A launcher layer is a small script that sits on top of your chat tool and replaces only its button. Chatmello is one: you pick one of 50+ characters (or upload your own mascot), choose your colors, a personality and a greeting, and paste one line of code. It finds your chat tool on the page, opens it on click, shows unread messages, and steps aside if the chat tool fails.
Compare the options
| Option | Animated | Code | Works with | Best for |
|---|---|---|---|---|
| Chat tool's launcher icon | No | None | Only tools that allow it (e.g. Intercom on higher plans, Freshchat) | A still logo on the button |
| Your own animated button | Yes | Yes, and upkeep | Tools with an open/hide API | Teams with design and dev time |
| Launcher layer (Chatmello) | Yes | One script tag | 17 built-in chat tools, plus automatic detection | A friendly mascot without code |
Tips for a good chat mascot
- Keep it readable at the small size (around 64 px): simple shapes and strong contrast.
- Use your brand colors so it looks like part of your site, not an ad.
- Let it greet once per visit, not on every page, and give visitors a way to dismiss the greeting.
- Respect reduced-motion settings and make it a real, labelled button for keyboard and screen-reader users.
- Hide it on pages where it gets in the way, such as checkout.
FAQ
Can I use my own mascot instead of a stock character?
Yes. With your chat tool's icon setting (if it has one), your own button, or a launcher layer: Chatmello lets you upload a PNG, JPG, WebP or SVG.
Will an animated mascot annoy visitors?
It can if it's loud. Keep idle animation gentle, greet once per visit, and respect reduced-motion settings.
Does a chat mascot replace a chatbot?
No. The mascot is only the button. Your chat tool, its bots and your team still answer.
Is a mascot bad for page speed?
A well-built one is small: Chatmello's script is about 12 KB and loads after the page. Large video or Lottie files can be heavier, so check the size.
Can a mascot work with Intercom, Zendesk or Tidio?
Yes. All three let you hide their launcher and open the chat from your own element, and Chatmello has built-in integrations for all three.
Do I need a designer?
Not with a launcher layer's ready-made characters. For a custom mascot, any illustrator can make a simple, high-contrast image.
Learn more
- Browse Chatmello's characters and how to choose one
- How to customize your website's chat button 8 chat tools compared
- Supported chat tools
- How Chatmello handles data
