流沙网缘

Foreword

We came a long way since we started the public beta testing of Dubjoy, the video voice-over solution in the browser.

We’re targeting a pretty specific public: Language Service Providers, voice actors, voice talents, translators and interpreters. This is mostly a non-technical blend, that like most people, can’t help you efficiently debug, reproduce or describe problems as they occur.

We came a long way since then, with most of the problems being solved and the software approaching production quality fast.

But still, we were desperate for a way to better assist our customers, preferably in real-time.

There are many moving parts to a voice recording app in the browser. And moving parts always make for a fun array of problems customers encounter.

We have to be able to assist people while learning how to use the software for the first time. There can be workflow issues, microphone sensitivity and permission problems, Flash versions, etc.

Communication with your customers is key, and I can’t describe how overwhelmingly positive the reactions have been.

They love to see that you have their back at all times.

Required capabilities

So our ideal system would have the following capabilities:

• real-time feedback and help,
• log forwarding,
• error forwarding,
• diagnostic checks,
• recovery routines,
• reset routines,
• system information.

And we set out to find something out there that could help.

Olark

If you’re selling anything on the web and don’t use Olark you’re missing out.

They’re making a chat widget, that you integrate into your site. Once installed your website visitors appear as chat contacts in your IM program like Google Talk.

You can click on anyone and start talking them up, or wait that someone need help and clicks the “Chat with us” button.

So this tool by itself eliminates our first capability requirement: real-time feedback and help.

But 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.

Anatomy of our Olark integration

Olark has a nice feature that chat operators can issue commands.

A command is simply any word prefixed with an exclamation, like !debugon.

The “brain” of the integration is 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 current integration looks like this (you can list the current commands by issuing !dubjoy:

# !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()'"

We have a variety of commands for performing basic to advanced tasks to help the customer, run diagnostic tests and check system information.

If you prefer reading code to prose and to learn more, check out our Olark integration class.

Real-time feedback and help

It’s super useful to be able to help customers who are lost or just in the app for the first time.

One of our options is to just issue a !explainer command and this pops up a short video on the customer’s screen, showing her how to use the app.

Using Olark this way makes customers feel like you always have their back. And they appreciate this and in turn easily forgive you the early bugs.

Log forwarding and error reporting

We rely 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 is being logged, with various levels of specificity.

It doesn’t hurt to be instantly alerted whenever a breaking error occurs on the client side either. It instantly pops up a chat window to all of our engineers and the one that responds to it first, takes care of the customer.

Now imagine this scenario:

A customer is trying to voice-over a video in Dubjoy and 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 !debugon custom command implemented for the Olark API.

This starts to forward all of the logging data the customer is generating instead of in his console to your chat window. All in real-time.

This is beyond powerful, you can instantly see what the customer is doing or clicking and of course what the app itself is doing.

How do we do it?

We have some central logging routines that we use throughout the app.

This made it trivial to plug in some code, that also sends this through Olark. This isn’t done by default, but rather the current operator can turn this on or off as simple as issuing the !debugon command.

This is a snippet from the logging routine that integrates 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: args

A typical use case looks like this:

Diagnostic checks

It’s useful to have a single command that runs some basic diagnostic checks on the customer’s system.

We quickly check if the microphone permissions are set correctly, if the mic sensitivity is in order, Flash version, native MP4 support, video buffer status and more.

Here’s a whipped !diagnose command in action:

We also have detailed audio diagnosis commands like !audio that show the gain levels of the last recording the customer did. This way we can quickly see if the mic’s not getting any information through or the sensitivity is too low, etc.

Recovery and reset routines

It’s useful that if a customers’ session gets corrupted somehow we can trigger a reload on his end and choose whether we want to restore his 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’s useful for us to have a manual way of bringing up some relevant information.

By issuing !system we get a bunch of useful information about his browser and system.

By issuing !video we get crucial information about the video he’s currently working on.

Conclusion

We’re extremely happy with the way this turned out and so are our customers.

The extensibility of the Olark platform offers unlimited potential for customer support in any JavaScript client-side application.