Crisp has no setting to change its chat button's icon. In Settings > Chatbox you can pick colors (custom colors on paid plans), the side of the page, position offsets and whether it shows on mobile. Crisp's own guide suggests the rest: hide its button and open the chatbox from your own, or add a launcher layer that does that for you.
Option 1: change what Crisp's settings allow
- In Crisp, open Settings > Chatbox.
- Under Appearance, pick one of the predefined color themes. On paid plans that include widget customization, set your own colors in Customization.
- Choose the right or left side of the page and fine-tune the position offsets.
- Under the behavior options, choose whether the chatbox shows on mobile.
- Edit the chatbox texts and welcome message in Text translations, per language if you like.
- Good for: brand colors and placement in minutes.
- Limits: the button's icon stays Crisp's, there's no animation, and custom colors need a paid plan.
Option 2: hide Crisp's button and use your own
Crisp's Web SDK can hide its chatbox and open it from any element, which is what Crisp's guide recommends for a custom button. You build and maintain the button yourself.
- Keep your Crisp code (client.crisp.chat with your website ID) on the page.
- Hide the chatbox:
$crisp.push(["do", "chat:hide"]). - When your button is clicked:
$crisp.push(["do", "chat:show"])and then$crisp.push(["do", "chat:open"]). - When the visitor closes it, hide it again:
$crisp.push(["on", "chat:closed", () => $crisp.push(["do", "chat:hide"])]). - For an unread badge on your button, read
$crisp.get("chat:unread:count")once Crisp has loaded.
Option 3: an animated character as the button
Crisp has no animated launcher. A launcher layer such as Chatmello does option 2 for you: it hides Crisp's button, shows a character in your brand colors (or your own picture), opens the Crisp chatbox when it's clicked and shows Crisp's unread count on the character.
Which option should you pick?
| Option | Plan | Code | Your own icon | Animated | Best for |
|---|---|---|---|---|---|
| Crisp's chatbox settings | Any (custom colors: paid) | None | No | No | Colors and placement |
| Your own button (Web SDK) | Any | Yes | Yes | If you build it | Developers who want full control |
| Chatmello character | Any Crisp plan; free Chatmello plan | One script tag | Yes (your picture or 50+ characters) | Yes | A friendly, animated button without code |
FAQ
Can I change the Crisp chat icon?
Not in Crisp's settings. Crisp's guide suggests hiding its button and using your own, which is also how Chatmello works.
Can I use custom colors on Crisp's free plan?
Crisp's docs say the free plan has predefined color themes; custom colors need a paid plan with widget customization.
Can I move the Crisp chatbox to the left?
Yes: choose the left side in Settings > Chatbox, and adjust the position offsets.
Can I hide Crisp on mobile?
Yes, with the chatbox's mobile visibility setting. Then it can't be opened on phones at all, so hide your own button there too.
Does hiding the button break Crisp's chatbots?
No. chat:hide only hides the chatbox; opening it shows the same conversation, bots and MagicReply.
Does Chatmello replace Crisp?
No. It only replaces the button. Conversations still happen in Crisp.
Sources
- Crisp Help: customize the chatbox, checked October 26, 2026
- Crisp Help: replace the default chatbox button with a custom one, checked October 26, 2026
- Crisp Web SDK: $crisp methods, checked October 26, 2026
Learn more
- Animated Crisp chat button how Chatmello works with Crisp
- Change your chat icon what each chat tool allows
- How to change the Tawk.to chat icon
