An Attention Grabber is an image that floats right above your chat widget for your visitors to see. You can add an Attention Grabber to your chat widget to draw the visitor’s eye to your live chat using your own logo or photo! You can turn on the Attention Grabber through the Settings section where you see the words Attention Grabber.

You’ll have two options: an Attention Grabber that displays when your chatbox is online, and one that shows when you are offline.


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 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




Important Note: Attention Grabbers cannot be displayed on mobile devices.