Retinafy Your Olark Attention Grabber Image

DocRaptor added Olark as a means of support a couple months back and it has been really great for talking to our new customers and existing customers. With the onset of mass availability of retina devices, we also went through our entire site and upgraded all our assets to look good on the devices of today. If you’re interested how to do that, check out Thomas Fuch’s Retinafy book. Unfortunately one thing that didn’t look that great was the Olark attention grabber (the little DocRaptor icon you see in the lower right of your screen, unless you closed it).

So if you’re in the same boat as us and want your customer support to look as good as the rest of your site, here are the steps you might take. Let’s start with an image. Let’s say I have a 100px x 127px version of that uploaded to Olark and my attention grabber settings are set correctly. By default I will get something that looks like this:

small alien image

You can immediately the aliasing difference between the alien image vs. the text and chatbox element. We want to fix that. The relevant details of this are explained a little more on this page about attention grabber customization. We have to combine that with a little custom CSS to override the default background styles. Note this will also allow you to set different images for when you are available for chat and not.

// some olark stuff ^^
var retina_image_path = "/app/assets/green_alien@2x.png"
olark.configure('CalloutBubble.bubble_image_url', retina_image_path);
olark.configure('CalloutBubble.offline_bubble_image_url', retina_image_path);
olark.configure('CalloutBubble.bubble_width', 100);
olark.configure('CalloutBubble.bubble_height', 127);
// maybe some other olark stuff
#olark-callout-bubble, #olark-callout-bubble-offline {
  background-size: 100px 127px !important;

In the end, we get something that looks much nicer:
small alien image

Caveats: This will not work on older browsers (IE8 and below, for example) due to no support for background-size.