Create your pet
Tidio integration

Customize the Tidio chat button with an animated character

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

Try it with TidioInstall guides

Can you change the Tidio chat icon?

Partly. Tidio lets you change the widget's colors, choose bottom right or left (separately on desktop and mobile), pick a button size on mobile and choose where the widget shows. Replacing the launcher with your own image isn't documented, and there's no animated launcher.

What Tidio lets you change

  • Change colors (themes, a custom color, or tidioChatApi.setColorPalette)
  • Choose bottom right or left, separately for desktop and mobile
  • Pick one of three button sizes on mobile
  • Hide the widget and open it from your own button (tidioChatApi.hide() and tidioChatApi.open())

What it doesn't

  • Animate the launcher or use a character
  • Replace the launcher with your own image (not documented)

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

Add an animated character to Tidio, step by step

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

How the pet works with Tidio

  • Chatmello hides Tidio's button while the pet is showing and brings it back if the pet can't work.
  • Clicking the pet opens the Tidio chat. The chat opens above the corner, so the pet stays put and a second click closes it.
  • Tidio doesn't report an unread count, so Chatmello counts the team's messages that arrive while the chat is closed and shows them on the pet.

What stays the same

  • Your Tidio account, inbox, team and routing
  • Your bots, automations and office hours
  • The Tidio chat window your visitors see
  • If Tidio fails to load or open, the pet steps aside and the normal Tidio 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

Tidio's button still shows
Check that the Tidio code loads on the same pages as Chatmello, then hard-refresh. If Tidio takes more than about 15 seconds to start, the pet steps aside and leaves Tidio's button.
Lyro or a flow opens instead of a person
That's Tidio's own setup and doesn't change. Chatmello only opens the chat; your bots and flows run as usual.
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 Tidio chat opens when they click the pet
  • Unread messages shown on the pet while the chat is closed

Questions

Does Chatmello work on Tidio's free plan?

Yes. It uses Tidio's standard JavaScript API, which Chatmello can use on any Tidio plan.

Do Tidio's bots and Lyro still work?

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

Will visitors see unread messages?

Yes. Tidio has no unread count of its own, so Chatmello counts new messages from your team that arrive while the chat is closed.

Can I upload my own icon for the Tidio button without Chatmello?

Tidio's docs don't describe replacing the launcher with your own image. You can change its colors, position and mobile size.

Is it a Shopify app?

No. On Shopify you add Chatmello's one line of code to your theme, next to Tidio. The install guide shows where.

Can the pet close the Tidio chat?

Yes. The pet stays in the corner while the chat is open, and clicking it again closes the chat.

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

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

Create your pet free