In January 2012, I wrote about five ticketing systems for development teams. Recently, I did an implementation of UserVoice in an application, and it has changed the ticketing systems game.

In this post I explain how to implement UserVoice on your site or application, and what kinds of advantages the help desk and feedback system can give you. I’ll describe the two types of integrations I did with UserVoice.

Put a Feedback button on the application

The first integration was to put a Feedback button on the application. The button brings up a window that lets users ask for help or give suggestions. One neat feature is that as the user fills out the form, it suggests knowledge base articles that may address their problem. If the user makes a suggestion, it goes into an ideas hopper, which other users can use to vote ideas up or down. The name UserVoice really does mean “giving users a voice” in this aspect.

When I first tried the integration, one of our people got a snippet of code from the UserVoice system and gave it to me. This code got the widget up on the screen, but we were struggling to customize it. There were code samples on the UserVoice website, but they lacked context. I sent a support ticket in, and UserVoice really blew me away with their response. Not only did they get me a great code sample, but they truly listened to me and they put that code sample into their documentation. Talk about customer support!

The basic script to add UserVoice looks like this:

<script type="text/javascript">var uvOptions = {};
  (function() {
    var uv = document.createElement('script'); uv.type =
'text/javascript'; uv.async = true;
    uv.src = ('https:' == document.location.protocol ? 'https://' :
'http://') + 'widget.uservoice.com/w3diA1ezF0B0ELXkHGzPSg.js';
    var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(uv, s);
  })();
</script>

Once you do this, you will have a Feedback widget on your site, and the code samples in the documentation will allow you to further customize it.

Create a “gadget” for the tickets

The other integration was to create a “gadget” for the tickets, so that when our support staff viewed them, they could see a snapshot of the user directly in UserVoice. This has been a huge help for the support team, since many of the common questions can be resolved by looking at this profile, and we can suggest things that they may want to change in their settings. This is considered a “one-off” gadget in the UserVoice Developer documentation.

This is a bit tricky to understand. The way it works is that you give it a URL to call on your site or in your application. You can add URL parameters to this URL if you need to pass data to your app, but these parameters cannot grab data from UserVoice. But UserVoice will add additional parameters to the URL with the information from the ticket. The fields added are: email, user_id, name.

Because the email in the ticket is not always going to be the same as the email address the user has registered with, you can do an OAuth integration with UserVoice to do some data sharing. We chose not to do this for now and to look users up by email address. For safety’s sake, we are using a long, unique, randomly generated string of text that must be passed in for it to work. We added it as a parameter in the gadget configuration — this ensures that people can’t just figure out the URL to our page and bring up important information about our users.

This JavaScript will turn your web page into a gadget:

<script language = “JavaScript” src=”https://cdn.uservoice.com/packages/gadget.js”></script>

Also, you will want to import https://cdn.uservoice.com/packages/gadget.css into your CSS to have your page styled properly.

If your gadget has no results or data to display, use this JavaScript to have the gadget container hide your gadget:

<script type="text/javascript">
  window.gadgetNoData = true;
</script>

With these elements in place, we set up our page to retrieve and display the users’ data.

The results

We could not be more pleased with the results. Our support staff have current, up-to-date information about users when they view tickets. They can even perform basic user management tasks from the gadget. Our users have a much smoother experience and, instead of trying to find the support email address to send a message, they have a simple system to provide feedback. Within several days, we had dozens of quality suggestions and a public, open, and transparent forum to discuss them and let users know how we will address them.

In only a couple of weeks, UserVoice has proved to be an incredibly powerful tool. Give UserVoice a try.

J.Ja

Keep your engineering skills up to date by signing up for TechRepublic’s free Software Engineer newsletter, delivered each Tuesday.