Put your own image on the chat button

Shipped

October 30, 2026

Area

Widget

Available on

Every plan

The chat button is the first thing a visitor sees of your chatbot. Until now you could pick its icon and colours, but it still looked like a generic chat bubble. If your business has a mascot, a friendly face on the front desk or a well-known logo, you couldn't put it there. Now you can upload your own image and it fills the whole button.

What's new

The Classic chat button has a new Launcher Image setting. Upload an image and it covers the round button on your website, in place of the icon.

• It fills the button. The image is cropped to a square and shown edge to edge inside the round button, which keeps its usual size.
• Transparent images stay transparent. Uploads are saved as PNG, so a mascot cut out from its background sits cleanly on the button's colour.
• The button still works the same way. While the chat is open, the button shows the usual close arrow on your button colour. When the visitor closes the chat, your image comes back.
• You see it before visitors do. The launcher preview in the builder shows your image straight away.

How to use it

1. Open your chatbot in Studio and go to the Design tab.
2. Pick Chat button, then open the Branding sub-tab.
3. Make sure Button Style is set to Classic (Icon Only).
4. Under Icon Appearance, click Launcher Image and choose a file.
5. Adjust the square crop in Crop Launcher Image and confirm.
6. Check the preview, click Save Draft, test it, and click Publish when you're happy.

To go back to an icon, click the small cross next to the image name (Clear launcher image) and publish again.

Good to know

• Classic button only. The Wide and Spotlight bar styles don't have a round button to fill, so the setting only appears for Classic (Icon Only).
• Square images work best. Whatever you upload is cropped to a square and scaled down to at most 256 × 256 pixels, which is plenty for a chat button and keeps it quick to load.
• The image replaces the icon, not the colour. The button's background colour still shows while the chat is open, so pick one that suits your image.
• A safe fallback. If the image ever fails to load on a visitor's browser, the button shows the icon you picked instead of an empty circle.
• Nothing changes until you publish. Like every design change, the image goes into your draft first.
• Website chat only. WhatsApp, Instagram DM and Messenger use their own apps' interfaces, so there's no chat button to change there.

For more ways to shape the button, see chat button position and the refreshed widget look.

For developers

The image URL is stored on the chatbot's styling as chatbotStyling.chatIcon.iconImageUrl and is returned by the public chatbot config endpoint. The embed script overlays it on the classic launcher with object-fit: cover. Chatbots without the field render exactly as before.