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.
Java
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'});
</script>
Don’t forget to include jQuery!!
HTML
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.
Demo
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