How to add an Attention Grabber

Add an Attention Grabber to your chat box to draw the visitor’s eye to your live chat service - using your own logo or photo.

You can turn on the feature for your account in your Attention Grabber extension settings.

There are two options, an Attention Grabber which shows when your chatbox is online, and one which shows when you are offline.

attention grabber

You can use our dashboard to upload your own image, or to choose one from our library. We often have holiday attention grabbers available!

Alternatively, you can use the Javascript API to show a different Attention Grabber image on individual pages, to increase visitor engagement wherever they are on your site.

Using the Javascript API

You can turn on the Attention Grabber for your entire account on in your Olark settings.

Alternatively, if you’d prefer to only show the Attention Grabber on certain pages, you can enable it using this Javascript API call. This code should go directly after the /* custom configuration goes here ( */ line in your Olark snippet.

olark.configure("features.attention_grabber", true);

Also, you can disable the attention grabber on a page by using this call:

olark.configure("features.attention_grabber", false);


You can then control various aspects of the Attention Grabber with different API calls. If your site loads both HTTP and HTTPS pages, we suggest not including the HTTP or HTTPS protocol in the path to the image. In other words, remove HTTP or HTTPS from the beginning.

  • olark.configure('CalloutBubble.bubble_image_url', 'xxx'); Replace xxx with the URL to the image you want to show when agents are available to chat.

  • olark.configure('CalloutBubble.offline_bubble_image_url', 'yyy'); Replace yyy with a URL to the image you want to show when agents are away.

  • olark.configure('CalloutBubble.bubble_width', 150); Configure the width of the Attention Grabber in pixels.

  • olark.configure('CalloutBubble.bubble_height', 50); Configure the height of the Attention Grabber in pixels.


In need of some inspiration for your own Attention Grabber? Here are some template you may want to use. We’ve also included the hex value for each template, so that you can match the color of your theme in the Design settings.

Use these as examples - we believe the more personal you make the Attention Grabber to your brand and your tastes, the more effective they will be.

Download the PSD files





Attention Grabber template




Attention Grabber template




Attention Grabber template




Haven’t tried Olark live chat yet? Sign up for a free trial ➔