Customize the Drift chat button with an animated character

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

Can you change the Drift chat icon?

Partly. Drift lets you set the widget's colors, align it left or right with spacing (separately on desktop and mobile), and hide it and open the chat from code or from any element with the drift-open-chat class. A custom launcher icon and animation aren't clearly documented.

What Drift lets you change

Set the background and foreground colors
Align left or right with spacing, separately on desktop and mobile
Hide the widget and open the chat from code (drift.api.widget.hide() and drift.api.openChat())
Open the chat from any element with the drift-open-chat class

What it doesn't

Use a custom launcher icon (unclear in the docs)
Animate the launcher (not documented)
Call the API before Drift's ready event

Source: Drift developer docs: widget configuration, checked 2026-10-18. More tools compared in how to customize your website's chat button.

Add an animated character to Drift, 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 Drift 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 Drift on the page by itself and takes over its button. The dashboard shows "Found Drift on your site".

Keep your Drift code (js.driftt.com) on the page.

How the pet works with Drift

Chatmello hides the Drift widget while the pet is showing and brings it back if the pet can't work.
Clicking the pet opens the Drift chat. Drift's chat window covers the corner, so the pet steps aside while it's open and comes back when it closes.
Drift doesn't report unread messages to Chatmello, so the pet shows no unread count.

What stays the same

Your Drift account, inbox, team and routing
Your bots, automations and office hours
The Drift chat window your visitors see
If Drift fails to load or open, the pet steps aside and the normal Drift 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 Drift button still shows: Check that the Drift code loads on the same pages as Chatmello, then hard-refresh. If Drift takes more than about 15 seconds to start, the pet steps aside and leaves Drift's button.
Drift's playbook opens instead of a person: That's your Drift setup and doesn't change. Chatmello only opens the chat.
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 Drift chat opens when they click the pet
Unread messages shown on the pet while the chat is closed

Questions

Do I need a particular Drift plan?

No. Chatmello uses Drift's standard JavaScript API.

Can I change the Drift button icon without Chatmello?

Drift's docs describe colors and position, but a custom launcher icon isn't clearly documented.

Do my Drift playbooks and routing still work?

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

Does the pet show unread messages for Drift?

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

Why does the pet disappear while the chat is open?

Drift's chat window covers the corner, so the pet steps aside until the chat closes.

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.

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 Drift a face

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

Create your pet free