# Recording Link {% hint style="warning" %} **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). {% endhint %} ### Quick overview of the setup process Here’s what the complete process looks like:
1. 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. 2. 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. 3. 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 {% stepper %} {% step %} ### 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. {% endstep %} {% step %} ### Open "Recording Links" In “**Workspace Settings**”, click on the “**Recording Links**” tab. {% endstep %} {% step %} ### Register your domain(s) Next, under “**Setup Recording URLs**”, add your website address/base domain and click “**Add**”. {% hint style="warning" %} **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 “\*\* 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 %} ### 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 ``` {% endstep %} {% step %} ### (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 ``` {% endstep %} {% step %} ### 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 {% 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 the recording URL(s) after registering your domain Here are the steps for generating the recording URL: {% hint style="warning" %} **IMPORTANT**: Make sure you’re in the same Workspace that contains your configured domain for generating custom recording links. {% endhint %} {% stepper %} {% step %} ### Click “Recording Links” from the sidebar In the BetterBugs dashboard, click “**Recording Links**” from the left sidebar. {% endstep %} {% step %} ### 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). {% hint style="info" %} **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. {% endhint %} {% endstep %} {% step %} ### Hit “Create Link” Next, hit the “**Create link**” button. A new link gets created with the “**Ready to Record**” tag. {% endstep %} {% step %} ### Copy the link and share Finally, copy the recording link to your clipboard. It's ready to share with others for use. {% hint style="warning" %} **NOTE**: The generated link is for one-time use by default. Whenever needed, you can create and share more links the same way. {% endhint %} {% 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](https://docs.betterbugs.io/product-features/developer-tools) in the same report, everything bundled ### Example for 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 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, }