Customize the Chatra chat button with an animated character

Swap the plain Chatra bubble for a character in your brand colors. Opens your Chatra chat.

Can you change the Chatra chat icon?

Partly. Chatra lets you set the button's colors, choose its position, style (tab or round) and size, hide it on mobile, and replace it with your own element using its customWidgetButton option. A custom icon for its own button and animation aren't documented.

What Chatra lets you change

Set the button colors (ChatraSetup.colors)
Choose the position, tab or round style, and size
Hide on mobile (disabledOnMobile) or show only on mobile
Use your own element as the button (customWidgetButton) or open the chat from code (Chatra('openChat'))

What it doesn't

Use a custom icon on Chatra's own button (not documented)
Animate the button (not documented)

Source: Chatra: JavaScript API, checked 2026-10-18. More tools compared in how to customize your website's chat button.

Add an animated character to Chatra, step by step

Create a free Chatmello account and enter your website address.
Pick a character (or upload your own mascot), your brand colors, a personality and a greeting.
Publish, then paste your snippet before </body> on every page, next to your Chatra code. It looks like this:
```
<script src="https://www.chatmello.com/chatmello.js" data-site="YOUR-SITE-ID" async></script>
```
Open your website. Your pet finds Chatra on the page by itself and takes over its button. The dashboard shows "Found Chatra on your site".

Keep your Chatra code (call.chatra.io) on the page.

How the pet works with Chatra

Chatmello hides Chatra's button while the pet is showing and brings it back if the pet can't work.
Clicking the pet opens the Chatra chat; on phones Chatra opens it full screen.
Chatra doesn't report unread messages to Chatmello, so the pet shows no unread count.

What stays the same

Your Chatra account, inbox, team and routing
Your bots, automations and office hours
The Chatra chat window your visitors see
If Chatra fails to load or open, the pet steps aside and the normal Chatra button comes back

Performance and accessibility

The Chatmello script is about 12 KB (gzipped), loads after your page and downloads only the character you use.
No cookies, and it never records what visitors type.
The pet is a real button with a label, works with the keyboard, and keeps still for visitors who ask for reduced motion.

Troubleshooting

The Chatra button still shows: Check that the Chatra code loads on the same pages as Chatmello, then hard-refresh. If Chatra takes more than about 15 seconds to start, the pet steps aside and leaves Chatra's button.
I already use Chatra's customWidgetButton: Then Chatra's own button is already hidden. You can keep your button, or let the pet be the button instead.
The pet doesn't appear: Check the website address in your Chatmello settings and that your design is published.

What visitors get

A friendly character instead of a plain bubble
A greeting bubble with your message
The Chatra chat opens when they click the pet
Unread messages shown on the pet while the chat is closed

Questions

Does it work with Chatra's free plan?

Yes. Chatmello uses Chatra's standard JavaScript API.

Can I change the Chatra button without Chatmello?

Yes, by pointing customWidgetButton at your own element. Chatmello gives you an animated character for that element without code.

Do Chatra's bots and saved replies still work?

Yes. Chatmello only replaces the button; everything inside Chatra stays the same.

Does the pet show unread messages for Chatra?

No. Chatra doesn't report unread messages to Chatmello.

Can I show the pet on some pages only?

Yes. In Chatmello's settings, show it only on pages you list, or everywhere except some.

Does it work on mobile?

Yes. On phones, Chatra opens the chat full screen when the pet is clicked.

Will it slow down my website?

No. The script is about 12 KB, loads in the background, and only fetches the files your pet needs.

Is there a free plan?

Yes: one website, every character and every chat tool, free forever.

Give Chatra a face

Free for one website. Pick a character, choose your colors, paste one line of code.

Create your pet free