Huge thank you to Miha for allowing us to share this article, which originally appeared on his website breakthebit.org. If you're an advanced Olark API user, you might want to skip straight to our full API section. If you're a new Olark API user, then you've come to the right place.
In my previous role, I was a co-founder and CTO at the company called Dubjoy, a video voice-over solution in the browser. We were targeting a pretty specific, non-technical public: voice actors, voice talents, translators, interpreters - customers like most people who can’t help you efficiently debug, reproduce or describe problems as they occur.
We knew that communication with these customers would be key. There are many moving parts to a voice recording app and moving parts always make for a fun array of problems customers encounter. We had to be able to assist people who were also learning how to use the software for the first time.
As we moved from public beta to something that resembled ‘production quality,’ we were desperate for a system that would enable us to assist our customers, preferably in real-time.
So we listed the capabilities our ideal system would have:
- real-time feedback and help
- log forwarding
- error forwarding
- diagnostic checks
- recovery routines
- reset routines
- system information
And then we set out to find something that could help.
Real-Time Feedback and Help
We found our solution in Olark. Once installed, visitors on our website were able to click the ‘Chat With Us’ tab to start asking questions, and our operators could use their preferred IM client to talk with these visitors. They could also see everyone that was on our site. Right away this tool by itself met our first capability requirement: real-time feedback and help.
Deeper Integration via Developer API
As we delved deeper into their developer API documentation, we discovered that you can easily extend the functionality of the chat widget by creating your own custom commands and binding to certain events, like when the conversation begins.
We found that Olark has a nice feature that enables chat operators to issue a command -- any word prefixed with an exclamation, like !debugon. The "brain" of the integration was a simple parser, that hooks up to the api.chat.onCommandFromOperator event.
A simple example of this, an implementation of the !explainer command:
olark 'api.chat.onCommandFromOperator', (event) ->
# !explainer
## Show the popup with the explainer video.
if event.command.name is 'explainer'
V.olark.send "[EXPLAINER] Showing popup"
V.overlay.help()So Dubjoy’s integration looked like this (FYI !dubjoy listed the current commands):
# !dubjoy
## Show Dubjoy help and commands.
if event.command.name is 'dubjoy'
V.olark.send "[HELP] Dubjoy Olark integration\n"
V.olark.send "!status - Status report (env, kombajn, video, frags, app)"
V.olark.send "!debugon [<level>] - Turn on log fwd at a level"
V.olark.send "!debugoff - Turn off log fwd"
V.olark.send "!reload [<restore>] - Force reload and restore state"
V.olark.send "!undo - Undo last step"
V.olark.send "!explainer - Show the explainer popup"
V.olark.send "!fragments - Output detailed fragments data"
V.olark.send "!fragmiss - Output fragments that are missing audio"
V.olark.send "!fragclear <fragment_id> - Clear audio data for fragment"
V.olark.send "!fragseek <fragment_id> - Seek to fragment"
V.olark.send "!diagnose - Run system checks"
V.olark.send "!system <details> - Show system information"
V.olark.send "!video - Show video information, such as YouTube ID, etc."
V.olark.send "!mic - Show if mic access is allowed"
V.olark.send "!audio - Show the average and latest audio levels"
V.olark.send "!audiotest - Send the audio test URL and instructions"
V.olark.send "!exec <command> - Execute command in V. namespace (e.g.: '!exec video.play()' would execute 'V.video.play()'"This gave us a variety of commands for performing basic to advanced tasks to help the customer, run diagnostic tests and check system information. For example, the an !explainer command popped up a short video on the customer’s screen, showing them how to use the app.
This proved super useful for helping customers who were in the app for the first time.
Log Forwarding and Error Reporting
We relied heavily on logging to know in-depth what’s going on in our application. Everything from events firing, video currentTime updating to audio encoding progress was being logged, with various levels of specificity.
We also programmed Olark to alert us instantly whenever a breaking error occurred on the client side. It would pop a chat window to all of our engineers, and the one that responds to it first would take care of the customer.
Imagine this scenario:
A customer trying to voice-over a video in Dubjoy gets stuck with the voice not recording. She finds the Olark widget and writes us "Help! My voice is not being recorded!" We reply "Just a second” and turn on log forwarding with a !debugoncustom command implemented for the Olark API. This starts to forward all of the logging data the customer is generating instead of in her console to our chat window. All in real-time.
That was beyond powerful! We could instantly see what the customer was doing or clicking and, of course, what the app itself was doing.
How Did We Do It?
We had some central logging routines that we used throughout the app. This made it trivial to plug in some code that also sends this through Olark. This wasn’t done by default, but rather so the current operator could turn this on or off as simple as issuing the !debugon command.
This is a snippet from the logging routine that integrated with Olark:
# Log to Olark
if V.olark
if output_routine is 'error'
# Log errors ALWAYS to Olark.
V.olark.log type: 'ERROR', text: msg, args: args
else if V.olark.debug and V.olark.debug is true
# Forward logs to Olark if debugging is turned on.
V.olark.log text: msg, args: argsA typical use case looks like this:
Diagnostic Checks
For this project, it was useful to have a single command that ran some basic diagnostic checks on the customer’s system. We quickly checked if the microphone permissions were set correctly, if the mic sensitivity was in order, Flash version, native MP4 support, video buffer status and more.
Here’s a whipped !diagnose command in action:
We also had detailed audio diagnosis commands like !audio that showed the gain levels of the last recording the customer did. That let us quickly see if the mic wasn’t getting any information through or the sensitivity was too low, etc.
Recovery and Reset Routines
It was also useful to monitor whether a customer's’ session was corrupted somehow. If it was, we could trigger a reload on their end and choose whether we wanted to restore their data or start with a clean slate.
System information
Olark by itself shows some customer’s system information, like browser version in the tooltip of your IM app. But it was also useful for us to have a manual way of bringing up some relevant information.
By issuing !system we got a bunch of useful information about their browser and system.
By issuing !video we got crucial information about the video they’re currently working on.
Conclusion
We were extremely happy with the way this turned out and so were our customers. They loved knowing that we had their back at all times.
The extensibility of the Olark platform offered unlimited potential for customer support in any JavaScript client-side application.
