Olark + WordPress Better Together

We rebuilt the Olark For WordPress plugin to support some of the new fun stuff that the Olark guys have been working on.

The old Olark Plugin hadn’t been updated in almost two years. We just had to jump in a show off all the sweet new features Olark has been working on. The real feature improvement is the new integration with Olark’s JS Api. This lets an Olark Operator know if a user is logged into WordPress and their relevant information. This should work in BuddyPress as well so it could be a huge step forward in your ability to support your clients or product with Olark on a WordPress installation.

A quick blurb on Olark

Olark provides clean integration with tools you already know and love so you can actually focus on selling and support. In fact, we’re the only live help tool around that was built from the ground up to work with a host of standard instant messengers. But did we skimp on the power? No!


  • In Plugin Olark Signup (v2.4.1)
  • One Click Chat Tab
  • WordPress user Information in Chat (Olark API)
  • Call Out Widget
  • Async Loader
  • **Planned Color/Customizing of the Chat Tab.

If you need support Write a comment below.

Get the latest code from WordPress Plugin Repo HERE

Olark – Spotlight Extension

So the sweetest live chat service Olark, got an API. This was my first attempt at using this API, though hopefully not my last. I have dreams of CRM integration in my head.

The goal of this was to allow a operator to highlight a DOM on the users browser in a simple fashion, nothing to fancy, just useable.

It is capable of not only flashing the selected DOM but also scrolling the users browers so he or she can see the flashing done. All of the animation is done with jQuery.

Setting up your site.

You must add Olarks new API code, this can be found here.


Add the olark.extend command for SpotLight and point it to the location of the olark-spotlight.js file

<script type='text/javascript'>

olark.extend('SpotLight', {source: '../lib/javascript/olark-spotlight.js'});


Don’t forget to include jQuery!!


Everything is based around a class “olark-spotlight” and the id of the respective DOM.

You can add the class to anything as long as it has a unique ID.

Like so

<li class = 'olark-spotlight' id= "bob" ></li>
<li class = 'olark-spotlight' id= "stone"></li>

Using Olark-Spotlight

The key command is !spot.

!spot – Provides a list of available elements that an operator can highlight.

!spot uniqueID – will scroll user to #uniqueID element and pulse the opacity of the #uniqueID element.


Sadly this is not something you can really demo. I haven’t taken the time to fake the operator’s command. But if you want a demo go to burningpony.com and ask for me to spotlight something.

Get the source here http://github.com/rposborne/olark-spotlight