Olark integration

Customize the Olark chat button with an animated character

Swap the plain Olark bubble for a character in your brand colors. Opens your Olark chatbox.

Can you change the Olark chat icon?

Partly. Olark lets you set primary and secondary colors, a light or dark theme, bottom right or left, and hide the chat box on mobile. Its docs suggest your own click-to-chat image instead of a custom launcher image, and animation isn't documented.

What Olark lets you change

  • Set primary and secondary colors, light or dark theme
  • Choose bottom right or left
  • Hide the chat box for mobile visitors
  • Start hidden and open from code (box.start_hidden and olark('api.box.expand'))

What it doesn't

  • Upload a custom launcher image (docs suggest your own click-to-chat image instead)
  • Animate the launcher (not documented)

Source: Olark: design settings, checked 2026-10-18. More tools compared in how to customize your website's chat button.

Add an animated character to Olark, step by step

  1. Create a free Chatmello account and enter your website address.
  2. Pick a character (or upload your own mascot), your brand colors, a personality and a greeting.
  3. Publish, then paste your snippet before </body> on every page, next to your Olark code. It looks like this:
    <script src="https://www.chatmello.com/chatmello.js" data-site="YOUR-SITE-ID" async></script>
  4. Open your website. Your pet finds Olark on the page by itself and takes over its button. The dashboard shows "Found Olark on your site".
  • Keep your Olark code (static.olark.com) on the page.

How the pet works with Olark

  • Chatmello hides the Olark chat box while the pet is showing and brings it back if the pet can't work.
  • Clicking the pet opens the Olark chat.
  • Chatmello counts your team's messages that arrive while the chat is closed and shows them on the pet.

What stays the same

  • Your Olark account, inbox, team and routing
  • Your bots, automations and office hours
  • The Olark chat window your visitors see
  • If Olark fails to load or open, the pet steps aside and the normal Olark button comes back

Performance and accessibility

  • The Chatmello script is about 12 KB (gzipped), loads after your page and downloads only the character you use.
  • No cookies, and it never records what visitors type.
  • The pet is a real button with a label, works with the keyboard, and keeps still for visitors who ask for reduced motion.

Troubleshooting

The Olark button still shows
Check that the Olark code loads on the same pages as Chatmello, then hard-refresh. If Olark takes more than about 15 seconds to start, the pet steps aside and leaves Olark's button.
The pet doesn't appear
Check the website address in your Chatmello settings and that your design is published.

What visitors get

  • A friendly character instead of a plain bubble
  • A greeting bubble with your message
  • The Olark chat opens when they click the pet
  • Unread messages shown on the pet while the chat is closed

Questions

Do I need a paid Olark plan?

No. Chatmello hides and opens Olark through its JavaScript API; Olark's own "hide the chatbox by default" setting is the one that needs a paid account.

Can I change the Olark launcher image without Chatmello?

Olark's docs suggest adding your own click-to-chat image rather than changing the launcher.

Do my Olark chatbox settings and agents still work?

Yes. Chatmello only replaces the button; everything inside Olark stays the same.

Will visitors see unread messages?

Yes. Chatmello counts messages from your team that arrive while the chat is closed.

Can I show the pet on some pages only?

Yes. In Chatmello's settings, show it only on pages you list, or everywhere except some.

Does it work on mobile?

Yes. If you hide Olark for mobile visitors, turn on "Hide on phones" in Chatmello too.

Will it slow down my website?

No. The script is about 12 KB, loads in the background, and only fetches the files your pet needs.

Is there a free plan?

Yes: one website, every character and every chat tool, free forever.

Give Olark a face

Free for one website. Pick a character, choose your colors, paste one line of code.

Create your pet free