Recording Link

Configure your website for getting screen recording and technical details for issues using Recording Links: Login > Workspace Settings > Recording Link

PREREQUISITES

1: Write Access to Your Website Code

Make sure you’ve the write access for your site, so you can add two code snippets to your site’s HTML head in the index file. These are the scripts for BetterBugs.io to activate the recording controls and UI when they paste the recording link in their browser, and also enable the logs capturing feature for your website.

2: Site Hosted with SSL/TLS Protocol

When you try to add/register a domain for the recording URLs, make sure it's hosted with a secure SSL/TLS protocol, meaning it uses “https://” (AND NOT http:// or localhost).

Quick Overview: Step-by-Step Breakdown for Configuring Recording Links for Your Custom Domain

Here’s what the complete process looks like:

Install the recorder and log-capturing feature for the shared recording URLs coming from your website -> For this, you'd add two code snippets (provided below in the configuration steps) to your website’s HTML head.
Add/register the base domain address with BetterBugs.io ->This enables you to generate one or more recording URL(s) containing your own domain address.
Verify -> Finally, validate and verify the successful installation with the “Verify” button.

And you’re good to go.

How to Register Your Own Domain/Website with BetterBugs.io Recording Links: Step-by-Step

Open Workspace Settings > Recording Links

Click on BetterBugs.io Workspace name at the top left side of app screen. Now, click the gear icon to open Workspace Settings > Recording Link

Add the Log Capture and Recorder Scripts

Add the following recorder and logs capturer scripts to your website's HTML head tag.

These allow your recording URL to capture technical details (console logs and network requests) to auto-attach with your recording.

<html>
  <head>
    <!-- Put this in the HTML head tag -->
    <script src="https://pkg.betterbugs.io/scripts/latest/logs-capture.js"></script>
    <script src="https://pkg.betterbugs.io/scripts/latest/recorder.js"></script>
  </head>
</html>

(Optional) Customize Theme for Recorder UI

You can also customize the recorder UI theme as per your brand colors and design. Add the following code to your website's HTML head tag. You can modify the values for all options as per your need.

<html>
  <head>
    <!-- Put this in the HTML head tag -->
    <!-- All Customization Options for Recording Links UI -->
    <script>
      window.__BetterbugsRecordingLinkConfig = {
        styles: {
          theme: "light",
          primaryColor: "#000000",
          primaryTextColor: "#ffffff",
        },
        startRecordingBtnText: "Start recording",
        mainHeaderText: "Ready to record?",
        subHeaderText: "Record your screen",
        emailFieldLabel: "Email",
        titleFieldLabel: "Title",
        descriptionFieldLabel: "Description",
        emailFieldPlaceholder: "Enter your email",
        titleFieldPlaceholder: "Enter your title",
        descriptionFieldPlaceholder: "Enter your description",
        successMessageHeaderText: "All set!",
        successMessageSubHeaderText: "We've saved your input",
        metaData: {
          key: "value",
        },
      };
    </script>
  </head>
</html>

Register Your Domain

To register your website address/base domain with BetterBugs.io, click “Verify” and the bottom right.

Add Site URL

Now, add your website address/base domain and click "Add URL". You should get a toast notification for successful validation.

IMPORTANT NOTE

You can register your base domain to generate your recording links from your own website to get auto-attached console logs and network requests from the website in case of errors while the recording happens.

The log capturing would also happen on the pages with the same domain. However, it won’t capture the logs and requests from the subdomain (of course, unless it’s registered separately as a new one).

For instance, if you have registered “https://www.xyz.com” as a base domain, you’ll also get error logs when the recording happens on “https://www.xyz.com/products” or any other pages. However, the log capturing will not happen for a subdomain, like “https://www.docs.xyz.com” or similar ones.

Verify Script Installation

Finally, click the “Verify” button to check if everything works correctly. This step verifies the correct installation of the added scripts.

A new tab should open a widget should appear, which shows the successful installation for:

Recorder script
Web SDK initialization

You’re good to go.

Now, you’re ready to create recording links (using BetterBugs) that come from your web address and also give you the devtools info (console logs and network requests) when your users record any issue using them.

How to Generate Recording URL(s) that Captures Developer Logs (After Registering Your Domain): One-Time Usage

IMPORTANT NOTE

Make sure you’re in the same Workspace that contains your configured domain while generating custom recording links.

Click “Recording Links”

From your BetterBugs.io dashboard, click on “Recording Links” located just below your workspace name.

Create a New Recording Link

Click “+ New Link” located on the top right.

Disable the Reusable Option

Disable the "Reusable" option to create link for single usage.

Here, we've covered the steps to generate the recording link for a one time usage.

You can follow the same steps for generating reusable recording links by enabling the "Reusable" option and specifying the expiry date + number of times it can be reused.

Add Details for the New Recording Link

Add the following details:

Choose Project* -> Select a BetterBugs.io project (from the current workspace) to which the recording would be saved. It’s a required field.
Name your recording link -> Add a name for the recording link (e.g., issue with the login, Payment issue, Customer issue, or any others).
Capture logs from -> Select the domain to get logs from.
MORE INFO
The “Capture logs from” dropdown shows the list of domains you’ve added for getting logs. If you’ve added just one domain, the same would be used by default for the recording URL that captures logs.

Hit “Create Link”

Hit the “Create link” button. This creates a one-time usage recording link with the “Ready to Record” tag.

Okay! You're all set.

Now, when you share the Recording Links and a user submits a bug report to you, you’ll also get auto-attached technical details from the devtools in the same report, everything bundled.

Example Code: Installing Recording Link (that captures console logs, network requests, and others) With Theme Customization Options

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BetterBugs | Recording Link Configured with Custom UI</title>

    <!-- Script to cature logs, network requests, and other technical details from devtools + for Recorder UI-->
    <script src="https://pkg.betterbugs.io/scripts/latest/logs-capture.js"></script>
    <script src="https://pkg.betterbugs.io/scripts/latest/recorder.js"></script>

    <!-- All Customization Options for Recording Links UI -->
    <!-- for metaData, both key and values can be modified; 
         for rest, you can modify the values as required -->
    <script>
      window.__BetterbugsRecordingLinkConfig = {
        styles: {
          theme: "light",
          primaryColor: "#000000",
          primaryTextColor: "#ffffff",
        },
        startRecordingBtnText: "Start recording",
        mainHeaderText: "Ready to record?",
        subHeaderText: "Record your screen",
        emailFieldLabel: "Email",
        titleFieldLabel: "Title",
        descriptionFieldLabel: "Description",
        emailFieldPlaceholder: "Enter your email",
        titleFieldPlaceholder: "Enter your title",
        descriptionFieldPlaceholder: "Enter your description",
        successMessageHeaderText: "All set!",
        successMessageSubHeaderText: "We've saved your input",
        metaData: {
          username: "obi-wan",
          plan: "individual",
          userID: 1234,
        },
      };
    </script>
  </head>
  <body>
    <h1>Recording Links</h1>
    <p>
      Configured to capture console logs, network requests, and other technical
      details with the screen recording + Customization added for UI
    </p>

    <button class="btn">Click here</button>

    <!-- Click Handler: This one triggers an error when the "Click here" button is clicked.
     Simulates that the recording link captures console logs and other devtools info -->
    <script>
      document.querySelector(".btn").addEventListener("click", function () {
        throw new Error("Random error #" + Math.trunc(Math.random() * 10) + 1);
      });
    </script>
  </body>
</html>

Quick Overview: All Customization Options for the Recorder UI

Option

Type

Description

styles

{ theme?: "light" | "dark",

primaryColor?: string, primaryTextColor?: string, }

Set the styles of the recorder

startRecordingBtnText

string

Text for the start recording button in the recorder UI

mainHeaderText

string

Main header text in the recorder UI

subHeaderText

string

Sub header text for recorder UI

emailFieldLabel

string

Email field label in the submit form after the recording is finished

titleFieldLabel

string

Title field label in the submit form

descriptionFieldLabel

string

Description field label in the submit form

emailFieldPlaceholder

string

Email field placeholder in the submit form

titleFieldPlaceholder

string

Title field placeholder in the submit form

descriptionFieldPlaceholder

string

Description field placeholder in the submit form

successMessageHeaderText

string

Main header text in the UI after the report is successfully submitted

successMessageSubHeaderText

string

Sub header text in the UI after the report is successfully submitted

metaData

object

Custom metadata to attach to reports. e.g.,

{ username: "obi-wan", plan: "individual", userID: 1234, }

PreviousWorkspace Automation NextWeb SDK

Last updated 3 months ago