HubSpot integration

Customize the HubSpot chat button with an animated character

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

Can you change the HubSpot chat icon?

Partly. HubSpot lets you set the chat widget's color, put it on the left or right, and choose what visitors see first. Its docs don't describe a custom launcher icon or animation, and there's no documented setting to hide only the launcher while keeping the chat.

What HubSpot lets you change

  • Set the widget color (from your branding, a preset or a hex value)
  • Choose left or right
  • Choose a welcome message preview or just the launcher
  • Open and close the chat from code (HubSpotConversations.widget.open())

What it doesn't

  • Use a custom launcher icon (not documented)
  • Animate the launcher or use a character
  • Hide only the launcher while keeping the chat (no documented option)

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

Add an animated character to HubSpot, 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 HubSpot 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 HubSpot on the page by itself and takes over its button. The dashboard shows "Found HubSpot on your site".
  • Keep your HubSpot tracking code (js.hs-scripts.com) on the page; the chat comes with it.

How the pet works with HubSpot

  • HubSpot's launcher and chat window share one container, so Chatmello hides that container while the chat is closed and shows it while it's open.
  • Clicking the pet opens the HubSpot chat.
  • HubSpot's unread count shows on the pet while the chat is closed.

What stays the same

  • Your HubSpot account, inbox, team and routing
  • Your bots, automations and office hours
  • The HubSpot chat window your visitors see
  • If HubSpot fails to load or open, the pet steps aside and the normal HubSpot 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 HubSpot launcher still shows
Check that the HubSpot code loads on the same pages as Chatmello and that chat is turned on for those pages in HubSpot, then hard-refresh.
The chat doesn't open from the pet
Make sure the page has a HubSpot chatflow targeting it. Without one, HubSpot doesn't load the chat, and the pet steps aside.
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 HubSpot chat opens when they click the pet
  • Unread messages shown on the pet while the chat is closed

Questions

Do I need a paid HubSpot plan?

No. Chatmello works with HubSpot's free live chat; it uses HubSpot's chat widget SDK.

Can I change the HubSpot chat icon without Chatmello?

HubSpot's docs describe color, position and the chat avatar, but not a custom launcher icon.

Do my chatflows and bots still work?

Yes. Chatmello only replaces the button; HubSpot's chatflows, bots and inbox stay as they are.

Will visitors' conversations still be linked to contacts?

Yes. Nothing about HubSpot's tracking or contact matching changes.

Will HubSpot's unread count still show?

Yes, on the pet while the chat is closed.

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

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

Create your pet free