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
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/recorder.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@betterbugs/web-sdk@latest/logsCapturer.js"></script>
</head>
</html>
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.
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).
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
Last updated
Was this helpful?