Help Desk Example

In this example, we're going to build a very simple help desk contact form that allows users to easily attach a screen recording to their submission. This added functionality will let users to more easily show you their issue, and allow you to diagnose the problem much more quickly.

We'll learn how to build a custom record button, customize the recording experience, and access a recording's URL.

Getting started

Here's a very simple contact form:

<form>
  <h1>Help Desk Contact Form</h1>
  <label for="issue-description">Please enter a description of the issue:</label>
  <textarea id="issue-description"></textarea>
  <p>Please attach a screen recording of the issue.</p>
  <button class="button">Submit</button>
</form>

The first step is to insert your Hubcap embed code, which you can find in the Settings section of your Dashboard.

<script async src="https://recorder.hubcap.video/hubcap-recorder.js"></script>
<hubcap-recorder
  recorder-id="your-recorder-id-from-the-dashboard">
</hubcap-recorder>

Now, the Hubcap recorder will appear in the bottom right corner of the page. By default, it will be the only way to start a recording.

Add a custom record button

To improve the user experience, let's add a custom record button that's more closely integrated with the existing form. This button will initiate a screen recording in the same way our default button does.

Note: You can always customize the color of our default button and its messaging in the Customize section of your Dashboard.

We'll start by adding a regular button to the form:

<!-- added custom button that will start recording -->
<button type="button" id="my-start-button">Attach screen recording</button>

Next, we'll add a click listener to our new button. When it's clicked, we'll call recorder.start, and specify the type of recording. In this case, it's screen. The only other option would be webcam.

<script>
  let recorder = document.querySelector('hubcap-recorder');
  // start recording when button is clicked
  document.querySelector("#my-start-button")
    .addEventListener("click", function() {
      recorder.start({source: 'screen'});
    });
</script>

When a recording begins, our default stop button will appear in the bottom right corner. It is not currently possible to customize the way to stop a recording.

Customize the UI

The Hubcap API provides a handful of ways to customize the default UI using simple attributes on the <hubcap-recorder> element. Please refer to our API Reference for a full list of attributes.

Since we have our own start button now, let's get rid of the default one by adding show-start-button="false" to <hubcap-recorder>.

We also don't need to display the default success message that appears after a user accepts a recording. In this case, the message may confuse them since they'll still need to submit the contact form. We can disable the success message by adding show-submission-success="false".

Here are our custom attributes:

<hubcap-recorder
  recorder-id="your-recorder-id-from-the-dashboard"
  show-start-button="false"
  show-submission-success="false">
</hubcap-recorder>

The modal that pops up after a recording ends contains "Email" and "Message" form fields by default. You can disable these form fields in your Dashboard. There is currently no way to disable or edit these fields with code.

Access the recording URL

By default, we'll email you a link to each new recording. You can turn these email notifications on or off in the Notifications section of your Dashboard.

You'll also have immediate access to each recording's URL within the page from the submit event. To add a link to the Hubcap recording within our help desk form's <textarea>, we can listen for the submit event on <hubcap-recorder> and retrieve the video URL in the event's detail property.

Once we have the URL, we'll simply append it to the form's <textarea>:

let recorder = document.querySelector('hubcap-recorder');
// When a new recording is made, append recording link to existing textarea
recorder.addEventListener('submit', function(ev) {
  document.querySelector('textarea').value +=
  `\n\nVideo message: ${ev.detail.viewUrl}`;
});

Finished product

And voila! We've now built a way for users to submit screen recordings to us without ever leaving their browser or installing additional software.

Below is the finished product. You can inspect the code by opening up the Editor at the bottom.