How to customize the HubSpot chat button

In HubSpot you can change the chat widget's accent color and font, its side of the page, and when it appears (after scrolling, time on page, or by device type). HubSpot's 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. You can open the chat from your own button with the chat widget SDK, or add a launcher layer on top.

Option 1: change what HubSpot's settings allow

The chat widget's look lives in your chat channel's settings, and the welcome message lives in the chatflow.

1. In HubSpot, click the settings icon, then go to Inbox & Help Desk > Inboxes. With several inboxes, pick the right one in Current view.
2. Hover over your chat channel and click Edit.
3. On the Configure tab, set the accent color (your account's branding by default, a preset, a hex value or the color picker) and the font.
4. In the same settings, choose the widget's position and set triggers for when it appears: after scrolling, after time on the page, or by device type.
5. In your chatflow's editor, the Display tab sets the welcome message and the name and avatar shown in the chat heading.

• Good for: matching your brand color and font in a few minutes, with no code, on any HubSpot plan.
• Limits: the launcher stays HubSpot's chat icon. Only the chat heading's name and avatar are documented as customizable, not the button itself.

Option 2: open the chat from your own button

HubSpot's chat widget SDK lets your own button or link control the chat. It works on any plan, but HubSpot doesn't document a way to hide its own launcher at the same time.

1. Keep HubSpot's tracking code on your page; the chat comes with it.
2. When your button is clicked, call window.HubSpotConversations.widget.open() (and .close() to close it).
3. To open the chat as it loads, set loadImmediately: false in window.hsConversationsSettings and call widget.load({ widgetOpen: true }) when you want it.
4. To place the chat inside your page instead of the corner, set inlineEmbedSelector to an element such as #chat in hsConversationsSettings.
5. For an unread badge on your button, listen for the unreadConversationCountChanged event with window.HubSpotConversations.on(...).

Option 3: an animated character as the button

HubSpot has no animated launcher. A launcher layer such as Chatmello handles option 2 for you: it hides HubSpot's launcher only while the chat is closed, shows a character in your brand colors (or your own picture), opens the HubSpot chat when it's clicked, and shows HubSpot's unread count on the character.

Which option should you pick?

FAQ

Sources

• HubSpot: connect and customize a chat channel, checked October 26, 2026
• HubSpot developer docs: chat widget SDK, checked October 26, 2026

Learn more

• Animated HubSpot chat button how Chatmello works with HubSpot
• How to customize your website's chat button 8 chat tools compared
• How to change the Tidio chat icon