Recording Links

Configure your website for getting screen recording and technical details for issues using Recording Links.

PREREQUISITES

Make sure you’ve the write access to the website code. It's because you’ll have to add two code snippets to your site’s HTML head in the index file. These are the CDN scripts for BetterBugs 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.
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 of the setup process

Here’s what the complete process looks like:

First, add/register the base domain address with BetterBugs. This allows BetterBugs to generate one or more recording URL(s) containing your own domain address.
Then, install the recorder and log-capturing feature for the shared recording URLs coming from your website. For this, you just have to add two code snippets (provided below in the configuration steps) to your website’s HTML head.
Finally, test the successful installation with the “Test” button.

And you’re good to go.

Steps to configure recording URLs for getting developer logs

Here are the steps for it

Open Workspace Settings

Log in to your BetterBugs dashboard. Click on your current workspace name at the top left. This opens a dropdown with the list of all available workspaces. Here, click “Workspace Settings” to open the settings for the current workspace.

Open "Recording Links"

In “Workspace Settings”, click on the “Recording Links” tab.

Register your domain(s)

Next, under “Setup Recording URLs”, add your website address/base domain and click “Add”.

IMPORTANT

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.

Install 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://cdn.jsdelivr.net/npm/@betterbugs/web-sdk@latest/logs-capture.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@betterbugs/web-sdk@latest/recorder.js"></script>
  </head>
</html>

(Optional) Customize the theme

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>

Test the recording URL setup

Finally, click the “Test” 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 the recording URL(s) after registering your domain

Here are the steps for generating the recording URL:

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

Click “Recording Links” from the sidebar

In the BetterBugs dashboard, click “Recording Links” from the left sidebar.

Create a new recording link and add details

Click on the “+ New” green button on the right side. Now, add the following details:

Select Project* — Select a BetterBugs project (from the current workspace) to which the recording would be saved. It’s a required field.
Name (Optional) — Add a name for the recording link (e.g., issue with the login).
Capture logs from — Open the dropdown and select your domain to get logs from (This field will not be visible if there’s only one domain configured for generating the custom recording URLs).

MORE INFO: The “Capture logs from” dropdown would only show if you’ve added more than one domain for getting logs. If you’ve added just one domain, this option will not show. The custom domain that you’ve added would be used by default for the recording URL that captures logs.

Hit “Create Link”

Next, hit the “Create link” button. A new link gets created with the “Ready to Record” tag.

Finally, copy the recording link to your clipboard. It's ready to share with others for use.

NOTE: The generated link is for one-time use by default. Whenever needed, you can create and share more links the same way.

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 for 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>

    <!-- Scripts to cature logs, network requests, and other technical details from devtools + for Recorder UI-->
    <script src="https://cdn.jsdelivr.net/npm/@betterbugs/web-sdk@latest/logs-capture.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@betterbugs/web-sdk@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 of 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, }

PreviousIntegration NextBilling

Last updated 21 days ago

Was this helpful?

Quick overview of the setup process

Steps to configure recording URLs for getting developer logs

Open Workspace Settings

Open "Recording Links"

Register your domain(s)

Install the log capture and recorder scripts

(Optional) Customize the theme

Test the recording URL setup

How to generate the recording URL(s) after registering your domain

Click “Recording Links” from the sidebar

Create a new recording link and add details

Hit “Create Link”

Copy the link and share

Example for installing recording link (that captures console logs, network requests, and others) with theme customization options

Quick overview of all customization options for the recorder UI