Tidio doesn't document a way to replace its chat button icon with your own image. In Settings > Live Chat > Appearance you can change the colors, the corner, the button label, the desktop button type and the mobile button size. For your own icon, hide Tidio's widget and open the chat from your own button with tidioChatApi, or add a launcher layer that does that for you.
Option 1: change what Tidio's settings allow
Everything below is in the Tidio panel under Settings > Live Chat > Appearance, with a live preview on the right.
- General: pick a background color (a theme or your own), an action color for the Home, Chat and Send buttons, and, with a custom background, the text color.
- Content > Minimalized: turn on a button label, a short message shown next to the chat icon while the widget is closed.
- Visibility and position: choose bottom right or bottom left (separately for desktop and mobile), the desktop button type (Corner, the round button, or Sidebar, a small labelled tab on the side) and one of three button sizes on mobile.
- Click Save at the bottom left of the Appearance section.
- Good for: matching your brand colors and corner in a few minutes, with no code.
- Limits: the icon itself stays Tidio's. The Brand Logo option (Plus plan) replaces Tidio's branding inside the widget; the docs don't say it changes the closed button.
- Also there: show or hide the widget per device, and hide it on chosen pages.
Option 2: hide Tidio's button and use your own
Tidio's JavaScript API lets you take its widget off the page and open the chat from any element, so your button can look like anything. It works on any plan, but you build and maintain the button yourself.
- Keep Tidio's code on your page.
- Once the chat has loaded (Tidio's
readyevent:tidioChatApi.on('ready', …)), calltidioChatApi.hide(). - When your button is clicked, call
tidioChatApi.show()and thentidioChatApi.open().hide()takes the whole widget off the page, so it has to be shown before it can open. - When the visitor closes the chat (the
closeevent), calltidioChatApi.hide()again, so Tidio's own button doesn't come back.
You also handle the details Tidio did for you: the button's look on phones, keyboard access, and any unread badge.
Option 3: an animated character as the button
Tidio has no animated launcher. A launcher layer such as Chatmello does option 2 for you: it hides Tidio's button, shows a character in your brand colors (or your own picture), opens the Tidio chat when it's clicked and hides Tidio's button again when the chat closes. Tidio doesn't report an unread count, so Chatmello counts your team's messages that arrive while the chat is closed and shows them on the pet.
Which option should you pick?
| Option | Plan | Code | Your own icon | Animated | Best for |
|---|---|---|---|---|---|
| Tidio's Appearance settings | Any (Brand Logo: Plus) | None | Not documented | No | Matching your colors and corner quickly |
| Your own button | Any | Yes | Yes | If you build it | Developers who want full control |
| Chatmello character | Any Tidio plan; free Chatmello plan | One script tag | Yes (your picture or 50+ characters) | Yes | A friendly, animated button without code |
FAQ
Can I upload my own icon for the Tidio chat button?
Tidio's docs don't describe it. The Brand Logo option (Plus) replaces Tidio's branding inside the widget. For your own image on the button, use your own button (option 2) or a launcher layer like Chatmello.
Can I make the Tidio chat button bigger?
On mobile, yes: Tidio offers three button sizes. The docs don't offer a size setting on desktop.
Can I move the Tidio button to the left?
Yes. In Visibility and position, pick bottom left, separately for desktop and mobile.
Can I hide the Tidio button on mobile?
Yes. The Display toggle in Visibility and position is set separately for desktop and mobile.
Do Tidio flows and Lyro still work with my own button?
Yes. Tidio's developer docs note that hiding the widget through tidioChatApi doesn't stop chatbots from triggering, and opening it shows the same chat.
Does Chatmello replace Tidio?
No. It only replaces the button. Conversations still happen in Tidio.
Sources
- Tidio Help: customize your chat widget, checked October 23, 2026
- Tidio Help: hide or disable Tidio on your website, checked October 23, 2026
- Tidio developer docs: widget methods, checked October 23, 2026
Learn more
- Animated Tidio chat button how Chatmello works with Tidio
- How to customize your website's chat button 8 chat tools compared
- Install guides
