Tutorial on how to build a custom UI for problem reporting with SessionStack

This tutorial will show you how to build a custom UI on top of our JavaScript API so that you can use SessionStack as a problem reporting tool as shown in this demo.

The full source code for this example can be found in our repository.

You can read more details about the JavaScript API exposed by SessionStack in our documentation. For more details on how to configure your website for problem reporting, you can check out our previous blog post about it.

The UI

The only third party library we’re going to use is jQuery for simple DOM manipulation.

The first step is to build the sample UI that will be used by the user to start or stop recording problems:

<div class="sessionstack-controls">
   <img class="sessionstack-image-status">
   <button class="sessionstack-recording-button"> Record </button>
   <div class="sessionstack-logo-container">
         <img class="sessionstack-logo" src="img/logo.png">
   </div>
</div>

The result after applying the necessary styles that are in the repository:

The code

The UI has two states:

1. Idle
2. Recording

We’re going to implement two utility functions that will manipulate the DOM to represent each state.

The first function is for the idle state:

function setIdleUI() {
    $('.sessionstack-recording-button').html('Record');
    $('.sessionstack-image-status').attr('src', 'img/idle.png');
}

which looks like the image shown above.

And respectively for the recording state:

function setRecordingUI() {
    $('.sessionstack-recording-button').html('Stop');
    $('.sessionstack-image-status').attr('src', 'img/recording.png');
}

which looks like this:

First, we need to determine what is the initial state when the DOM loads. If a user has started recording a session but has refreshed the page or has navigated to another, SessionStack still records the same session, so we need to set our UI for the appropriate state as follows:

$(document).ready(function() {
    var isRecording = false;
     sessionstack('isRecording', function(result) {
        isRecording = result;
        if(isRecording) {
            setRecordingUI();
        } else {
            setIdleUI();
        }
     });
// More code...
});
$('.sessionstack-recording-button').click(function() {
    if (isRecording) {
        sessionstack('stopRecording');
        setIdleUI();
    } else {
        sessionstack('startRecording');
        setRecordingUI();
    }
    isRecording = !isRecording;
});

When a user clicks the button, we’re checking whether a session is currently being recorded. Based on this information we’re invoking either the ‘startRecording’ or the ‘stopRecording’ command and setting the appropriate state of the UI. At the end, we update the ‘isRecording’ variable so that it keeps the current state.

Similar to what we’ve implemented here can be seen in our demo as mentioned in the beginning of the article.

Note that this is just a sample UI. You can build anything that fits your needs. For example, you can add an additional text field that the user can fill for additional info about the problem. Of course, this code will help you get started no matter what UI you are going to build.