Create your pet
LiveChat integration

Customize the LiveChat chat button with an animated character

Swap the plain LiveChat bubble for a character in your brand colors. Opens your LiveChat window.

Try it with LiveChatInstall guides

Can you change the LiveChat chat icon?

Partly. LiveChat lets you pick a theme color, light or dark mode, a bar or bubble style, the corner and spacing, and separate mobile settings. A custom image can only go in the separate Eye-catcher (Team plan), which can be an animated GIF; the launcher itself can't use your own icon or animate.

What LiveChat lets you change

  • Choose a theme color, light or dark mode, bar or bubble
  • Choose left or right with spacing
  • Hide on mobile or set custom mobile options
  • Hide the minimized icon and open the chat from your own button (LiveChatWidget.call("maximize"))

What it doesn't

  • Use your own icon for the launcher itself
  • Animate the launcher (only the separate Eye-catcher image can be a GIF)

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

Add an animated character to LiveChat, 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 LiveChat 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 LiveChat on the page by itself and takes over its button. The dashboard shows "Found LiveChat on your site".
  • Keep your LiveChat code (cdn.livechatinc.com) on the page.

How the pet works with LiveChat

  • Chatmello hides the LiveChat widget while the pet is showing and brings it back if the pet can't work.
  • Clicking the pet opens the LiveChat window; when it's closed again, the pet is back in its corner.
  • Chatmello counts your team's messages that arrive while the chat is closed and shows them on the pet.

What stays the same

  • Your LiveChat account, inbox, team and routing
  • Your bots, automations and office hours
  • The LiveChat chat window your visitors see
  • If LiveChat fails to load or open, the pet steps aside and the normal LiveChat 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 LiveChat bubble or bar still shows
Check that the LiveChat code loads on the same pages as Chatmello, then hard-refresh. If LiveChat takes more than about 15 seconds to start, the pet steps aside.
I use an Eye-catcher
It belongs to LiveChat's own button, which is hidden. Chatmello's greeting bubble does the same job next to the pet.
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 LiveChat chat opens when they click the pet
  • Unread messages shown on the pet while the chat is closed

Questions

Do I need LiveChat's Team plan?

No. Chatmello works with any LiveChat plan; it uses LiveChat's JavaScript API.

Can I animate the LiveChat button without Chatmello?

Only indirectly: LiveChat's Eye-catcher image (Team plan) can be an animated GIF, but it sits next to the button and isn't the button.

Do ChatBot and my LiveChat routing still work?

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

Will visitors see unread messages?

Yes. Chatmello counts messages from your team that arrive while the chat is closed.

Does it work with LiveChat on Shopify or WordPress?

Yes. Add Chatmello's one line next to your LiveChat code; the install guides show where.

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

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

Create your pet free