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.

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 increasing 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 (www.olark.com/documentation) */ line in your Olark snippet.

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

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

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

This line should go immediately after your existing Olark embed code, where you see <!-- end olark code -->.

Snippets

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.

Templates

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

Preview Color Width Height
Attention Grabber template #dc0200 299px 105px
Attention Grabber template #3525d7 299px 161px
Attention Grabber template #ffca00 299px 82px