tawk.to doesn't document a way to replace its chat bubble's icon with your own image. In Administration > Chat Widget > Widget Appearance you can change the widget's shape, size, colors and position, and add an Attention Grabber image next to the bubble. For your own icon, hide tawk.to's widget and open the chat from your own button with the tawk.to JavaScript API, or add a launcher layer that does that for you.
Option 1: change what tawk.to's settings allow
- Log in to tawk.to and select your property.
- Go to Administration > Chat Widget > Widget Appearance and click Advanced.
- For desktop, set the widget Shape (circular or rectangular), its Size (including the minimized size and corner radius) and its Position on the page.
- For mobile, pick the mobile widget type and position separately.
- Under the color settings, change the header, message and text colors to match your brand.
- Turn on the Attention Grabber and pick an image from the Gallery or upload your own artwork. It appears next to the chat bubble, not in place of it.
- Save your changes.
- Good for: matching your colors and corner, free, with no code.
- Limits: the bubble's icon stays tawk.to's, and nothing on it animates. Your own picture can only go in the Attention Grabber beside it.
Option 2: hide tawk.to's widget and use your own button
tawk.to's JavaScript API lets you hide its widget and open the chat from any element on your page, so your button can look like anything. You build and maintain that button yourself.
- Keep tawk.to's code (embed.tawk.to) on your page.
- Once the widget has loaded (
Tawk_API.onLoad), callTawk_API.hideWidget(). - When your button is clicked, call
Tawk_API.showWidget()and thenTawk_API.maximize(). - When the visitor closes the chat (
Tawk_API.onChatMinimized), callTawk_API.hideWidget()again, so tawk.to's bubble doesn't come back.
tawk.to's customStyle setting currently only changes the widget's stacking order (zIndex), not its look, so the styling of your button is all yours, including on phones.
Option 3: an animated character as the button
tawk.to has no animated launcher. A launcher layer such as Chatmello does option 2 for you: it hides tawk.to's widget, shows a character in your brand colors (or your own picture), opens the tawk.to chat when it's clicked, and counts your team's replies that arrive while the chat is closed. Its greeting bubble covers what the Attention Grabber did, with your own message.
Which option should you pick?
| Option | Cost | Code | Your own icon | Animated | Best for |
|---|---|---|---|---|---|
| tawk.to's Widget Appearance | Free | None | Only in the Attention Grabber beside it | No | Matching your colors and corner quickly |
| Your own button | Free | Yes | Yes | If you build it | Developers who want full control |
| Chatmello character | Free plan for one website | 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 tawk.to chat bubble?
tawk.to's docs describe uploading your own artwork only for the Attention Grabber, which sits next to the bubble. For a different button, hide the widget and use your own, or use a launcher layer like Chatmello.
Can I make the tawk.to chat bubble bigger?
Yes, on desktop: Widget Appearance > Advanced lets you set the widget's size, including its minimized width and height.
Can I move the tawk.to bubble to the left or the top?
Yes. The Position setting offers several places on the page, set separately for desktop and mobile.
Can I hide the tawk.to widget on some pages?
Yes, with Tawk_API.hideWidget() on those pages. Chatmello also has page rules: show the pet only on pages you list, or everywhere except some.
Do my tawk.to triggers and agents still work with my own button?
Yes. Hiding the widget only hides it; opening it shows the same chat with your agents, triggers and shortcuts.
Is tawk.to free?
Yes, tawk.to's live chat is free. Chatmello's free plan covers one website.
Sources
- tawk.to Help: changing the appearance of the chat widget, checked October 26, 2026
- tawk.to JavaScript API, checked October 26, 2026
Learn more
- Animated tawk.to chat button how Chatmello works with tawk.to
- Change your chat icon what each chat tool allows
- Free chat icons 50+ characters as PNG and SVG
