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.
You can use our dashboard to upload your own image, or to choose one from our library. We often have holiday attention grabbers available!
You can turn on the Attention Grabber for your entire account on in your Olark settings.
This code should go directly after the
/* custom configuration goes here (www.olark.com/documentation) */ line in your Olark snippet.
Also, you can disable the attention grabber on a page by using this call:
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.
xxxwith 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 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.