How to use SessionStack for problem reporting

Usually, when users encounter problems in web apps, they can report them by filling up forms, attaching screenshots or even making remote desktop sessions with the support team.

SessionStack can be used as a problem reporting tool. You can allow your users to record problems directly inside your web app. The recorder problems will be available to you in our platform where they can be replayed as videos.
The process consists of two steps.

1. You need to disable the automatic recording
2. Build some UI on top of our recording JavaScript API

Step 1

You need to disable automatic recording for your project. This can be configured in the settings of the project:

Now, when your web app is visited, SessionStack will not automatically record the user session.

Step 2

You need to use the API provided by SessionStack that allows you to manually start or stop recording the user session. You can read our documentation about the specifics of the API, but in general there are two commands:

1. startRecording: when called, SessionStack starts recording a new user session.
2. stopRecording: when called, SessionStack will stop recording the current session if it is being recorded.

Both of these commands need to be called through the globally exposed JavaScript object called “sessionstack”:

sessionstack('startRecording');

and

sessionstack('stopRecording');

You can read more about this global object in one of our previous blog posts here.

You need to implement some UI on top of this JavaScript API that will allow the user to interact with it in order to report a problem.

The UI can be as simple as a single button. When it is pressed, it calls the ‘startRecording’ command. When the user has finished recording the problem he presses the button again, which now calls ‘stopRecording’ command and the session will be available to you in our platform.

Check out our repository, that demonstrates how a sample UI can be built.

You can add more information to the session, for example, by adding some text field in which the user can add some information about the problem using our ‘log’ command as follows:

sessionstack('log', description);

The description variable holds textual information entered by the user.

Currently we do not provide an out of the box UI that you can directly use but this is something that we will consider if more people show interest in this functionality. You will just need to integrate SessionStack into your web app and you will be ready to go.