# Recording Link {% hint style="warning" icon="lightbulb" %} **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). {% endhint %} ### Quick Overview: Step-by-Step Breakdown for Configuring Recording Links for Your Custom Domain Here’s what the complete process looks like: 1. **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. 2. **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. 3. **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 {% stepper %} {% 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** {% endstep %} {% step %} #### 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 ``` {% endstep %} {% step %} #### (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 ``` {% endstep %} {% step %} #### Register Your Domain To register your website address/base domain with BetterBugs.io, click “**Verify**” and the bottom right. {% endstep %} {% step %} #### Add Site URL Now, add your website address/base domain and click "**Add URL**". You should get a toast notification for successful validation. {% hint style="warning" %} **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 “\*\* as a base domain, you’ll also get error logs when the recording happens on “\*\* or any other pages. However, the log capturing will not happen for a subdomain, like “\*\* or similar ones. {% endhint %} {% endstep %} {% step %} #### 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 {% endstep %} {% endstepper %} 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 {% hint style="warning" %} **IMPORTANT NOTE** Make sure **you’re in the same Workspace that contains your configured domain** while generating custom recording links. {% endhint %} {% stepper %} {% step %} #### Click “Recording Links” From your BetterBugs.io dashboard, click on “**Recording Links**” located just below your workspace name. {% endstep %} {% step %} #### Create a New Recording Link Click “**+ New Link**” located on the top right. {% endstep %} {% step %} #### Disable the Reusable Option Disable the "**Reusable**" option to create link for single usage. {% hint style="info" icon="lightbulb" %} 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](/product-features/recording-links/using-recording-links.md) by enabling the "**Reusable**" option and **specifying the expiry date** + **number of times it can be reused**. {% endhint %} {% endstep %} {% step %} #### 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.

{% endstep %} {% step %} #### Hit “Create Link” Hit the “**Create link**” button. This creates a one-time usage recording link with the “**Ready to Record**” tag. {% endstep %} {% endstepper %} 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](/product-features/developer-tools.md) in the same report, everything bundled. ### Example Code: Installing Recording Link (that captures console logs, network requests, and others) With Theme Customization Options ```html BetterBugs | Recording Link Configured with Custom UI

Recording Links

Configured to capture console logs, network requests, and other technical details with the screen recording + Customization added for UI

``` ### 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, }

--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.betterbugs.io/dashboard/workspace-settings/recording-links.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.