# BetterBugs Documentation

Create and share bit-perfect bug reports with every detail a developer needs. BetterBugs.io has all the tools to capture application issues with everything, from visual proofs to technical details.

At BetterBugs.io, we aim to simplify the bug reporting and debugging process for software applications. 

BetterBugs.io provides a lightweight, user-friendly, feature-packed, and collaborative solution that enables you to create and share comprehensive, context-rich, crisp, and technically sound bug reports in minutes, not hours. 

Using the reports, you can debug software issues much better and faster, manually or using AI.

<a href="/pages/F69DM7uP2iVaxmY5Rbig" class="button primary">Create your first bug report</a>&#x20;

### What You Can Do Using BetterBugs.io: Top Use Cases

#### Visual Bug Reporting for Software&#x20;

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Screen Capturing</strong></td><td>Capture screenshots of bugs for visual proofs.</td><td><a href="/files/mbhrZ7CyBdSjkGvwfrij">/files/mbhrZ7CyBdSjkGvwfrij</a></td><td><a href="/pages/GDAuIC1hZ9gf686TA48u">/pages/GDAuIC1hZ9gf686TA48u</a></td></tr><tr><td><strong>Screen Recording</strong></td><td>Record video footages of issues in action.</td><td><a href="/files/JkM1mntWAxBOBEJzusvz">/files/JkM1mntWAxBOBEJzusvz</a></td><td><a href="/pages/MD4d898aSOq6wffTaWuA">/pages/MD4d898aSOq6wffTaWuA</a></td></tr><tr><td><strong>Rewind</strong></td><td>Get the last 2-min screen recording for capturing unexpected bugs.</td><td><a href="/files/WcMAMut3gVYzAxQPLFPu">/files/WcMAMut3gVYzAxQPLFPu</a></td><td><a href="/pages/oBoz16yaBqjRZcIiRnu7">/pages/oBoz16yaBqjRZcIiRnu7</a></td></tr><tr><td><strong>Integrations</strong></td><td>Send bug reports instantly to your existing project tools, issue trackers, and backend loggers.</td><td><a href="/files/Ks6Jl9pvZS4tHhi1Zroj">/files/Ks6Jl9pvZS4tHhi1Zroj</a></td><td><a href="/pages/xerbG794CwHeclCW209o">/pages/xerbG794CwHeclCW209o</a></td></tr><tr><td><strong>Automation</strong></td><td>Automate to send bug reports to multiple project tools in one-click.</td><td><a href="/files/AgC2KIsAV2OudtQ2sZRc">/files/AgC2KIsAV2OudtQ2sZRc</a></td><td><a href="/pages/9hzEgN2fgniem7IAYaC6">/pages/9hzEgN2fgniem7IAYaC6</a></td></tr></tbody></table>

#### Manual and AI-powered Debugging&#x20;

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Developer Tools</strong></td><td>Get auto-attached console logs, network requests, and env info with every bug report for debugging.</td><td><a href="/files/0T7nrGUJrC1EUg6u7o0J">/files/0T7nrGUJrC1EUg6u7o0J</a></td><td><a href="/pages/RZY4SB7bHogHro9WZgAd">/pages/RZY4SB7bHogHro9WZgAd</a></td></tr><tr><td><strong>AI Debugger</strong></td><td>Run crazy fast debugging sessions for the bug reports with the built-in AI Debugger.</td><td><a href="/files/YWGYjRRDqEjzdaTe9Bm5">/files/YWGYjRRDqEjzdaTe9Bm5</a></td><td><a href="/pages/1Shwx4cOKIIPvSrMSaA0">/pages/1Shwx4cOKIIPvSrMSaA0</a></td></tr><tr><td><strong>MCP Server</strong></td><td>Load bug reports (via report links) to your AI Agents and text editors to debug with all the context using MCP.</td><td><a href="/files/C57W2ikEbG7h86agXLtl">/files/C57W2ikEbG7h86agXLtl</a></td><td><a href="/pages/fzTeqs6RhZBt6Onr6lcN">/pages/fzTeqs6RhZBt6Onr6lcN</a></td></tr></tbody></table>

#### Customer Support and Feedback Workflows

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Recording Links</strong></td><td>Instantly share recording links to get the complete context and info on what went wrong.</td><td><a href="/files/05MMvgHkRuBCG2M5iSQK">/files/05MMvgHkRuBCG2M5iSQK</a></td><td><a href="/pages/ehuMVTzUXlx2uBjKzYgg">/pages/ehuMVTzUXlx2uBjKzYgg</a></td></tr><tr><td><strong>Feedback Widget for Apps</strong></td><td>Integrate a custom bug reporting/feedback SDK widget into your web apps with a few code snippets.</td><td><a href="/files/bJUQKs3cMD6kNeUxxrrr">/files/bJUQKs3cMD6kNeUxxrrr</a></td><td><a href="/pages/8pCJ2OEvtpSj5gdoOPTS">/pages/8pCJ2OEvtpSj5gdoOPTS</a></td></tr></tbody></table>


# About

Quick overview of what BetterBugs is and how it helps while you build software.

### What is BetterBugs.io?&#x20;

BetterBugs.io is a lightweight, intuitive, and fully-fledged bug reporting tool that helps create and share technical bug reports to your [**project management tools and issue trackers**](/product-features/integrations) in a few clicks — right from your browser, making the process faster up to 10X.&#x20;

<div data-with-frame="true"><figure><img src="/files/Y2qRlB4hlZ0o86XmEVU4" alt="" width="563"><figcaption><p>BetterBugs.io Extension</p></figcaption></figure></div>

Its perfect for both technical and non-technical software professionals.&#x20;

You can use BetterBugs.io bug reports (that comes with auto-attached technical details from devtools console, visual proof, and context) to debug issues:

* [**Manually**](/product-features/developer-tools) (using auto-attached technical details with every bug report)
* [**Using AI Debugger**](/debug-a-report/ai-debugger) (Available within your bug report's info tab after you create a session)
* [**Using BetterBugs MCP**](/debug-a-report/mcp) (using text editors like VS Code, Cursor, Windsurf, Claude, and other&#x73;**)**

**And that's that all!**

BetterBugs.io also enables you to add a [lightweight feedback widget to your web apps](/developer-guide-old/betterbugs-web-sdk); perfect for gathering customer feedback (as visual and technical bug reports). Your customers DO NOT need any installs or downloads to use the widget. You can add the widget to your web app with a few code snippets — within minutes.

Simply put, BetterBugs.io streamlines workflows across software teams for development, QA, QC, testing, bug reporting, bug tracking, debugging, and customer support operations.&#x20;

### What is One of the Core Problems with Traditional Bug Reporting Methods in Software that BetterBugs.io Helps Solve?

Reporting software bugs is a tedious and long process that eats up much of your time and effort with traditional back-and-forth reporting workflows. And this often leads to:

* Endless email chains
* Back-and-forth communication among team members for follow-ups
* Manual copy-pasting information to bug tracking tools, PM tools, and issue trackers
* Incredibly slow turnaround times for bug resolution workflows. &#x20;

> *To quantify, traditional bug reporting processes take an **average of 8–10 minutes** to capture, gather evidence, and report a software issue.*&#x20;
>
> *If a QA reports **an average of 10 issues per day**, this amounts to a **whopping 80–100 minutes**. And **that's 20% of a typical workday** spent solely on bug reporting.*

### How BetterBugs.io Solves the Pain of Incredibly Slow Bug Reporting Process in SDLC and STLC?

BetterBugs.io enables you to create and share instant bug reports with all the relevant details needed to analyze, reproduce, debug, and resolve software issues in a few clicks.&#x20;

It automatically attaches technical details like environment information, console logs, network requests, page navigation steps, and more to every bug report, ensuring engineers and developers have everything they need to start debugging.&#x20;

Additionally, the **AI debugger** and cutting-edge **MCP (Model Context Protocol)** reduces cognitive load for debugging, allowing you to focus on what matters most — building top-notch software.

> *With just a few clicks, you can generate a comprehensive report packed with precise details and complete context that every developer needs to resolve an issue.*&#x20;
>
> *The report link allows you to share the information seamlessly with others, project management tools, or issue trackers in under a minute — cutting your bug reporting time by up to 90%. Plus, devs can use crisp, detailed, and context rich bug reports for manual + AI powered debugging sessions — speeding up the ticket resolution time several folds!*

At BetterBugs.io, we’re dedicated to improving software development and testing through intuitive and smart bug reporting, streamlined debugging, and advanced automation.&#x20;

We make it easier for developers and testers to work together by providing actionable data, context, and insights that speed up issue resolution and ensure high-quality, reliable software.


# Quickstart

Use BetterBugs to create and share detailed bug reports within minutes, not hours.

### Get Started with BetterBugs.io

Hey there! We're excited to see you.&#x20;

If you're annoyed with the traditional bug-reporting and debugging process while ensuring your software quality, BetterBugs.io is for you.

### Quick Installation

<a href="https://chrome.google.com/webstore/detail/betterbugs-a-fresh-approa/mdljmlgokccncglfobogbfjgcijldnaj" class="button primary">Add to Chrome</a>

1. Integrate the **BetterBugs.io FREE extension** using the button above and pin it to your browser toolbar for quick access.
2. Click the extension icon on your browser. It takes you to the [login screen of BetterBugs](https://app.betterbugs.io/login).&#x20;
3. Sign up with your email address and hit "**Continue**". Confirm your account with the OTP received in your email. Alternatively, you can sign up with your **Google** or **GitHub** account.&#x20;

Okay, you're all set to create your first bug report.

### How to Create a Bug Report using BetterBugs.io \[Step-by-Step]

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FMzo5LRaUizWglQK2oSIx%2F01-Getting-Started-with-Your-First-Bug-Report-using-BetterBugs.mp4?alt=media&token=dd2b79d7-65e0-4b9c-a3a9-a733b529f1d1>" %}
How to Create a Bug Report using BetterBugs.io | Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Capture the Issue

Use the extension to capture the bug using the screenshot or screen recording option. For instance, click "[**Capture Screenshot**](/product-features/screen-capturing/cropped-screenshot)" in the "**Crop**" mode. Drag and select the screen area you want to capture. This instantly captures a snipped screenshot.&#x20;

The [technical details](/product-features/developer-tools) \[*system info, console logs, network requests, page navigation steps, and other devtools info*] are automatically attached to the report. You can also add custom metadata for the report, if required.

{% hint style="success" %}
Alright! You just captured your first bug. That's how easy it is.
{% endhint %}
{% endstep %}

{% step %}

#### Annotate the Screenshot

Use the markup toolbar at the left to highlight the issue.&#x20;
{% endstep %}

{% step %}

#### Enter Issue Details

You can add the details (**Title + Quick Summary + Steps to Reproduce**) manually in the description area manually or automatically with the "**AI**" toggle.

Use the "**Details**" and "**Tags**" section below the description area to assign:

* Status
* Priority
* Assignee
* Custom Tags
  {% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project

From the two dropdowns above the description area, select:

* **Workspace** (Default: My Workspace)
* **Project** (Default: My Project)

This is where your report saves once you create a session.
{% endstep %}

{% step %}

#### Create Session

Finally, hit "**Create Session**" button on the top right.
{% endstep %}
{% endstepper %}

This creates a report session and opens the report in a new tab. The report link gets auto-copied to the clipboard, so you can share it with others to access the complete report.&#x20;

You can also add the following to your bug report:

* **Annotations and Markups:** Add markups to highlight the issue.
* **Add tags**: Up to 10 tags.
* **Upload files**: Supported file types -> Doc, Excel, PDF, Txt, Image, and Video: Max of 5 files/report.
* **Metadata**: Add custom `key : value` as **Title** and **Value** pairs in the devtools "**Metadata**" tab.
* **Status**: Open, In Progress, Closed.
* **Priority**: Urgent, High, Medium, Low (By default, all reports are marked with Medium priority level).
* **Assignee**

You can also integrate BetterBugs with your preferred project management tools and issue trackers, such as Jira, GitHub, Asana, Linear, and many others. [Check out the steps for it](/product-features/integrations).


# Screen capturing

Capture instant screenshots with three screen capturing modes: Cropped screenshot, Visible screen capture, Full web page screenshot

### Quick overview

**BetterBugs.io** enables you to take instant or [delayed screenshots](/product-features/screen-capturing/delayed-screenshot) of any bug or issue. Along with the screenshot, it captures and auto-attaches technical details of the issue, such as:

* System info
* Console logs
* Network requests
* Backend (event logs from Sentry)
* Steps (Page navigation steps)
* Metadata (Custom)
* Application State

You can also use the "**AI**" toggle to get add quick summary and steps to reproduce the issue while creating the report session.&#x20;

The [auto-attached technical information](/product-features/developer-tools) (along with the visual proof of the issue) helps you run the **manual RCA** with all the info and context you need and debug significantly faster.&#x20;

For debugging purposes with BetterBugs.io bug reports, you can do it using:

* Manual methods (using the [auto-attached developer tools info](/product-features/developer-tools) paired with the visual proof)
* [AI Debugger](/debug-a-report/ai-debugger)
* [MCP (Model Context Protocol) Server](/debug-a-report/mcp)

### **How it Works**

1. Capture the screen.
2. BetterBugs.io automatically adds all relevant details and information.
3. Upload the screenshot to create report session with all the details.
4. Share the report link with others for debugging.

### Available Modes for Screenshot Capturing in BetterBugs.io

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Cropped screenshot</strong></td><td>Take a screenshot by dragging and selecting screen area.</td><td><a href="/files/70nY0nTA2LeAYlkJO7E5">/files/70nY0nTA2LeAYlkJO7E5</a></td><td><a href="/pages/kHe6xLJKnpu5RkYd9g4L">/pages/kHe6xLJKnpu5RkYd9g4L</a></td></tr><tr><td><strong>Visible screen capture</strong></td><td>Capture the complete screen as a screenshot with one click.</td><td><a href="/files/JrO2Z8Hy0KHFqaGGTHlE">/files/JrO2Z8Hy0KHFqaGGTHlE</a></td><td><a href="/pages/QQbvCUNzfk8kusqHXbJ0">/pages/QQbvCUNzfk8kusqHXbJ0</a></td></tr><tr><td><strong>Full web page screenshot</strong></td><td>Capture the entire web page to get a scrollable screenshot</td><td><a href="/files/gCI6k4ccQOZXsjZgvV1F">/files/gCI6k4ccQOZXsjZgvV1F</a></td><td><a href="/pages/qtHaE8eFUjoOEqpkuqg5">/pages/qtHaE8eFUjoOEqpkuqg5</a></td></tr></tbody></table>

### **BetterBugs.io Bug Report: Key Features for Screen Capturing**

* Visual proof
* Auto-attached technical details
* Context-specific
* User-friendly
* Shareable as links

Not only QA engineers and developers but also project managers and support teams can easily generate, share, and understand these reports.

When you capture a screenshot with BetterBugs.io, developer-friendly details are auto-captured and tagged with it. You don't have to worry about adding anything manually. QA can send these comprehensive reports to the development team within minutes, making the bug-reporting workflow frictionless.


# Cropped screenshot

Steps to take a screenshot by dragging and selecting screen area.

<div data-with-frame="true"><figure><img src="/files/aSaw2M58hNhR7jWMBRwL" alt="" width="563"><figcaption><p>BetterBugs.io Screenshot Mode: Cropped</p></figcaption></figure></div>

{% stepper %}
{% step %}

#### Get Started

Open the extension from your browser.
{% endstep %}

{% step %}

#### Select the Screenshot Mode

Click the dropdown for "**Capture Screenshot**" option, click "**Crop**".
{% endstep %}

{% step %}

#### Drag and Select the Desired Screen Area

Drag and select the screen area for instant screen capture.&#x20;
{% endstep %}
{% endstepper %}

You instantly get the cropped screenshot, ready to be [annotated](/product-features/screen-capturing/annotation).&#x20;

{% hint style="info" %}
**Note:** With the cropped screenshot, you also get the full-screen screenshot with the report. The option to upload the full-screen screenshot is auto-checked by default with every cropped screenshot. You can uncheck it if it's not required.
{% endhint %}

Once you're good with filling in the details, you can upload the report to your BetterBugs.io account using the "**Create Session**" button at the top right. Use the report link to instantly share it with others.&#x20;

With every bug report, BetterBugs.io auto-attaches [technical details](/product-features/developer-tools), such as:&#x20;

* System info
* Console logs
* Network requests
* Backend (event logs from Sentry)
* Steps (Page navigation steps)
* Metadata (Custom)
* Application Local State

{% hint style="info" %}
You can use the "**Download**" icon to instantly download it on your device.
{% endhint %}

You can also send the complete bug report to your integrated [project management tools and issue trackers](/product-features/integrations).&#x20;


# Visible screen capture

Steps to capture the visible screen.

<div data-with-frame="true"><figure><img src="/files/5BeJfmtGlADu9YWdp1If" alt="" width="563"><figcaption><p>BetterBugs.io Screenshot Mode: Visible Screen</p></figcaption></figure></div>

{% stepper %}
{% step %}

#### Get Started

Open the extension from your browser
{% endstep %}

{% step %}

### Select the Screenshot Mode

Click the dropdown for "**Capture Screenshot**" option, click "**Visible**".
{% endstep %}
{% endstepper %}

{% hint style="success" %}
Default keyboard shortcuts to capture the entire visible screen:

* For Windows: <kbd>Alt</kbd>  +  <kbd>Shift</kbd>  +  <kbd>Z</kbd>&#x20;
* For Mac:  <kbd>^</kbd>  +  <kbd>⌘</kbd> +  <kbd>Z</kbd>
  {% endhint %}

You instantly get the visible screen screenshot, ready to be [annotated](/product-features/screen-capturing/annotation).&#x20;

{% hint style="info" %}
**Note:** With the cropped screenshot, you also get the full-screen screenshot with the report. The option to upload the full-screen screenshot is auto-checked by default with every cropped screenshot. You can uncheck it if it's not required.
{% endhint %}

Once you're good with filling in the details, you can upload the report to your BetterBugs.io account using the "**Create Session**" button at the top right. Use the report link to instantly share it with others.&#x20;

With every bug report, BetterBugs.io auto-attaches [technical details](/product-features/developer-tools), such as:&#x20;

* System info
* Console logs
* Network requests
* Backend (event logs from Sentry)
* Steps (Page navigation steps)
* Metadata (Custom)
* Application Local State

{% hint style="info" %}
You can use the "**Download**" icon to instantly download it on your device.
{% endhint %}

You can also send the complete bug report to your integrated [project management tools and issue trackers](/product-features/integrations).&#x20;


# Full web page screenshot

Steps to take a full web page scrollable screenshot.

<div data-with-frame="true"><figure><img src="/files/yzsQmqdbvEv80QMLN5Bv" alt="" width="563"><figcaption><p>BetterBugs.io Screenshot Mode: Full Web Page Scrollable Screenshot</p></figcaption></figure></div>

{% stepper %}
{% step %}

#### Get Started&#x20;

Open the extension from your browser.
{% endstep %}

{% step %}

#### Select the Screenshot Mode

Click the dropdown for "**Capture Screenshot**" option, click "**Full**".
{% endstep %}
{% endstepper %}

You're good to go. The entire web page is captured instantly. You can add details to the screenshot and [annotate](/product-features/screen-capturing/annotation) it wherever required.&#x20;

{% hint style="success" %}
The complete web page can be scrolled through (from top to bottom) since the full page layout gets captured.
{% endhint %}

Once you're good with filling in the details, you can upload the report to your BetterBugs.io account using the "**Create Session**" button at the top right. Use the report link to instantly share it with others.&#x20;

With every bug report, BetterBugs.io auto-attaches [technical details](/product-features/developer-tools), such as:&#x20;

* System info
* Console logs
* Network requests
* Backend (event logs from Sentry)
* Steps (Page navigation steps)
* Metadata (Custom)
* Application Local State

{% hint style="info" %}
You can use the "**Download**" icon to instantly download it on your device.
{% endhint %}

You can also send the complete bug report to your integrated [project management tools and issue trackers](/product-features/integrations).&#x20;


# Delayed screenshot

Steps to take screenshots with countdown timers of 3 seconds and 5 seconds.

Sometimes, you may want to capture screenshots with a few seconds delay. Yes, it's just like your smartphone camera feature that allows you to capture images with a countdown timer.&#x20;

BetterBugs also comes with a feature that allows you to set up a 3 or 5-second delay/countdown timer while capturing screenshots.

### Steps to capture a screenshot with a delay timer **⏱**&#x20;

<div data-with-frame="true"><figure><img src="/files/xxrUvJ40ExcX3dMsaqa9" alt="" width="563"><figcaption><p>BetterBugs.io Delayed Screenshot Mode: 3 seconds and 5 seconds</p></figcaption></figure></div>

{% stepper %}
{% step %}

#### Get Started

Open the extension from your browser.
{% endstep %}

{% step %}

#### Select Your Delay **⏱** Timer: 3 seconds / 5 seconds

Open the "**Capture Screenshot**" dropdown to select the delay for 3 or 5 seconds (By default, it's set to capture screens instantly).
{% endstep %}

{% step %}

#### Select Screenshot Mode and Capture

Click on a screen capture mode: [Crop](/product-features/screen-capturing/cropped-screenshot) screenshot, [Visible](/product-features/screen-capturing/visible-screen-capture) screen, or [Full](/product-features/screen-capturing/full-web-page-screenshot) web page, and capture the bug.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
**For instance**, if you have selected the "**Crop**" option for your screenshot with a time delay of 3 seconds, you can click on it and drag your mouse to select the screen area for cropping.

The cropped area will be captured with a countdown timer displayed along with it.
{% endhint %}

After the timer ends, you'll get the screenshot, ready to be [annotated](/product-features/screen-capturing/annotation).&#x20;

{% hint style="info" %}
You can use the "**Download Screenshot**" button to instantly download it on your device
{% endhint %}

Once you're good with filling in the details, you can upload the report to your BetterBugs.io account using the "**Create Session**" button at the top right. Use the report link to instantly share it with others.&#x20;

With every bug report, BetterBugs.io auto-attaches [technical details](/product-features/developer-tools), such as:&#x20;

* System info
* Console logs
* Network requests
* Backend (event logs from Sentry)
* Steps (Page navigation steps)
* Metadata (Custom)
* Application Local State

{% hint style="info" %}
You can use the "**Download**" icon to instantly download it on your device.
{% endhint %}

You can also send the complete bug report to your integrated [project management tools and issue trackers](/product-features/integrations).&#x20;


# Annotation

Annotation, markups, and blur options for BetterBugs.io screenshots

After you capture screenshots using BetterBugs.io, you can add markups to it for highlighting the issue using:&#x20;

* Annotating
* Scribbles
* Blurring

You can add notes, highlight parts, or scribble your screenshots as needed. This helps you highlight present, blur sensitive parts of the issue for clear context and share relevant information specific to the issue.

### What are the Annotation Options in BetterBugs.io After you take a Screenshot?

Here's a quick summary of annotation options for screenshots in BetterBugs.io:

| Marker name    | Description                                                                | Customization option(s)                                          |
| -------------- | -------------------------------------------------------------------------- | ---------------------------------------------------------------- |
| **Color**      | Enables you to select markup/highlight color                               | N/A                                                              |
| **Freehand**   | Scribble or highlight manually                                             | <ul><li>Stroke</li><li>Style</li></ul>                           |
| **Text**       | Add text to your screenshot                                                | Headings: H1 to H6                                               |
| **Arrow**      | Point out the specifics in your arrows using arrows                        | <ul><li>Stroke</li><li>Style</li><li>Arrow (direction)</li></ul> |
| **Rectangle**  | Make a rectangular frames on your screenshots                              | <ul><li>Stroke</li><li>Style</li></ul>                           |
| **Ellipse**    | Add round shaped markers: Ellipses or Circles                              | <ul><li>Stroke</li><li>Style</li></ul>                           |
| **Blur**       | Enables you to blur elements/screenshot areas                              | N/A                                                              |
| **Highlight**  | Highlight issues to point specifics.                                       | <ul><li>Color</li><li>Opacity</li></ul>                          |
| **Delete all** | Clears up all the markers/annotations from your screenshot.                | N/A                                                              |
| **Undo**       | Erases the last change(s) made to the screenshot.                          | N/A                                                              |
| **Redo**       | Redoes the change made to the screenshot after you perform an Undo action. | N/A                                                              |


# Screen recording

Record video footages of issues in action.

### Quick Overview

BetterBugs.io enables you to record your screen to capture software issues while they occur. While recording your screen, you can:

1. **Annotate or markup** to highlight information while recording is in progress.
2. **Blur elements** on the page to avoid sharing sensitive data with the video.
3. **Add personalized video messages** using your mic and webcam to share the complete context.

Once you stop the recording, BetterBugs.io will also capture and auto-attach [complete technical details](/product-features/developer-tools) (from the devtools) to the bug report. These include:

* System info
* Console logs
* Network requests
* Backend (event logs from Sentry)
* Steps (Page navigation steps)
* Metadata (Custom)
* Application State

You can also use the "**AI**" toggle to get add quick summary and steps to reproduce the issue while creating the report session.&#x20;

The [auto-attached technical information](/product-features/developer-tools) (along with the screen recording of the issue) helps you run the **manual RCA** with all the info and context you need and debug significantly faster.&#x20;

For debugging purposes with BetterBugs.io bug reports, you can do it using:

* Manual methods (using the [auto-attached developer tools info](/product-features/developer-tools) paired with the visual proof)
* [AI Debugger](/debug-a-report/ai-debugger)
* [MCP (Model Context Protocol) Server](/debug-a-report/mcp)

Just like capturing screenshots, screen recordings (along with the technical details) can help share the issue effectively to others with complete context and clarity.&#x20;

### **How it Works**

1. Record the screen.
2. BetterBugs automatically adds all relevant details and information.
3. Upload the screenshot to create report session with all the details.
4. Share the link with others for debugging.

### Available Modes for Screen Recording in BetterBugs.io

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Current tab</td><td>Records the current browser tab.</td><td><a href="/pages/PsFYwk5ey1ReAtGASO1R">/pages/PsFYwk5ey1ReAtGASO1R</a></td><td><a href="/files/ZwTaDho0q1tNCsREOgkP">/files/ZwTaDho0q1tNCsREOgkP</a></td></tr><tr><td>Entire window</td><td>Records all activities on the screen.</td><td><a href="/pages/tfKhZXm3Dp0iZdAQIPb1">/pages/tfKhZXm3Dp0iZdAQIPb1</a></td><td><a href="/files/7u2ycMjFllh3MiYQaIv3">/files/7u2ycMjFllh3MiYQaIv3</a></td></tr></tbody></table>

### **BetterBugs.io Bug Report: Key Features for Screen Recording**

* **Two record modes**: Current tab, Entire window
* Record instantly or with a 3-second or 5-second countdown timer
* Record screens for up to 15 minutes
* Pause feature
* Annotate video
* Blur elements while recording
* Add video messages using your mic and webcam

Not only QA engineers and developers but also project managers and support teams can easily generate, share, and understand these reports.

When you capture a screenshot with BetterBugs.io, developer-friendly details are auto-captured and tagged with it. You don't have to worry about adding anything manually. QA can send these comprehensive reports to the development team within minutes, making the bug-reporting workflow frictionless.


# Current tab

Record the browser tab that you're currently in.

### What does the "Tab" record exactly mean?

When you start recording using the **Tab** option from the BetterBugs.io Chrome extension, only the current open tab gets recorded. It does not matter if you have other tabs open. They will not get captured.

{% hint style="info" %}
**Note**: The URL address bar, bookmarks bar, and the system toolbar are **NOT RECORDED**.
{% endhint %}

### How to Screen Record the Chrome Browser Tab using BetterBugs.io&#x20;

<div data-with-frame="true"><figure><img src="/files/6mtB2l0x8Vy0Nn3Qasqk" alt="" width="563"><figcaption><p>BetterBugs.io Screen Recording Mode: Tab</p></figcaption></figure></div>

{% stepper %}
{% step %}

#### Get started

Open the extension and click the "**Record Screen**" button.
{% endstep %}

{% step %}

#### Select the Record Screen Mode

Click the dropdown for "**Record Screen**" option, click "**Tab**".  The current tab starts getting recorded (up to 15 minutes) after 3 seconds default countdown. Plus, you can pause the recording and resume from the pop-up control toolbar when you start recording.
{% endstep %}

{% step %}

#### End Recording&#x20;

After you've finished recording, press the "**End recording**" button on the control toolbar. There you have it, the tab is recorded and good to go.&#x20;
{% endstep %}
{% endstepper %}

Using the control toolbar while screen recording, you can:

1. **Drag and drop** the toolbar anywhere on your screen.
2. **Finish recording.**
3. **Pause/resume** recording.
4. See the **timer** running.
5. **Annotate** your video with drawing tools.
6. **Blur elements** with the "**toggle blur tool**" option to hide sensitive information.
7. **Add video messages** with the recording (with mic and webcam enabled).&#x20;

{% hint style="info" %}
You can use the "**Download Video**" button to instantly download it on your device.
{% endhint %}

Once you're good with filling in the details, you can upload the report to your BetterBugs.io account using the "**Create Session**" button at the top right. Use the report link to instantly share it with others.&#x20;

With every bug report, BetterBugs.io auto-attaches [technical details](/product-features/developer-tools), such as:&#x20;

* System info
* Console logs
* Network requests
* Backend (event logs from Sentry)
* Steps (Page navigation steps)
* Metadata (Custom)
* Application Local State

You can also send the complete bug report to your integrated [project management tools and issue trackers](/product-features/integrations).&#x20;


# Entire window

Record all activities on your screen.

### What does the "Window" record exactly mean?

Using the "**Window**" record option in the extension enables you to record all the activities on your screen. It's perfect for recording issues in action with everything included for maximum context.&#x20;

For recording, you can select:

* Chrome Tab
* Window
* Entire Screen

{% hint style="info" %}
**Note:** You can toggle "**system audio**" capturing on or off using the switch located in the bottom right of the popup window before starting to record.
{% endhint %}

### How to Screen Record the Entire Window using BetterBugs.io

<div data-with-frame="true"><figure><img src="/files/qEgcSpsy0zQgAmeHHOSE" alt="" width="563"><figcaption><p>BetterBugs.io Screen Recording Mode: Window</p></figcaption></figure></div>

{% stepper %}
{% step %}

#### Get started

Open the extension and click the "**Record Screen**" button.
{% endstep %}

{% step %}

#### Select the Record Screen Mode

Click the dropdown for "**Record Screen**" option, click "**Window**"
{% endstep %}

{% step %}

#### **Select What to Record and Start**

From the pop-up window, select what needs to be recorded. You can select a&#x20;

* Chrome Tab
* Window
* Entire Screen.&#x20;

For instance, click the "**Entire Screen**" option, enable "**system audio**" recording, and hit "**Share**". This starts the recording. You can keep recording for up to 15 minutes.&#x20;

Also, you can include a **video message** in the recording using **your mic and webcam**. For this, enable them from the extension itself (before the recording starts) or from the control toolbar that shows after you've started the recording session.
{% endstep %}

{% step %}

#### End Recording

Hit the "**End recording**" button from the control toolbar to stop recording.&#x20;
{% endstep %}
{% endstepper %}

With the control toolbar that shows after you start recording, you can:

1. **Drag and drop** the toolbar anywhere on your screen.
2. **Finish recording.**
3. **Pause/resume** recording.
4. See the **timer** running.
5. **Annotate** your video with drawing tools.
6. **Blur elements** with the "**toggle blur tool**" option to hide sensitive information.
7. **Add video messages** with the recording (with mic and webcam enabled).

{% hint style="info" %}
You can use the "**Download Video**" button to instantly download it on your device.
{% endhint %}

Once you're good with filling in the details, you can upload the report to your BetterBugs.io account using the "**Create Session**" button at the top right. Use the report link to instantly share it with others.&#x20;

With every bug report, BetterBugs.io auto-attaches [technical details](/product-features/developer-tools), such as:&#x20;

* System info
* Console logs
* Network requests
* Backend (event logs from Sentry)
* Steps (Page navigation steps)
* Metadata (Custom)
* Application Local State

You can also send the complete bug report to your integrated [project management tools and issue trackers](/product-features/integrations).&#x20;


# Add voice notes

Add voice or video messages to your screen recordings.

BetterBugs.io provides support for your microphone and webcam. Using them, you can add voice notes or video messages to the screen recording while creating your bug report.

To enable your microphone and webcam:

<div data-with-frame="true"><figure><img src="/files/xJVeHSFxYPQrMbXmUde3" alt="" width="563"><figcaption><p>BetterBugs.io Support for Mic and Webcam Overlay</p></figcaption></figure></div>

1. Open the extension.
2. Click the "**Record Screen**" dropdown.
3. Select your **microphone** and **camera** from the dropdowns.

{% hint style="info" %}
You can also **enable/disable** your **microphone** and **camera** from the video recording control tool. The toolbar shows when you start a screen recording session.
{% endhint %}


# Rewind

Get the last two minutes of all your browser activities as a video rewind session to auto-capture issues that just happened.

### What is “Rewind”?

Rewind enables you to capture any issues or bugs that have just happened. You can replay your last two-minute activity as a rewind session, on the website or domain for which the BetterBugs.io “**Rewind**” is enabled.&#x20;

The “**Rewind**” feature enabled on BetterBugs.io is like having a friend who keeps watching over your shoulder. You can refer your friend whenever you need help replaying the last two minutes of your activity.

[Get started](/product-features/rewind/getting-started-with-rewind) with Rewind.

### How Does the “Rewind” Feature Work in BetterBugs.io?

In a typical scenario while working with software, you spot a bug, recreate it, and then take a screenshot or record a video to document it and share it to get it fixed.&#x20;

Once you enable the “**Rewind**” feature on any website, you don’t have to worry about recording or capturing bugs manually when you spot them.  With one click, you can get the last two minutes of all the activities, and you can watch the rewind session without the hassles of recreating it and then recording or documenting it before sending it to engineers for debugging.

Just as with taking a screenshot or recording a video, all the technical details and logs from the devtools also get automatically captured along with the rewind video session.&#x20;

You can add the details for the issue and upload it as a comprehensive bug report to your BetterBugs.io account. Then, you can instantly share it whenever and wherever you need to with the generated report link.

### Frequently asked questions (FAQs)

<details>

<summary>How is “Rewind” different from Screen Recording?</summary>

Screen recording requires you to start and stop it manually, but “Rewind” only needs to be enabled once and gives you the last 2 minutes of activity with a single click. It is especially useful when you encounter a bug while browsing and want to report it right away. With screen recording, you can also capture audio, but not with “Rewind”.

</details>

<details>

<summary>Is “Rewind” auto-enabled whenever I visit a new website?</summary>

No. You need to enable “Rewind” manually from the extension if you visit any new website and want to use it with that specific site.

</details>

<details>

<summary>Are there any performance issues with my Chrome browser when I use “Rewind”?</summary>

There are safeguards in place to make sure that there are no performance issues when you use the “Rewind” feature on a majority of websites. However, if you enable it for websites with complex UI elements or memory-intensive animations, your browser performance may be slightly affected.

</details>


# Getting started with Rewind

Rewind allows you to the get the last two minute session recording of the browser activities. Its perfect for getting the visual proof of issues that just happened.

### How to Enable Rewind on BetterBugs.io for the First Time

Here's how to enable Rewind for the extension:

<div data-with-frame="true"><figure><img src="/files/KA9E8XgkTbV0dr2eIUga" alt="" width="563"><figcaption><p>BetterBugs.io Rewind Last Minute: Active Mode</p></figcaption></figure></div>

{% stepper %}
{% step %}

#### Open Extension Settings&#x20;

Open the extension and click the **three vertical dots (⋮)** icon on the top left (just beside the home icon). Now, click "**Extension Settings**".
{% endstep %}

{% step %}

#### Enable Rewind Centrally

Scroll down to the "**Enable Rewind**" section and **turn on the toggle switch**. This centrally enables the Rewind feature of the extension.
{% endstep %}

{% step %}

#### Turn On for the Website using "Rewind Last Minute"&#x20;

Go back to the extension and enable the “**Rewind Last Minute**” to enable it for the website or domain that is currently open.&#x20;
{% endstep %}

{% step %}

#### Using Rewind

To get an instant website session recording, click once on the “**Rewind Last Minute**” button.
{% endstep %}
{% endstepper %}

You're good to go.&#x20;

The Rewind session recording gets captured instantly. You can also crop the video by dragging the green timeline switches from both ends of the video snippet and selecting the desired timeline for it.&#x20;

{% hint style="info" %}
**Important Note**: The rewind session should be a minimum of 10 seconds, otherwise the upload will fail.
{% endhint %}

Now, you can add details for it and upload the report to the BetterBugs.io account. It's good for sharing now.

### Other Extension Settings for Rewind

Here are the options available in the settings menu of BetterBugs.io:

* **Rewind**: It’s the master toggle switch to enable or disable the “**Rewind**” feature across your extension.
* **Blocked websites :** Contains a list of websites for which Rewind is disabled by defaul&#x74;**.**
* **Always allow websites**: It contains the list of websites with the “**Rewind**” feature enabled. Also, you can manually enter the web address and add it to the list of allowed websites with “Rewind” enabled.

### Frequently Asked Questions (FAQs)

<details>

<summary>Can I disable “Rewind” for all websites?</summary>

Yes, you can disable “Rewind” for all websites from the settings menu anytime you want. Just go to the settings menu and click on the toggle switch to disable it for the entire application and all websites.

</details>

<details>

<summary>Where and how is the data stored for the “Replay” feature?</summary>

The session data is temporarily stored in the local storage of your browser at first. The existing data gets replaced every 2 minutes with the new data. Once you create a replay session and upload it to your BetterBugs account, it gets stored on our servers in an encrypted format. You can then access and share it using the generated report link

</details>

<details>

<summary>Does “Rewind” support capturing GIF animations on a website?</summary>

Yes. “Rewind” supports GIF capturing in the rewind sessions.

</details>

<details>

<summary>Does “Rewind” support capturing iFrames and Canvas HTML elements?</summary>

No. Our goal is to provide a seamless user experience without any jitters or system lags while you use the extension. Since iFrames and Canvas are heavy HTML elements, they are not captured in the “Rewind” session. If there are such elements in the replay being captured, they will get blacked out from the video footage.

</details>

<details>

<summary>Is the video playing inside the browser captured with “Rewind”?</summary>

No. The video being played in the capture will be blacked out. For instance, if you try to use “Rewind” with YouTube, the videos will not get captured and appear as a black box.

</details>


# Privacy

Privacy is the number one priority for BetterBugs.io while dealing with your data. Our engineers ensure that your data is safeguarded and encrypted on our servers. Even while capturing with the “**Rewind**” features, we have ensured that:

* No sensitive data is captured like email, password, mobile numbers, etc.
* Session events are uploaded to BetterBugs.io servers only when you do it manually.
* You can change the privacy of the session from public to private.
* Rewind is completely disabled for sites that have sensitive information like banking websites, etc.

**Read More**: [BetterBugs.io | Security and Compliance](/product-features/security-and-compliance)

{% hint style="info" %}
**Note**: “**Rewind**” will always be disabled by default whenever you visit a new website. Until and unless you turn it on explicitly, nothing gets captured.
{% endhint %}


# Performance

Quick overview on how Rewind works behind the scenes and what's the impact on your system performance while using it.

### How does Rewind Work Behind the Scenes? &#x20;

The Rewind feature in BetterBugs.io functions using the Document Object Model (DOM) of a website. Rewind captures HTML snapshots of the DOM, which then gets stored in your browser's local storage. These snapshots get updated every two minutes with the latest ones, thereby working in the background to keep your local storage updated with the latest HTML snapshots.&#x20;

If you come across an issue while running your app or a website in the browser and need a video of what just happened, these HTML snapshots are combined to create a screen recording, allowing you to generate a video of the last two minutes of browser activity.&#x20;

{% hint style="success" %}
**Note**: By default, Rewind is auto-disabled for all websites.
{% endhint %}

### What are Performance Considerations while Using Rewind on BetterBugs.io?

Capturing HTML snapshots, saving them to local memory, and updating them regularly are in fact memory-intensive processes for the browser. However, we've made sure there are no performance hiccups in your browser while using the Rewind feature for most websites.&#x20;

But, if you enable Rewind on memory-intensive sites — like those with lots of animations, frequent data updates, or high-volume exchanges such as stock markets and crypto platforms — your browser's performance might be affected due to constant DOM snapshotting.

However, if your system is powerful enough with decent memory capacity, you can use Rewind with minimal performance issues on heavier websites too.

### How to Manually Add a Website for “Rewind” from Extension Settings

To add a website manually to the list of websites with Rewind enabled:

{% stepper %}
{% step %}

#### Open Extension Settings

Open the extension and click the **three vertical dots (⋮)** icon on the top left (just beside the home icon). Now, click "**Extension Settings**".
{% endstep %}

{% step %}

#### Add a Website to Allow For Rewind

Scroll down to the "**Enable Rewind**" section. In the "**Always allow websites**" box, enter the website address or domain and hit "**Add**".
{% endstep %}
{% endstepper %}

Now, the Rewind feature is enabled for the entered website.

{% hint style="info" %}
**Note**: You can enable the "Rewind" feature for **up to three domains/websites**.&#x20;

If you already have three websites in the list using the Rewind features, you’ll have to remove a website from the list of added websites and then add a new one.
{% endhint %}


# Recording links

Share recording links with others to get the complete context and information on what went wrong — no more back and forth when your users report an issue.

### What are Recording Links?

> Recording links are the screen recording URLs that you can instantly generate from the BetterBugs.io dashboard and share with your customers to collect feedback as screen recording sessions.&#x20;

Your customers can paste the recording link in their browser that enables them record their screen to capture bugs or issues that they’re facing.&#x20;

After screen recording, the customer can add:

* **Email\*** -> User email.
* **Title** -> Concise title (e.g., Payment Issue, Can't Add Items to the Cart, or any others)
* **Description** -> A quick summary of what went wrong.&#x20;

The customer can instantly **submit the bug report/feedback that directly lands in your BetterBugs.io Project!**

**The best part?**&#x20;

> Customers DO NOT have to download or install anything to use recording links, and it works on all desktop browsers! They can just paste the recording link in their browser, record the screen on which they are facing issues, submit, and voilà!&#x20;

{% hint style="success" %}
Both technical and non-technical users can easily use it without any hassles or setup.
{% endhint %}

It’s perfect for you to get the:

* Screen recording of the issue.
* Full context of what went wrong.
* Technical details of issues directly from end users and customers.&#x20;

You and your team can use the report for debugging purposes.

<a href="/pages/l3NsHT0qU5vKZmRa28A2" class="button primary">Start using recording links</a>

### How does the Recording Link Work in BetterBugs.io: Step-by-Step Process Breakdown&#x20;

{% hint style="success" %}
No downloads or installations are required for your customers to use recording links.&#x20;
{% endhint %}

1. **Create** **a new recording link** for a project from your BetterBugs.io dashboard.
2. **Share the URL** with your users *via* email, support chat, or any customer support software that you might be using, such as Zendesk, Intercom, Hiver, or any others.
3. The customer/end-user can: Paste the link in any web browser **->** Screen record the issue **->** Add other details -> Submit.

The submitted report gets added to your BetterBugs.io project. You can access the complete report, analyze it, and work on the next steps.

### What are the Key Benefits of Recording Links: Use Cases

You can use the BetterBugs.io recording links in your software development, QA, and customer support workflows, such as for getting:

* **Screen recording from customers**: Getting visual bug reports directly from your end users.
* **Technical details:** Getting technical information (environment, console logs, network requests) about the issues.&#x20;
* **Full context:** Getting complete context, visuals, and technical information of issues (for debugging) from external users.
* **Specific scenarios:** Developers can get info about the specific scenarios, setups, or environments in which an issue occurs.
* **Issue repro steps:** You can trace the exact steps that triggered an issue.
* **QA overall:** Quality assurance teams can use it to share visual feedback and technical information with other team members during software testing procedures.

### How does Recording Links Improve Your Customer Support Services and Feedback Processes?

1. **No extra steps or downloads are required for end users** — Users can start recording right off the bat by opening the link and hitting the “**Start the recording**” button.
2. **Easy to use and intuitive interface** — After recording the bug, the reporter can add their email, provide a title, and describe the issue.
3. **Quick sharing** — Users can then “**Submit the bug**” to send the visual recording as a bug report back to you for debugging purposes.


# Using recording links

Generate recording links using BetterBugs, share across various platforms, and get screen recordings of bugs from your users without any installation.

{% hint style="success" icon="keyboard-brightness" %}
**QUICK NOTE**

You can generate two types of Recording Links with BetterBugs.io

* **One time usage**: You can generate a recording link that can only be used just once.&#x20;
* **Reusable** ♻ : You can generate a recording link that can be used multiple times:&#x20;
  * You can set number of times it can be used&#x20;
  * Specify the expiry date for it.&#x20;
    {% endhint %}

### How to Generate a Recording Link using BetterBugs.io: One-Time Usage

{% 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 on the “**+ New Link**” green button on the right side.&#x20;
{% endstep %}

{% step %}

#### Disable the Reusable Option

Disable the "**Reusable**" option to create link for single usage.
{% 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)
  {% 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 %}

{% hint style="success" icon="party-horn" %}
Okay! The single usage recording link is ready to share with others.
{% endhint %}

### How to Generate a Recording Link using BetterBugs.io: Reusable ♻

{% 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 on the “**+ New Link**” green button on the right side.&#x20;
{% endstep %}

{% step %}

#### Enable the Reusable Option (Set by Default)

Enable the "**Reusable**" option.
{% 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).
* **Expiry Date ->** Set an expiry date for the link.
* **Number of times the link can be used ->** Specify the number of times the link can be reused.
  {% endstep %}

{% step %}

#### Hit “Create Link”

Hit the “**Create link**” button. This creates a new reusable recording link with the “**Ready to Record**” tag.
{% endstep %}
{% endstepper %}

{% hint style="success" icon="party-horn" %}
Okay! The reusable ♻ recording link is ready to share with your customers.
{% endhint %}

### How to Share the Recording Link with Others?

You can share the copied link with others using:

* **Email** — You can send an email directly to the user with a personal note and message that also includes the “**Recording Link**” that you just created.
* **Customer forums, chats, or contact forms** — Share the link with the user on your customer forums, the integrated chat on your website, or contact forms.
* **Community channels** — If a customer connects with you using community channels, such as Slack, Discord, or any other, you can share the link through DMs.
* **Customer support software** — You can also share the link on your customer support systems or tickets, like Zendesk, Hiver, or any others, to get the screen recording of the issue.

### How to Use the Recording Link (for customers and end users)?

Here’s how customers can use the recording link to share issues:

{% stepper %}
{% step %}

#### Open the Recording Link

As a customer, paste the shared “**Recording link**” in your browser.
{% endstep %}

{% step %}

#### Enable Microphone (optional) and Start Recording

From the pop-up window, enable your microphone if required. Hit the “**Start recording**” button to start.
{% endstep %}

{% step %}

#### Select What to Record: Tab, Window, or Entire Screen

Select what to record and click “**Share**” to start the recording.
{% endstep %}

{% step %}

#### Stop Recording

Once you are good with your recording, hit the “**Stop sharing**” button at the top (or press the “**Stop recording**” button from the Recorder UI).&#x20;
{% endstep %}

{% step %}

#### Open the Recording Link Tab and Add Details

Open the Recording Link tab and add the following details:

* **Email\*** — Enter your email ID as a reporter. It’s a required field.
* **Title** — Bug title (e.g., login issue)
* **Description** — Describe the issue and specific details, if any.
  {% endstep %}

{% step %}

#### Submit

Finally, hit the “**Submit recording**” button. A success message appears saying your bug report has been created and submitted.&#x20;

You’re good to go.
{% endstep %}
{% endstepper %}

### How to Access the Submitted Recording on BetterBugs.io?

You can access the submitted recording just like any other BetterBugs.io report.&#x20;

In your BetterBugs.io workspace, open the project for which the recording has been submitted. You’ll find a newly created report listed/thumnailed along with the other reports in the project. &#x20;

{% hint style="info" %}
NOTE: In the thumbnail view, the report created with a “**recording link**” will have a “**Recording Link**” tag marked at the top. In the project dashboard, you can also filter the reporting link sessions by clicking [**Filters**](/developer-guide-old/betterbugs-web-sdk) **> Creation Source > Recording Link**.
{% endhint %}

You can share the issue with others or with the integrated [project management tools and issue trackers](/product-features/integrations), just like any other bug report on BetterBugs.io.


# Recording links with developer logs

Connect BetterBugs with your website and use recording links to get developer logs (console, network, warnings, and others) for the issue, automatically attached to the recording.

### Create Recording URLs from Your Own Domain

> You can register your own domain within BetterBugs.io for creating recording URLs as recording links. Once you add and configure your website/domain with BetterBugs' “**Recording Links**” feature, you can send recording links from your domain to others.&#x20;

Using the recording URL, **users can record their screen + send auto-attached console logs, network requests, and other developer tools information back to you**.&#x20;

There’s no back-and-forth for missing info, and developers can start debugging right off the bat using the comprehensive report.

It’s perfect for getting the visual proof, complete context, and technical details all bundled within the same report. Both technical and non-technical users can easily create and submit bit-perfect bug reports back to you.

<a href="/pages/wfvccD3PCPfvozFySM6C" class="button primary">Configure your own domain</a>


# Intercom Fin for customer support

Intercom Fin AI Agent integration with BetterBugs enables you to auto-request screen recording from customers to gather complete context and technical details of issues.

### What do you need to use this feature

To use this feature, you need:&#x20;

1. A [paid plan for BetterBugs](/dashboard/my-account/plans-and-usage) (**Team** or **Enterprise**)
2. [BetterBugs Intercom app](https://www.intercom.com/app-store/?app_package_code=betterbugs) installed in your Intercom Workspace
3. Fin AI Agent within Intercom to add custom workflow steps
4. Web Channel in Fin Agent (customer facing web chat interface)

### How does the Intercom Fin AI integration work

First, you need to [integrate BetterBugs and Intercom](/product-features/integrations/intercom). Once you’ve connected, the BetterBugs Intercom app can be plugged in with your Fin AI Agent workflow to handle customer queries.

Now, when a customer sends any message on your Fin-based support chat interface, based on the query or the issue that the customer faces, you can add a step within Fin Agent to auto-request a screen recording though a recording link (powered by **BetterBugs**).&#x20;

Once the user submits the screen recording, you can get the visual proof, complete context, and technical details of the user issue as a perfect bug report within your BetterBugs dashboard. And this enables Fin to gather maximum context and information in an automated way before the conversation gets transferred to a human support team member for further analysis and resolution.

{% hint style="info" %}
**IMPORTANT**: For getting auto-attached technical details (console logs, network request, and others) of customer issues along with the screen recording, you’ll have to [configure Recording links for your domain](/product-features/recording-links/recording-links-with-developer-logs).
{% endhint %}

### Steps to add BetterBugs Intercom app to your Fin workflow

Here’re the steps to create a workflow from scratch within Fin AI for BetterBugs Intercom app integration. You can follow similar steps to add the app to your existing workflow.

{% stepper %}
{% step %}

#### Open Fin AI Agent

In your Intercom app, click “**Fin AI Agent**”.
{% endstep %}

{% step %}

#### Create a new workflow

To create a new workflow, click **Workflows** > **+ New workflow** > **Create from scratch**

<div data-with-frame="true"><figure><img src="/files/uatT84vsDL1i3UZ2YWZp" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

#### Select a trigger

For instance, select “**When customer sends their first message**”.

<div data-with-frame="true"><figure><img src="/files/Xb2Ho1ZiUhJxQjsuuqyd" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

#### Set channel as web

For Channels, select “**Web**” (currently, iOS and Android not supported).

<div data-with-frame="true"><figure><img src="/files/ah0ijJTIjpKnBVR4uYCm" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

#### Configure path(s) and select “Send an app”

Add custom messages and set rules for the path(s). Now, for the reply action, select “**Send an app**”.

<div data-with-frame="true"><figure><img src="/files/NK2MVIca2FvNBPqYDgMN" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

#### Add BetterBugs app

Now, select the BetterBugs app from the list of options.

<div data-with-frame="true"><figure><img src="/files/Fv7HMS87ZHL11gkR9VdU" alt=""><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

#### Click “Configure”

{% hint style="info" %}
**NOTE**: This option will only show if you’ve already [set custom domain(s) for your recording links](/product-features/recording-links/recording-links-with-developer-logs) (to capture technical logs with the recording).
{% endhint %}

Next, click “**Configure**” to select a domain for capturing technical details.

<div data-with-frame="true"><figure><img src="/files/vrhMhbgo0ZzLcoSSNl1Y" alt="" width="545"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}

#### Select domain

Select a domain for your custom recording link.

<figure><img src="/files/wCqP7rsuI3PWfy8RfhjI" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### Finalize

This successfully adds the BetterBugs app to the Fin AI. Users can now automatically receive a request to “**Start Recording**” (coming from the BetterBugs app).

<figure><img src="/files/d4z1Z6sFd5hireG87Zbc" alt=""><figcaption></figcaption></figure>

From here, you can configure the next steps.
{% endstep %}
{% endstepper %}


# Integrations

Integrate BetterBugs with your project management, bug tracking, collaboration, and error monitoring tools.

### Integrate Seamlessly with Your Preferred Project Tools

You can seamlessly connect your preferred productivity tools with BetterBugs.io in just a few clicks.&#x20;

> Once you connect BetterBugs.io with your PM tools, you can share the bug report with the respective tools in the exact format and fields for specific tools; [**manually**](/dashboard/workspace-settings/integrations/project-integration) or using [**automation**](/dashboard/workspace-settings/integrations/project-integration/project-automation).

### Available Integrations

#### PM Tools & Issue Tracking

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Azure Boards</strong></td><td>Share bug reports instantly to Azure Boards as Azure work items.</td><td><a href="/files/Ucx0KezgBBp3YaxDHNJv">/files/Ucx0KezgBBp3YaxDHNJv</a></td><td><a href="/pages/1k9y7uTifILxZEqysTis">/pages/1k9y7uTifILxZEqysTis</a></td></tr><tr><td><strong>Trello</strong></td><td>Create Trello Cards for your workspaces with links for complete bug reports.</td><td><a href="/files/d1zpugrhCF4kJfJW5FDD">/files/d1zpugrhCF4kJfJW5FDD</a></td><td><a href="/pages/xDZBLarPE3d6neezkyhM">/pages/xDZBLarPE3d6neezkyhM</a></td></tr><tr><td><strong>Asana</strong></td><td>Create bug reports and share as tasks to your Asana projects</td><td><a href="/files/a2RAhhz2JtacPEKV8ehM">/files/a2RAhhz2JtacPEKV8ehM</a></td><td><a href="/pages/gVNCBJNFSPCQfd2AJZz6">/pages/gVNCBJNFSPCQfd2AJZz6</a></td></tr><tr><td><strong>Linear</strong></td><td>Share bug reports as Linear issues in your workspace.</td><td><a href="/files/VEGUw0ZdJffggJSS10oc">/files/VEGUw0ZdJffggJSS10oc</a></td><td><a href="/pages/fB2RRsdcui5HNBijIoqF">/pages/fB2RRsdcui5HNBijIoqF</a></td></tr><tr><td><strong>ClickUp</strong></td><td>Capture bugs and share them instantly as ClickUp tasks.</td><td><a href="/files/hBNDLSFj2SwrRhje4iDI">/files/hBNDLSFj2SwrRhje4iDI</a></td><td><a href="/pages/0yKWjUUBFj6fODNe66gp">/pages/0yKWjUUBFj6fODNe66gp</a></td></tr><tr><td><strong>Jira</strong></td><td>Create bug reports to share as Jira issues. </td><td><a href="/files/fD2etywKZSTKPSgcbeJQ">/files/fD2etywKZSTKPSgcbeJQ</a></td><td><a href="/pages/OEGpCRuvLTd8nablyoQT">/pages/OEGpCRuvLTd8nablyoQT</a></td></tr><tr><td><strong>Notion</strong></td><td>Create and send bug reports instantly to your Notion project as tasks.</td><td><a href="/files/s25ahQi7FVHRC5CqPS4D">/files/s25ahQi7FVHRC5CqPS4D</a></td><td><a href="/pages/AFyvLwWOXsTFPFcUxGjI">/pages/AFyvLwWOXsTFPFcUxGjI</a></td></tr><tr><td><strong>Basecamp</strong></td><td>Add perfect bug reports as tasks to your Basecamp project.</td><td><a href="/files/gqBIACaIFW6oKZEyT0Df">/files/gqBIACaIFW6oKZEyT0Df</a></td><td><a href="/pages/UEo01XC6lGlHQN7FhYqL">/pages/UEo01XC6lGlHQN7FhYqL</a></td></tr><tr><td><strong>Zoho Bug Tracker</strong></td><td>Share bit-perfect bug reports as tasks to your Zoho project.</td><td><a href="/files/UudwpIwiR9sMS6mByR4b">/files/UudwpIwiR9sMS6mByR4b</a></td><td><a href="/pages/PEbDA82AjGzbPtoIPphe">/pages/PEbDA82AjGzbPtoIPphe</a></td></tr><tr><td><strong>Bugasura</strong></td><td>Share perfect bug reports to Bugasura with all the context and details you need for debugging.</td><td><a href="/files/D2s0NyCArtCFW14ewLCH">/files/D2s0NyCArtCFW14ewLCH</a></td><td><a href="/pages/KNPXUPaMpCL1NB4ml0iY">/pages/KNPXUPaMpCL1NB4ml0iY</a></td></tr><tr><td><strong>ProofHub</strong></td><td>Create bug reports and share directly to your ProofHub project.</td><td><a href="/files/0w4gIkKi3PBanPumbhcU">/files/0w4gIkKi3PBanPumbhcU</a></td><td><a href="/pages/FA40AytYDcnZBYKFWTMy">/pages/FA40AytYDcnZBYKFWTMy</a></td></tr></tbody></table>

#### Collaboration & Communication

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>MS Teams</strong></td><td>Share bug reports as messages to your Teams channels.</td><td><a href="/files/Fp9kg02xCrdXSrTTe3wr">/files/Fp9kg02xCrdXSrTTe3wr</a></td><td><a href="/pages/Jkb5BTPiVEs4dE7Nk0wj">/pages/Jkb5BTPiVEs4dE7Nk0wj</a></td></tr><tr><td><strong>Slack</strong></td><td>Send instant bug reports as messages to your slack channels.</td><td><a href="/files/fWiw8g38rqLlGSoc9tC8">/files/fWiw8g38rqLlGSoc9tC8</a></td><td><a href="/pages/ksz246wvuVVsfbZhF5Ih">/pages/ksz246wvuVVsfbZhF5Ih</a></td></tr></tbody></table>

#### Customer Support&#x20;

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="image">Cover image</th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Intercom</strong></td><td>Request screen recordings from customers to resolve issues 10X faster.</td><td><a href="/files/jipQLDjj9bHbRHfobkCY">/files/jipQLDjj9bHbRHfobkCY</a></td><td><a href="/pages/vFDcoByWMZcACFMzzMMI">/pages/vFDcoByWMZcACFMzzMMI</a></td></tr></tbody></table>

#### Error Tracking, Performance Monitoring, & Analysis

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Sentry</strong></td><td>Get all event logs and error stack traces from Sentry within your bug report.</td><td><a href="/files/5Wys1P2yQkRZUJi9UDxa">/files/5Wys1P2yQkRZUJi9UDxa</a></td><td><a href="/pages/DNUTF0eltISooK8gGICy">/pages/DNUTF0eltISooK8gGICy</a></td></tr><tr><td><strong>LogRocket</strong></td><td>Get LogRocket session links auto-attached to your bug reports.</td><td><a href="/files/QMy32awMKnhrg9ihRzQx">/files/QMy32awMKnhrg9ihRzQx</a></td><td><a href="/pages/6mT8rfRjv7LxwvGlgbxh">/pages/6mT8rfRjv7LxwvGlgbxh</a></td></tr><tr><td><strong>Fullstory</strong></td><td>Access the Fullstory session link instantly from within your bug report.</td><td><a href="/files/K8RErkBZ68ZN9JCFaTWR">/files/K8RErkBZ68ZN9JCFaTWR</a></td><td><a href="/pages/y2Wxz2kIdrpoZygWK73r">/pages/y2Wxz2kIdrpoZygWK73r</a></td></tr></tbody></table>

#### Version Control & Development Tools

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>GitHub</strong></td><td>Raise issues directly on GitHub repos with link to detailed bug reports.</td><td><a href="/files/rVdFVBS8P59lUCVXfrsa">/files/rVdFVBS8P59lUCVXfrsa</a></td><td><a href="/pages/UWmZVbWq2xwpvlfUFLae">/pages/UWmZVbWq2xwpvlfUFLae</a></td></tr><tr><td><strong>GitLab</strong></td><td>Share complete bug reports as issues directly to your GitLab issue boards.</td><td><a href="/files/5SgtSA7477rOpV6NxUcV">/files/5SgtSA7477rOpV6NxUcV</a></td><td><a href="/pages/IhHfHqDjI3now5n9XCn7">/pages/IhHfHqDjI3now5n9XCn7</a></td></tr></tbody></table>

#### Other Project Tools

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Webhook</strong></td><td>Integrate your preferred project tools and issue trackers using a webhook.</td><td><a href="/files/7tNQ0RnYrlERVYr5wiiQ">/files/7tNQ0RnYrlERVYr5wiiQ</a></td><td><a href="/pages/YfXsrDriRgKAG1dWkOPL">/pages/YfXsrDriRgKAG1dWkOPL</a></td></tr></tbody></table>

### About BetterBugs.io integrations

BetterBugs.io acts as an abstract automation layer for your bug-reporting workflows, making them blazing fast to create and share with multiple tools. This enables software team members, especially the QA Engineers, not to worry about posting bug reports manually to their project management tools, making the bug reporting process up to 10X faster.

Developers can debug the reported bug or issue with all the details they need from the automatically attached dev tools information and with custom metadata.&#x20;

Plus, the BetterBugs AI assistant allows them to get auto-generated issue repro steps. Moreover, devs can reach the root cause of issues faster with AI-powered impact analysis and bug diagnosis in seconds.

You can access the report with all the [technical details](/product-features/developer-tools) by visiting the report link and logging into the BetterBugs [dashboard](/dashboard/overview).


# Slack

Send instant bug reports as messages to your channels.

### BetterBugs integration with Slack

You can connect BetterBugs to your Slack tool to send detailed visual bug reports straight to your Slack channel. It's super fast, and there's no need to copy-paste issues. With just a few clicks, your bug report is posted in your Slack workspace as a link.

### How to Integrate BetterBugs Project with Slack: Step-by-Step

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FpnnrdVSWRVqxX2rocbBE%2F01-Integrate-BetterBugs-Project-with-Slack.mp4?alt=media&token=80fd5d2a-6db4-4461-a18b-d2d6f3a90038>" %}
How to Integrate BetterBugs Project with Slack: Video Demo
{% endembed %}

{% hint style="info" %}
Here, we've covered the steps to integrate a single BetterBugs project (within your BetterBugs Workspace) with Slack. You can also integrate the complete BetterBugs Workspace in one go (that includes all the projects within your Workspace) to Slack or any other project tool. [**Check out the steps for Workspace Integration**](/dashboard/workspace-settings/integrations/workspace-integration)**.**
{% endhint %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side of app screen. Now, click the **gear icon** to open **Workspace Settings** > **Integrations**.
{% endstep %}

{% step %}

#### Search Slack

In the **Integrations** tab, search for **Linear** and click to open the **Linear** card.
{% endstep %}

{% step %}

#### Turn off workspace-wide integration

Toggle off the "**All Projects**" option and hit "**Continue**". You should see the "**Manage per project**" option now.

{% hint style="info" %}
By default, its turned on for workspace level integration. For project-wise integration, you need to disable "**All Projects**".
{% endhint %}
{% endstep %}

{% step %}

#### Select a BetterBugs project to integrate and hit "Connect"

Select a project from the projects name list (that's within your Workspace). From the "**Actions**" column, hit "**Connect**" for that project.
{% endstep %}

{% step %}

#### **Authorize BetterBugs.io for Slack**

Select Slack Workspace you want to integrate with BetterBugs and click “**Accept**” to authorize it.

{% hint style="warning" %}
**IMPORTANT NOTE**&#x20;

If you're on a **free plan**, Steps 6 and 7 are **NOT REQUIRED**. **You can just SKIP** to "*How to Create Bug Report on Slack Channel using BetterBugs*" section on this page.

**FOR PAID PLANS (Teams and Enterprise)**

Steps 6 and 7 enables you to explicitly choose between:

* **Manual Ticket Creation (Default)**: This means for sharing a bug report to Slack, you'd need to manually select the channel your Slack workspace. Its a **FREE FEATURE**.
* **Automatic Ticket Creation:** This means for sharing a bug report to Slack, you can configure BetterBugs to auto-populate the channel name for Slack workspace. Its a **PAID FEATURE**.
  {% endhint %}
  {% endstep %}

{% step %}

#### Optional: Choose your preferred method for creating tickets: Manually or Automatically

From the "**Forward Bug Reports**" dropdown, select your preferred method for creating tickets in your project tool:

* **Manually**: Enables you to **create tickets manually**. *Here, we've selected the manual method to showcase project integration steps.*
* **Automatically**: Enables you to [**create tickets with automation**](/dashboard/workspace-settings/integrations/project-integration/project-automation).
  {% endstep %}

{% step %}

#### Optional: Select "Manually" and Connect

Finally, select "**Manually**" from the "**Forward Bug Reports**" dropdown and hit "**Connect**".
{% endstep %}
{% endstepper %}

Okay! You're good to go with the Project level integration for Slack. Now, you can create detailed reports and share them as Slack messages directly from your browser with a few clicks.

### How to Create Bug Report (as Message) on Slack Channel using BetterBugs

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FJaHv2QQaQwGZMZdqLyAf%2F02-Create-Bug-Report-and-Send-Instantly-as-Message-on-Slack.mp4?alt=media&token=c7081baf-72f1-4301-b771-eb4b5d8f1b80>" %}
How to Create Bug Report (as Message) on Slack Channel using BetterBugs: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Capture the Bug and Add Bug Details

Use the BetterBugs extension to capture the bug and add details for it. You can add the details (*Title + Quick Summary + Steps to Reproduce*) manually in the description area manually or automatically with the "**AI**" toggle.
{% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project Integrated with Slack

From the two dropdowns above the description area, select:

* **BetterBugs Workspace**
* **BetterBugs Project** (that you integrated with Slack)
  {% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select Slack Message

Open "**+ Send to your PM Tool**" dropdown and select "**Slack Message**".
{% endstep %}

{% step %}

#### **Select Your Slack Channel and Hit "Next"**

Select the Slack channel you want the message to send and click "**Next**".
{% endstep %}

{% step %}

#### Create Session

From the top right, click "**Create Session**".
{% endstep %}
{% endstepper %}

There you go!

This instantly posts a message on your Slack channel packed with all the bug details and a link to the **complete bug report** with [**developer tools info**](/product-features/developer-tools).

* You can access the Slack message from the BetterBugs report from the "[**Comments & Activities**](/product-features/comments-activities)" tab located below the bug description area.
* Use the report link in your Slack message to access the complete report on BetterBugs.

### How to Send Existing BetterBugs Report to Slack Channel as a Message

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FcNkX5kUfHpheCAfFJhxy%2F03-Send-an-Existing-BetterBugs-Report-as-Slack-Message.mp4?alt=media&token=94719aa6-b804-462f-8650-4efe047eaef2>" %}
How to Send an Existing BetterBugs Report as Slack Channel as a Message: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open a Bug Report

Login to BetterBugs and open a project report to share on Slack.
{% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select Slack Message

From the top-right of the report screen, open "**+ Send to your PM Tool**" dropdown and select "**Slack Message**".
{% endstep %}

{% step %}

#### Select Your Slack Channel and Click "Create Task"

Select the Slack channel you want the message to send and click "**Create Task**".
{% endstep %}
{% endstepper %}

This instantly posts a message on your Slack channel packed with all the bug details and a link to the **complete bug report** with [**developer tools info**](/product-features/developer-tools).

* You can access the Slack message from the BetterBugs report from the "[**Comments & Activities**](/product-features/comments-activities)" tab located below the bug description area.
* Use the report link in your Slack message to access the complete report on BetterBugs.

### How to Disconnect BetterBugs Project from Slack

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2F3MvFS8ylt9eSxT5pWFOD%2F04-Disconnect-BetterBugs-Project-from-Slack.mp4?alt=media&token=2fe9e2d1-a7d2-44a7-9fd9-e514c2ec9974>" %}
How to Disconnect BetterBugs Project from Slack: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open Project Settings

Use the **Gear Icon** beside the **BetterBugs Project** **Name** to open **Project Settings**.
{% endstep %}

{% step %}

#### Go to Workspace Settings > Integrations

Navigate to **Workspace Settings** > **Integrations**
{% endstep %}

{% step %}

#### Search Slack

In the **Integrations** tab, search for **Slack** and click to open the **Slack** card.
{% endstep %}

{% step %}

#### Select BetterBugs project to disconnect and click (⋮) under "Actions"

In the Slack card, select the BetterBugs project (from the Project list) to disconnect. For the project, click vertical dots (**⋮**) under the **Actions** column.
{% endstep %}

{% step %}

#### Disconnect and Confirm Action

To confirm action, click "**Disconnect**" and "**Continue**".
{% endstep %}
{% endstepper %}

This instantly disconnects Slack from the selected BetterBugs project.


# Jira

Create bug reports to share as Jira issues to your projects.

### BetterBugs integration with Jira

You can raise Jira tickets for all your issues directly from your browser. Include comprehensive details in a unified bug report, alongside Jira-specific information.&#x20;

Authorizing BetterBugs for Jira enables BetterBugs to fetch the configured Jira template for you to add details like Project, Issue Type, Assignee, etc. Fill in the details and create Jira tickets right away, complete with a link to access the full bug report.

### How to Integrate BetterBugs Project with Jira: Step-by-Step

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FBj5Hq4L9Ay6ElBRKy64L%2F01-Integrate-BetterBugs-Project-to-Jira.mp4?alt=media&token=e74e6e0a-709a-40ae-bb1b-93646f9e3d54>" %}
How to Integrate BetterBugs Project with Jira: Video Demo
{% endembed %}

{% hint style="info" %}
Here, we've covered the steps to integrate a single BetterBugs project (within your BetterBugs Workspace) with Jira. You can also integrate the complete BetterBugs Workspace in one go (that includes all the projects within your Workspace) to Jira or any other project tool. [**Check out the steps for Workspace Integration**](/dashboard/workspace-settings/integrations/workspace-integration)**.**
{% endhint %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side of app screen. Now, click the **gear icon** to open **Workspace Settings** > **Integrations**.
{% endstep %}

{% step %}

#### Search Jira

In the **Integrations** tab, search for **Jira** and click to open the **Jira** card.
{% endstep %}

{% step %}

#### Turn off workspace-wide integration

Toggle off the "**All Projects**" option and hit "**Continue**". You should see the "**Manage per project**" option now.

{% hint style="info" %}
By default, its turned on for workspace level integration. For project-wise integration, you need to disable "**All Projects**".
{% endhint %}
{% endstep %}

{% step %}

#### Select a BetterBugs project to integrate and hit "Connect"

Select a project from the projects name list (that's within your Workspace). From the "**Actions**" column, hit "**Connect**" for that project.
{% endstep %}

{% step %}

#### **Authorize BetterBugs.io for Jira**

Hit “**Accept**” to authorize BetterBugs.io for your Jira account.

{% hint style="warning" %}
**IMPORTANT NOTE**&#x20;

If you're on a **free plan**, Steps 6 and 7 are **NOT REQUIRED**. **You can just SKIP** to "*How to Create Bug Report on Jira using BetterBugs*" section on this page.

**FOR PAID PLANS (Teams and Enterprise)**

Steps 6 and 7 enables you to explicitly choose between:

* **Manual Ticket Creation (Default)**: This means for sharing a bug report to Linear, you'd need to manually populate fields for your Jira project (**Site URL**, **Project**, **Issue Type**, and **others**). Its a **FREE FEATURE**.
* **Automatic Ticket Creation:** This means for sharing a bug report to Linear, you can configure BetterBugs to auto-populate fields for your Jira project (**Site URL**, **Project**, **Issue Type**, and **others**). Its a **PAID FEATURE**.
  {% endhint %}
  {% endstep %}

{% step %}

#### Optional: Choose your preferred method for creating tickets: Manually or Automatically

From the "**Forward Bug Reports**" dropdown, select your preferred method for creating tickets in your project tool:

* **Manually**: Enables you to **create tickets manually**. *Here, we've selected the manual method to showcase project integration steps.*
* **Automatically**: Enables you to [**create tickets with automation**](/dashboard/workspace-settings/integrations/project-integration/project-automation).
  {% endstep %}

{% step %}

#### Optional: Select "Manually" and Connect

Finally, select "**Manually**" from the "**Forward Bug Reports**" dropdown and hit "**Connect**".
{% endstep %}
{% endstepper %}

Okay! You're good to go with the Project level integration for Jira. Now, you can create detailed reports and share them as Jira tickets directly from your browser with a few clicks.

### How to Create Bug Report on Jira using BetterBugs

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FuAH4mmzNggmaTQHClvqR%2F02-Create-BetterBugs-Report-and-Share-Instantly-to-Jira-as-a-Ticket.mp4?alt=media&token=f76bea38-8c93-43e9-a9fa-b0e679435df4>" %}
How to Create Bug Report on Jira using BetterBugs: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Capture the Bug and Add Bug Details

Use the BetterBugs extension to capture the bug and add details for it. You can add the details (*Title + Quick Summary + Steps to Reproduce*) manually in the description area manually or automatically with the "**AI**" toggle.
{% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project Integrated with Jira

From the two dropdowns above the description area, select:

* **BetterBugs Workspace**
* **BetterBugs Project** (that you integrated with Jira)
  {% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select Jira Issue

Open "**+ Send to your PM Tool**" dropdown and select "**Jira Issue**".
{% endstep %}

{% step %}

#### **Populate Ticket Details for Jira and Hit "Next"**

Populate Jira Fields for the report: **Site URL**, **Project**, **Issue Type**, and **others** and click "**Next**".
{% endstep %}

{% step %}

#### Create Session

From the top right, click "**Create Session**".
{% endstep %}
{% endstepper %}

There you go!

A new tab with the Jira ticket opens up posting the task to the Jira project packed with all the bug details and a link to the **complete bug report** with [**developer tools info**](/product-features/developer-tools).

* Use the report link in your Jira ticket to access the complete report on BetterBugs.
* You can also access the Jira ticket from the BetterBugs report from the "[**Comments & Activities**](/product-features/comments-activities)" tab located below the bug description area.

### How to Send Existing BetterBugs Report to Jira

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FqEICnVYd1mZozYl1W9u4%2F03-Send-Existing-Bug-Report-to-Jira.mp4?alt=media&token=21973f84-5663-43f6-b0f4-52376254f35f>" %}
How to Send Existing BetterBugs Report to Jira: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open a Bug Report

Login to BetterBugs and open a project report to share on Jira.
{% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select Jira Issue

From the top-right of the report screen, open "**+ Send to your PM Tool**" dropdown and select "**Jira Issue**".
{% endstep %}

{% step %}

#### Populate Ticket Details for Jira and Click "Create Task"

Populate Jira Fields for the report: **Site URL**, **Project**, **Issue Type**, and **others** and click "**Create Task**".
{% endstep %}
{% endstepper %}

Okay! You're all set. This instantly should create Jira ticket with the BetterBugs bug report.

### How to Disconnect BetterBugs Project from Jira

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2Fld5YHaiydQMnMcau2N48%2F04-Disconnect-BetterBugs-Project-from-Jira.mp4?alt=media&token=c36346e5-e217-4e3d-b97f-5e24586a794d>" %}
How to Disconnect BetterBugs Project from Jira: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open Project Settings

Use the **Gear Icon** beside the **BetterBugs Project** **Name** to open **Project Settings**.
{% endstep %}

{% step %}

#### Go to Workspace Settings > Integrations

Navigate to **Workspace Settings** > **Integrations**
{% endstep %}

{% step %}

#### Search Jira

In the **Integrations** tab, search for **Jira** and click to open the **Jira** card.
{% endstep %}

{% step %}

#### Select BetterBugs project to disconnect and click (⋮) under "Actions"

In the Jira card, select the BetterBugs project (from the Project list) to disconnect. For the project, click vertical dots (**⋮**) under the **Actions** column.
{% endstep %}

{% step %}

#### Disconnect and Confirm Action

To confirm action, click "**Disconnect**" and "**Continue**".
{% endstep %}
{% endstepper %}

This instantly disconnects Jira from the selected BetterBugs project.


# Two-way sync for Jira

Two-way sync between BetterBugs.io and Jira: For Comments & Status Updates

**BetterBugs.io** and **Jira** integration just got more powerful with the **two-way commenting** and **status sync feature**! Now, you won't have to switch between BetterBugs.io and Jira to add or track comments and task status updates.

### How Does the Two-way Sync for Jira and BetterBugs Work?

Whenever you add any comment to the Jira ticket created using BetterBugs.io, it will automatically get added to the connected bug report and vice versa. Similarly, the statuses of the reports will also be auto-synced between BetterBugs.io and Jira.

{% hint style="warning" %}
**PRE-CONDITION:** There should be a **one-to-one connection** between the **BetterBugs.io report** and the **Jira project** for these features to work. This means that if the same report is shared with more than one Jira project, the two-way sync action won’t happen.
{% endhint %}

### Enabling the Two-way Sync Feature for An Existing Jira Integration

The two-way Jira sync will work by default when you connect BetterBugs.io with your Jira project for the first time.

However, to enable this feature for an existing connection between a BetterBugs.io report and the Jira project, you need to **disconnect and reconnect** your Jira project to BetterBugs.io project.&#x20;

{% hint style="info" %}
**IMPORTANT NOTE:** This step is necessary to update the permissions required for two-way commenting and status updates.
{% endhint %}

### How to Sync Comments: BetterBugs.io and Jira \[Step-by-Step from Scratch]

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FKAcmvS9Bcagg4VsSJh6g%2F01-Jira-2-way-Comment-Sync.mp4?alt=media&token=0a17883c-95d9-4197-87d6-0337801e76bc>" %}
Two-Way Jira Sync for Comments: **Jira —> BetterBugs.io | Video Demo**
{% endembed %}

{% stepper %}
{% step %}

#### Capture the Bug and Add Bug Details

Use the BetterBugs extension to capture the bug and add details for it. You can add the details (*Title + Quick Summary + Steps to Reproduce*) manually in the description area manually or automatically with the "**AI**" toggle.
{% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project Integrated with Jira

From the two dropdowns above the description area, select:

* **BetterBugs Workspace**
* **BetterBugs Project** (that you integrated with Jira)
  {% endstep %}

{% step %}

#### Select Jira Issue from "+Send to Your PM Tool" Dropdown, Select Jira Issue, and Populate Jira Fields, and click "Next".

Open "**+ Send to your PM Tool**" dropdown and select "**Jira Issue**" > Populate Jira Fields for the report: **Site URL**, **Project**, **Issue Type**, and **others** and click "**Next".**
{% endstep %}

{% step %}

#### Create Session

From the top right, click "**Create Session**". This instantly creates a Jira ticket.
{% endstep %}

{% step %}

#### Add a Comment in Jira Ticket

Add a comment to the Jira ticket you just created.
{% endstep %}

{% step %}

#### Check for the Newly Added Comment in BetterBugs.io Report

Check for the same comment in the BetterBugs.io report’s [**Comments/Activities**](/product-features/comments-activities) tab at the bottom right of your screen. The comment would be instantly available in your BetterBugs.io report, just as in your Jira ticket.&#x20;
{% endstep %}

{% step %}

#### Add a Comment in your BetterBugs.io Report

Alternatively, try adding a comment to the BetterBugs.io report. It should be available instantly on your Jira ticket.&#x20;
{% endstep %}
{% endstepper %}

{% hint style="info" %}
The two-way sync feature also works when you **update/delete comments** in either workspace.
{% endhint %}

### User Mentions in Comments

You can also mention other users in the comments. If the mentioned user is unavailable in either workspace (Jira or BetterBugs.io), their email or account ID will be displayed by default.

### How to Sync Statuses: BetterBugs.io and Jira

#### **Status Mapping**

| Jira               | BetterBugs.io |
| ------------------ | ------------- |
| **To Do**          | Open          |
| **DONE**           | Closed        |
| **Other statuses** | In Progress   |

{% hint style="info" %}
The status sync between your bug report and Jira works similarly to the comment sync action.&#x20;
{% endhint %}

### How to Sync Statuses Between BetterBugs.io and Jira \[Step-by-Step from Scratch]

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2F0bDWcIUuWVOvDgr12Tk0%2F02-Jira-2-Way-Status-Sync.mp4?alt=media&token=273403a5-8709-4430-acaf-bf489313aa40>" %}
Two-Way Jira Sync for Status: **Jira —> BetterBugs.io | Video Demo**
{% endembed %}

{% stepper %}
{% step %}

#### Capture the Bug and Add Bug Details

Use the BetterBugs extension to capture the bug and add details for it. You can add the details (*Title + Quick Summary + Steps to Reproduce*) manually in the description area manually or automatically with the "**AI**" toggle.
{% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project Integrated with Jira

From the two dropdowns above the description area, select:

* **BetterBugs Workspace**
* **BetterBugs Project** (that you integrated with Jira)
  {% endstep %}

{% step %}

#### Select Jira Issue from "+Send to Your PM Tool" Dropdown, Select Jira Issue, and Populate Jira Fields

Open "**+ Send to your PM Tool**" dropdown and select "**Jira Issue**" > Populate Jira Fields for the report: **Site URL**, **Project**, **Issue Type**, and **others** and click "**Next".**&#x20;
{% endstep %}

{% step %}

#### **Check BetterBugs.io Report Status in the "Details" Section**

Open the "**Details**" section in your report (below the description area) and ensure that its set to "**Open**" \[This is equal to **TO DO** status in Jira]
{% endstep %}

{% step %}

#### Create Session

From the top right, click "**Create Session**". This instantly creates a Jira ticket.
{% endstep %}

{% step %}

#### Change Jira Ticket Status to "DONE" and Check for the Status Sync in BetterBugs.io Report

In your Jira ticket, set the status to "**DONE**" and check for the status sync in BetterBugs.io bug report. The bug report should now be marked as "**CLOSED**".
{% endstep %}
{% endstepper %}


# Linear

Share bug reports as Linear issues in your workspace.

### BetterBugs integration with Linear

BetterBugs integrates with Linear in just a few minutes, allowing you to share all your issues directly with your Linear workspace. This eliminates the need for back-and-forth communication and follow-ups, streamlining your bug-reporting workflows.&#x20;

With BetterBugs, you can capture and share issues like a pro, providing your developers with all the details they need to debug faster, all through a simple link.

### How to Integrate BetterBugs Project with Linear: Step-by-Step

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FEQ2eWcKvm4guRoTERpaa%2F01-Integrate-BetterBugs-with-Linear.mp4?alt=media&token=963b69ea-8f95-41b4-aec8-a380068c7d5f>" %}
How to Integrate BetterBugs Project with Linear: Video Demo
{% endembed %}

{% hint style="info" %}
Here, we've covered the steps to integrate a single BetterBugs project (within your BetterBugs Workspace) with Linear. You can also integrate the complete BetterBugs Workspace in one go (that includes all the projects within your Workspace) to Linear or any other project tool. [**Check out the steps for Workspace Integration**](/dashboard/workspace-settings/integrations/workspace-integration)**.**
{% endhint %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side of app screen. Now, click the **gear icon** to open **Workspace Settings** > **Integrations**.
{% endstep %}

{% step %}

#### Search Linear

In the **Integrations** tab, search for **Linear** and click to open the **Linear** card.
{% endstep %}

{% step %}

#### Turn off workspace-wide integration

Toggle off the "**All Projects**" option and hit "**Continue**". You should see the "**Manage per project**" option now.

{% hint style="info" %}
By default, its turned on for workspace level integration. For project-wise integration, you need to disable "**All Projects**".
{% endhint %}
{% endstep %}

{% step %}

#### Select a BetterBugs project to integrate and hit "Connect"

Select a project from the projects name list (that's within your Workspace). From the "**Actions**" column, hit "**Connect**" for that project.
{% endstep %}

{% step %}

#### **Authorize BetterBugs.io for Linear**

Hit “**Authorize**” to authorize BetterBugs.io for your Linear Workspace.

{% hint style="warning" %}
**IMPORTANT NOTE**&#x20;

If you're on a **free plan**, Steps 6 and 7 are **NOT REQUIRED**. **You can just SKIP** to "*How to Create Bug Report on Linear using BetterBugs*" section on this page.

**FOR PAID PLANS (Teams and Enterprise)**

Steps 6 and 7 enables you to explicitly choose between:

* **Manual Ticket Creation (Default)**: This means for sharing a bug report to Linear, you'd need to manually populate fields for your Linear project (**Team**, **Parent Issue**, **Priority**, and others). Its a **FREE FEATURE**.
* **Automatic Ticket Creation:** This means for sharing a bug report to Linear, you can configure BetterBugs to auto-populate fields for your Linear project (**Team**, **Parent Issue**, **Priority**, and others). Its a **PAID FEATURE**.
  {% endhint %}
  {% endstep %}

{% step %}

#### Optional: Choose your preferred method for creating tickets: Manually or Automatically

From the "**Forward Bug Reports**" dropdown, select your preferred method for creating tickets in your project tool:

* **Manually**: Enables you to **create tickets manually**. *Here, we've selected the manual method to showcase project integration steps.*
* **Automatically**: Enables you to [**create tickets with automation**](/dashboard/workspace-settings/integrations/project-integration/project-automation).
  {% endstep %}

{% step %}

#### Optional: Select "Manually" and Connect

Finally, select "**Manually**" from the "**Forward Bug Reports**" dropdown and hit "**Connect**".
{% endstep %}
{% endstepper %}

Okay! You're good to go with the Project level integration for your Linear app. Now, you can create detailed reports and share them as Linear issues directly from your browser with a few clicks.

### How to Create Bug Report on Linear using BetterBugs

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FsJe3Y558OkjrqnGeQHfR%2F02-Create-Bug-Report-on-Linear-using-BetterBugs.mp4?alt=media&token=3b9dcac7-7d6b-4af9-9c4f-2135eb419ece>" %}
How to Create Bug Report on Linear using BetterBugs: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Capture the Bug and Add Bug Details

Use the BetterBugs extension to capture the bug and add details for it. You can add the details (*Title + Quick Summary + Steps to Reproduce*) manually in the description area manually or automatically with the "**AI**" toggle.
{% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project Integrated with Linear

From the two dropdowns above the description area, select:

* **BetterBugs Workspace**
* **BetterBugs Project** (that you integrated with Linear)
  {% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select Linear Issue

Open "**+ Send to your PM Tool**" dropdown and select "**Linear Issue**".
{% endstep %}

{% step %}

#### **Populate Ticket Details for Linear and Hit "Next"**

Populate Linear Fields for the report: **Team**, **Project**, **Priority**, and **others** and click "**Next**".
{% endstep %}

{% step %}

#### Create Session

From the top right, click "**Create Session**".
{% endstep %}
{% endstepper %}

There you go!

A new tab with the Linear ticket opens up posting the task to the Linear project packed with all the bug details and a link to the **complete bug report** with [**developer tools info**](/product-features/developer-tools).

* Use the report link in your Linear ticket to access the complete report on BetterBugs.
* You can also access the Linear ticket from the BetterBugs report from the "[**Comments & Activities**](/product-features/comments-activities)" tab located below the bug description area.

### How to Send Existing BetterBugs Report to Linear

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2Fwwu9C1OSBvapHL7Fja91%2F03-Send-Existing-BetterBugs-Report-to-Linear.mp4?alt=media&token=762b5161-6097-4f01-b6b5-25d27d3f7d70>" %}
How to Send Existing BetterBugs Report to Linear: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open a Bug Report

Login to BetterBugs and open a project report to share on Linear.
{% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select Linear Issue

From the top-right of the report screen, open "**+ Send to your PM Tool**" dropdown and select "**Linear Issue**".
{% endstep %}

{% step %}

#### Populate Ticket Details for Linear and Click "Create Task"

Populate Linear Fields for the report: **Team**, **Project**, **Priority**, and **others** and click "**Create Task**".
{% endstep %}
{% endstepper %}

Okay! You're all set. This instantly should create Linear ticket with the BetterBugs bug report.

### How to Disconnect BetterBugs Project from Linear

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2Fo8L8QVi3qkYcxNG4ZizJ%2F04-Disconnect-BetterBugs-Project-from-Linear.mp4?alt=media&token=8bfa5fb0-c528-424f-9822-bec6c0bced82>" %}
How to Disconnect BetterBugs Project from Linear: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open Project Settings

Use the **Gear Icon** beside the **BetterBugs Project** **Name** to open **Project Settings**.
{% endstep %}

{% step %}

#### Go to Workspace Settings > Integrations

Navigate to **Workspace Settings** > **Integrations**
{% endstep %}

{% step %}

#### Search Linear

In the **Integrations** tab, search for **Linear** and click to open the **Linear** card.
{% endstep %}

{% step %}

#### Select BetterBugs project to disconnect and click (⋮) under "Actions"

In the Linear card, select the BetterBugs project (from the Project list) to disconnect. For the project, click vertical dots (**⋮**) under the **Actions** column.
{% endstep %}

{% step %}

#### Disconnect and Confirm Action

To confirm action, click "**Disconnect**" and "**Continue**".
{% endstep %}
{% endstepper %}

This instantly disconnects Linear app from the selected BetterBugs project.


# ClickUp

Capture bugs and share them instantly as ClickUp tasks.

### BetterBugs integration with ClickUp

With BetterBugs, sharing software issues on ClickUp has never been easier. You can integrate BetterBugs and ClickUp and say bye-bye to tedious bug-reporting sessions while you manage your projects with ClickUp.

### How to Integrate BetterBugs Project with ClickUp: Step-by-Step

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2Fq9iHNxUcWKa6cfqSE0FZ%2F01-Integrate-BetterBugs-Project-with-ClickUp.mp4?alt=media&token=fdc9b987-e773-462d-bc7e-63482b7f9836>" %}
How to Integrate BetterBugs Project with ClickUp: Video Demo
{% endembed %}

{% hint style="info" %}
Here, we've covered the steps to integrate a single BetterBugs project (within your BetterBugs Workspace) with ClickUp. You can also integrate the complete BetterBugs Workspace in one go (that includes all the projects within your Workspace) to ClickUp or any other project tool. [**Check out the steps for Workspace Integration**](/dashboard/workspace-settings/integrations/workspace-integration)**.**
{% endhint %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side of app screen. Now, click the **gear icon** to open **Workspace Settings** > **Integrations**.
{% endstep %}

{% step %}

#### Search Click Up

In the **Integrations** tab, search for **Click Up** and click to open the **Click Up** card.
{% endstep %}

{% step %}

#### Turn off workspace-wide integration

Toggle off the "**All Projects**" option and hit "**Continue**". You should see the "**Manage per project**" option now.

{% hint style="info" %}
By default, its turned on for workspace level integration. For project-wise integration, you need to disable "**All Projects**".
{% endhint %}
{% endstep %}

{% step %}

#### Select a BetterBugs project to integrate and hit "Connect"

Select a project from the projects name list (that's within your Workspace). From the "**Actions**" column, hit "**Connect**" for that project.
{% endstep %}

{% step %}

#### **Authorize BetterBugs.io for ClickUp**

Select your ClickUp workspace and click “**Connect Workspace**” to authorize BetterBugs.io for it.

{% hint style="warning" %}
**IMPORTANT NOTE**&#x20;

If you're on a **free plan**, Steps 6 and 7 are **NOT REQUIRED**. **You can just SKIP** to "*How to Create Bug Report on ClickUp using BetterBugs*" section on this page.

**FOR PAID PLANS (Teams and Enterprise)**

Steps 6 and 7 enables you to explicitly choose between:

* **Manual Ticket Creation (Default)**: This means for sharing a bug report to ClickUp, you'd need to manually populate fields for your ClickUp project (**Workspace**, **Space**, **Folder**, **List**, **Assignee**, and others). Its a **FREE FEATURE**.
* **Automatic Ticket Creation:** This means for sharing a bug report to ClickUp, you can configure BetterBugs to auto-populate fields for your ClickUp project (**Workspace**, **Space**, **Folder**, **List**, **Assignee**, and others). Its a **PAID FEATURE**.
  {% endhint %}
  {% endstep %}

{% step %}

#### Optional: Choose your preferred method for creating tickets: Manually or Automatically

From the "**Forward Bug Reports**" dropdown, select your preferred method for creating tickets in your project tool:

* **Manually**: Enables you to **create tasks manually**. *Here, we've selected the manual method to showcase project integration steps.*
* **Automatically**: Enables you to [**create task with automation**](/dashboard/workspace-settings/integrations/project-integration/project-automation).
  {% endstep %}

{% step %}

#### Optional: Select "Manually" and Connect

Finally, select "**Manually**" from the "**Forward Bug Reports**" dropdown and hit "**Connect**".
{% endstep %}
{% endstepper %}

Okay! You're good to go with the Project level integration for ClickUp. Now, you can create detailed reports and share them as ClickUp tasks directly from your browser with a few clicks.

### How to Create Bug Report on ClickUp using BetterBugs

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2F1BGWiglv9XdB4xu5MIqi%2F02-Create-Bug-Report-and-Share-Instantly-as-Clickup-Task.mp4?alt=media&token=98c3c139-f9ff-42ed-9964-e3497875d46b>" %}
How to Create Bug Report on ClickUp using BetterBugs: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Capture the Bug and Add Bug Details

Use the BetterBugs extension to capture the bug and add details for it. You can add the details (*Title + Quick Summary + Steps to Reproduce*) manually in the description area manually or automatically with the "**AI**" toggle.
{% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project Integrated with ClickUp

From the two dropdowns above the description area, select:

* **BetterBugs Workspace**
* **BetterBugs Project** (that you integrated with ClickUp)
  {% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select ClickUp Task

Open "**+ Send to your PM Tool**" dropdown and select "**ClickUp Task**".
{% endstep %}

{% step %}

#### **Populate Ticket Details for ClickUp and Hit "Next"**

Populate ClickUp Fields for the report: **Workspace**, **Space**, **Folder**, **List**, **Assignee**, and others and click "**Next**".
{% endstep %}

{% step %}

#### Create Session

From the top right, click "**Create Session**".
{% endstep %}
{% endstepper %}

There you go!

A new tab with the ClickUp task opens up posting the task to the ClickUp project packed with all the bug details and a link to the **complete bug report** with [**developer tools info**](/product-features/developer-tools).

* Use the report link in your ClickUp task to access the complete report on BetterBugs.
* You can also access the ClickUp Task from the BetterBugs report from the "[**Comments & Activities**](/product-features/comments-activities)" tab located below the bug description area.

### How to Send Existing BetterBugs Report to ClickUp

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FW3ggfafGuLWd12MxrO3k%2F03-Share-Existing-BetterBugs-Report-to-ClickUp.mp4?alt=media&token=18c73213-c8fc-453b-b874-f68316d8ee43>" %}
How to Send Existing BetterBugs Report to ClickUp: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open a Bug Report

Login to BetterBugs and open a project report to share on ClickUp.
{% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select ClickUp Task

From the top-right of the report screen, open "**+ Send to your PM Tool**" dropdown and select "**ClickUp Task**".
{% endstep %}

{% step %}

#### Populate Task Details for ClickUp and Click "Create Task"

Populate ClickUp Fields for the report: **Workspace**, **Space**, **Folder**, **List**, **Assignee**, and others and click "**Create Task**".
{% endstep %}
{% endstepper %}

Okay! You're all set. This instantly should create ClickUp Task with the BetterBugs bug report.

### How to Disconnect BetterBugs Project from ClickUp

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FceLg4q8XXWQR5XIgGiNT%2F04-Disconnect-BetterBugs-Project-from-ClickUp.mp4?alt=media&token=bbacad28-94e6-4e0c-9a3c-c4636ce1b2fc>" %}
How to Disconnect BetterBugs Project from ClickUp: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open Project Settings

Use the **Gear Icon** beside the **BetterBugs Project** **Name** to open **Project Settings**.
{% endstep %}

{% step %}

#### Go to Workspace Settings > Integrations

Navigate to **Workspace Settings** > **Integrations**
{% endstep %}

{% step %}

#### Search Click Up

In the **Integrations** tab, search for **Click Up** and click to open the **Click Up** card.
{% endstep %}

{% step %}

#### Select BetterBugs project to disconnect and click (⋮) under "Actions"

In the Click Up card, select the BetterBugs project (from the Project list) to disconnect. For the project, click vertical dots (**⋮**) under the **Actions** column.
{% endstep %}

{% step %}

#### Disconnect and Confirm Action

To confirm action, click "**Disconnect**" and "**Continue**".
{% endstep %}
{% endstepper %}

This instantly disconnects ClickUp from the selected BetterBugs project.


# Asana

Create bug reports and share as tasks to your Asana projects.

### BetterBugs integration with Asana

BetterBugs seamlessly integrates with Asana to simplify your bug reporting and debugging workflows, making it easier to develop and test software while managing your projects more efficiently. With BetterBugs, you can quickly share comprehensive bug reports as links directly to your selected Asana workspace, including all your project fields.

### How to Integrate BetterBugs Project with Asana: Step-by-Step

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FVsdNmvEFPBXQrGYWEC1P%2F01-Integrate-BetterBugs-Project-with-Asana.mp4?alt=media&token=6a05cd8a-8938-44a9-8e33-39d2d793b5e0>" %}
How to Integrate BetterBugs Project with Asana: Video Demo
{% endembed %}

{% hint style="info" %}
Here, we've covered the steps to integrate a single BetterBugs project (within your BetterBugs Workspace) with Asana. You can also integrate the complete BetterBugs Workspace in one go (that includes all the projects within your Workspace) to Asana or any other project tool. [**Check out the steps for Workspace Integration**](/dashboard/workspace-settings/integrations/workspace-integration)**.**
{% endhint %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side of app screen. Now, click the **gear icon** to open **Workspace Settings** > **Integrations**.
{% endstep %}

{% step %}

#### Search Asana

In the **Integrations** tab, search for **Asana** and click to open the **Asana** card.
{% endstep %}

{% step %}

#### Turn off workspace-wide integration

Toggle off the "**All Projects**" option and hit "**Continue**". You should see the "**Manage per project**" option now.

{% hint style="info" %}
By default, its turned on for workspace level integration. For project-wise integration, you need to disable "**All Projects**".
{% endhint %}
{% endstep %}

{% step %}

#### Select a BetterBugs project to integrate and hit "Connect"

Select a project from the projects name list (that's within your Workspace). From the "**Actions**" column, hit "**Connect**" for that project.
{% endstep %}

{% step %}

#### **Authorize BetterBugs.io for Asana**

Click “**Allow**” to authorize BetterBugs.io for your Asana Workspace.

{% hint style="warning" %}
**IMPORTANT NOTE**&#x20;

If you're on a **free plan**, Steps 6 and 7 are **NOT REQUIRED**. **You can just SKIP** to "*How to Create Bug Report on Asana using BetterBugs*" section on this page.

**FOR PAID PLANS (Teams and Enterprise)**

Steps 6 and 7 enables you to explicitly choose between:

* **Manual Ticket Creation (Default)**: This means for sharing a bug report to Asana, you'd need to manually populate fields for your Asana project (**Project**, **Section**, **Parent Task**, **Assignee**, and **others**). Its a **FREE FEATURE**.
* **Automatic Ticket Creation:** This means for sharing a bug report to Asana, you can configure BetterBugs to auto-populate fields for your Asana project (**Project**, **Section**, **Parent Task**, **Assignee**, and **others**). Its a **PAID FEATURE**.
  {% endhint %}
  {% endstep %}

{% step %}

#### Optional: Choose your preferred method for creating tickets: Manually or Automatically

From the "**Forward Bug Reports**" dropdown, select your preferred method for creating tickets in your project tool:

* **Manually**: Enables you to **create tickets manually**. *Here, we've selected the manual method to showcase project integration steps.*
* **Automatically**: Enables you to [**create tickets with automation**](/dashboard/workspace-settings/integrations/project-integration/project-automation).
  {% endstep %}

{% step %}

#### Optional: Select "Manually" and Connect

Finally, select "**Manually**" from the "**Forward Bug Reports**" dropdown and hit "**Connect**".
{% endstep %}
{% endstepper %}

Okay! You're good to go with the Project level integration for your Asana app. Now, you can create detailed reports and share them as Asana issues directly from your browser with a few clicks.

### How to Create Bug Report on Asana using BetterBugs

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FX4xjtmo5JuPhai7pdKfb%2F02-Create-Bug-Report-and-Share-Instantly-on-Asana.mp4?alt=media&token=6f80bedf-c1b2-476f-9ecd-ef82a2caa8e0>" %}
How to Create Bug Report on Asana using BetterBugs: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Capture the Bug and Add Bug Details

Use the BetterBugs extension to capture the bug and add details for it. You can add the details (*Title + Quick Summary + Steps to Reproduce*) manually in the description area manually or automatically with the "**AI**" toggle.
{% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project Integrated with Asana

From the two dropdowns above the description area, select:

* **BetterBugs Workspace**
* **BetterBugs Project** (that you integrated with Asana)
  {% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select Asana Task

Open "**+ Send to your PM Tool**" dropdown and select "**Asana Task**".
{% endstep %}

{% step %}

#### **Populate Task Details for Asana and Hit "Next"**

Populate Asana Fields for the report: **Project**, **Section**, **Parent Task**, **Assignee**, and **others** and click "**Next**".
{% endstep %}

{% step %}

#### Create Session

From the top right, click "**Create Session**".
{% endstep %}
{% endstepper %}

There you go!

A new tab with the Asana task opens up posting the task to the Asana project packed with all the bug details and a link to the **complete bug report** with [**developer tools info**](/product-features/developer-tools).

* Use the report link in your Asana task to access the complete report on BetterBugs.
* You can also access the Asana task from the BetterBugs report from the "[**Comments & Activities**](/product-features/comments-activities)" tab located below the bug description area.

### How to Send Existing BetterBugs Report to Asana

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FZ9bCOZrlX2YRXiCHRz0V%2F03-Send-Existing-Bug-Report-to-Asana.mp4?alt=media&token=a96a223d-9a05-4fc2-9d43-555b69072ada>" %}
How to Send Existing BetterBugs Report to Asana: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open a Bug Report

Login to BetterBugs and open a project report to share on Asana.
{% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select Asana Task

From the top-right of the report screen, open "**+ Send to your PM Tool**" dropdown and select "**Asana Task**".
{% endstep %}

{% step %}

#### Populate Task Details for Asana and Click "Create Task"

Populate Asana Fields for the report: **Project**, **Section**, **Parent Task**, **Assignee**, and **others**  and click "**Create Task**".
{% endstep %}
{% endstepper %}

Okay! You're all set. This instantly should create Asana task with the BetterBugs bug report.

### How to Disconnect BetterBugs Project from Asana

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2Fl3UH8lEsFlseQv4yqXCI%2F04-Disconnect-BetterBugs-Project-from-Asana.mp4?alt=media&token=3a610e11-6e03-4705-8d86-5cd892e194fa>" %}
How to Disconnect BetterBugs Project from Asana: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open Project Settings

Use the **Gear Icon** beside the **BetterBugs Project** **Name** to open **Project Settings**.
{% endstep %}

{% step %}

#### Go to Workspace Settings > Integrations

Navigate to **Workspace Settings** > **Integrations**
{% endstep %}

{% step %}

#### Search Asana

In the **Integrations** tab, search for **Asana** and click to open the **Asana** card.
{% endstep %}

{% step %}

#### Select BetterBugs project to disconnect and click (⋮) under "Actions"

In the Asana card, select the BetterBugs project (from the Project list) to disconnect. For the project, click vertical dots (**⋮**) under the **Actions** column.
{% endstep %}

{% step %}

#### Disconnect and Confirm Action

To confirm action, click "**Disconnect**" and "**Continue**".
{% endstep %}
{% endstepper %}

This instantly disconnects Asana app from the selected BetterBugs project.


# GitHub

Raise issues directly on GitHub repos with detailed bug reports.

### BetterBugs integration with GitHub

BetterBugs and GitHub integration enables you to raise issues directly to your GitHub repo as GitHub issues. You can create a visual bug report with all the details you need to highlight to share the issue with your teammates and raise the issue directly on your GitHub repo.

### How to Integrate BetterBugs Project with GitHub: Step-by-Step

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FnS1bNIlh2uRxcXR883pu%2F00-BetterBugs-and-GitHub-Integration.mp4?alt=media&token=3584f967-945a-4efc-bea8-5c12896308c1>" %}
How to Integrate BetterBugs Project with GitHub: Video Demo
{% endembed %}

{% hint style="info" %}
Here, we've covered the steps to integrate a single BetterBugs project (within your BetterBugs Workspace) with GitHub. You can also integrate the complete BetterBugs Workspace in one go (that includes all the projects within your Workspace) to GitHub or any other project tool. [**Check out the steps for Workspace Integration**](/dashboard/workspace-settings/integrations/workspace-integration)**.**
{% endhint %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side of app screen. Now, click the **gear icon** to open **Workspace Settings** > **Integrations**.
{% endstep %}

{% step %}

#### Search GitHub

In the **Integrations** tab, search for **GitHub** and click to open the **GitHub** card.
{% endstep %}

{% step %}

#### Turn off workspace-wide integration

Toggle off the "**All Projects**" option and hit "**Continue**". You should see the "**Manage per project**" option now.

{% hint style="info" %}
By default, its turned on for workspace level integration. For project-wise integration, you need to disable "**All Projects**".
{% endhint %}
{% endstep %}

{% step %}

#### Select a BetterBugs project to integrate and hit "Connect"

Select a project from the projects name list (that's within your Workspace). From the "**Actions**" column, hit "**Connect**" for that project.
{% endstep %}

{% step %}

#### **Authorize BetterBugs.io for GitHub**

Authorize BetterBugs.io for your GitHub account.

{% hint style="warning" %}
**IMPORTANT NOTE**&#x20;

If you're on a **free plan**, Steps 6 and 7 are **NOT REQUIRED**. **You can just SKIP** to "*How to Raise an Issue on GitHub using BetterBugs*" section on this page.

**FOR PAID PLANS (Teams and Enterprise)**

Steps 6 and 7 enables you to explicitly choose between:

* **Manual Issue Creation (Default)**: This means for sharing a bug report to GitHub, you'd need to manually populate fields for your GitHub Repo. (**Repository**, **Assignees**, **Labels**, and others). Its a **FREE FEATURE**.
* **Automatic Issue Creation:** This means for sharing a bug report to GitHub Repo, you can configure BetterBugs to auto-populate fields for GitHub (**Repository**, **Assignees**, **Labels**, and others). Its a **PAID FEATURE**.
  {% endhint %}
  {% endstep %}

{% step %}

#### Optional: Choose your preferred method for creating tickets: Manually or Automatically

From the "**Forward Bug Reports**" dropdown, select your preferred method for creating tickets in your project tool:

* **Manually**: Enables you to **raise issues manually**. *Here, we've selected the manual method to showcase project integration steps.*
* **Automatically**: Enables you to [**raise issues with automation**](/dashboard/workspace-settings/integrations/project-integration/project-automation).
  {% endstep %}

{% step %}

#### Optional: Select "Manually" and Connect

Finally, select "**Manually**" from the "**Forward Bug Reports**" dropdown and hit "**Connect**".
{% endstep %}
{% endstepper %}

Okay! You're good to go with the Project level integration for GitHub. Now, you can create detailed reports and share them as GitHub issues directly from your browser with a few clicks.

### How to Raise an Issue on GitHub using BetterBugs

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FXwyy66bEH6xBejpa6DTV%2F01-Raise-Issue-on-GitHub-Using-BetterBugs-io.mp4?alt=media&token=ef273079-eab5-4be8-9a76-b94c232794fe>" %}
How to Raise Issue on GitHub using BetterBugs: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Capture the Bug and Add Bug Details

Use the BetterBugs extension to capture the bug and add details for it. You can add the details (*Title + Quick Summary + Steps to Reproduce*) manually in the description area manually or automatically with the "**AI**" toggle.
{% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project Integrated with GitHub

From the two dropdowns above the description area, select:

* **BetterBugs Workspace**
* **BetterBugs Project** (that you integrated with GitHub)
  {% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select GitHub Issue

Open "**+ Send to your PM Tool**" dropdown and select "**GitHub Issue**".
{% endstep %}

{% step %}

#### **Populate Issue Details for GitHub and Hit "Next"**

Populate GitHub Fields for the report: **Repository**, **Assignees**, **Labels**, and others and click "**Next**".
{% endstep %}

{% step %}

#### Create Session

From the top right, click "**Create Session**".
{% endstep %}
{% endstepper %}

There you go!

A new tab with the GitHub issue opens up posting the task to the GitHub repo packed with all the bug details and a link to the **complete bug report** with [**developer tools info**](/product-features/developer-tools).

* Use the report link in your GitHub issue to access the complete report on BetterBugs.
* You can also access the GitHub issue from the BetterBugs report from the "[**Comments & Activities**](/product-features/comments-activities)" tab located below the bug description area.

### How to Send Existing BetterBugs Report to GitHub to Raise Issue

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2Fc0R2ESyoJ4UY0wFWEpKQ%2F02-Send-Existing-Report-to-GitHub-to-Raise-Issue.mp4?alt=media&token=5f78e4b1-2841-4991-a46b-edeb0c531da4>" %}
How to Send Existing BetterBugs Report to GitHub to Raise Issue: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open a Bug Report

Login to BetterBugs and open a project report to share on GitHub.
{% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select GitHub Issue

From the top-right of the report screen, open "**+ Send to your PM Tool**" dropdown and select "**GitHub Issue**".
{% endstep %}

{% step %}

#### Populate Issue Details for GitHub and Click "Create Task"

Populate GitHub Fields for the report: **Repository**, **Assignees**, **Labels**, and others and click "**Create Task**".
{% endstep %}
{% endstepper %}

Okay! You're all set. This instantly should create GitHub issue with the BetterBugs bug report.

### How to Disconnect BetterBugs Project from GitHub

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FxqHwWQZNPwlPE1ZUZd6B%2F03-Disconnect-BetterBugs-from-GitHub.mp4?alt=media&token=6d089caa-ff58-4733-ae00-dc8a90817c29>" %}
How to Disconnect BetterBugs Project from GitHub: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open Project Settings

Use the **Gear Icon** beside the **BetterBugs Project** **Name** to open **Project Settings**.
{% endstep %}

{% step %}

#### Go to Workspace Settings > Integrations

Navigate to **Workspace Settings** > **Integrations**
{% endstep %}

{% step %}

#### Search GitHub

In the **Integrations** tab, search for **GitHub** and click to open the **GitHub** card.
{% endstep %}

{% step %}

#### Select BetterBugs project to disconnect and click (⋮) under "Actions"

In the GitHub card, select the BetterBugs project (from the Project list) to disconnect. For the project, click vertical dots (**⋮**) under the **Actions** column.
{% endstep %}

{% step %}

#### Disconnect and Confirm Action

To confirm action, click "**Disconnect**" and "**Continue**".
{% endstep %}
{% endstepper %}

This instantly disconnects GitHub from the selected BetterBugs project.


# MS Teams

Share bug reports as messages to your Teams channels.

### BetterBugs integration with **Microsoft** Teams

BetterBugs effortlessly connects with your Microsoft Teams account, allowing you to quickly capture issues and post them directly to your Teams channel. With the included link, you can access the complete bug report.

### How to Integrate BetterBugs Project with **Microsoft** Teams: Step-by-Step

{% hint style="info" %}
Here, we've covered the steps to integrate a single BetterBugs project (within your BetterBugs Workspace) with MS Teams. You can also integrate the complete BetterBugs Workspace in one go (that includes all the projects within your Workspace) to MS Teams or any other project tool. [**Check out the steps for Workspace Integration**](/dashboard/workspace-settings/integrations/workspace-integration)**.**
{% endhint %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side of app screen. Now, click the **gear icon** to open **Workspace Settings** > **Integrations**.
{% endstep %}

{% step %}

#### Search Microsoft Teams

In the **Integrations** tab, search for **Microsoft Teams** and click to open the **Microsoft Teams** card.
{% endstep %}

{% step %}

#### Turn off workspace-wide integration

Toggle off the "**All Projects**" option and hit "**Continue**". You should see the "**Manage per project**" option now.

{% hint style="info" %}
By default, its turned on for workspace level integration. For project-wise integration, you need to disable "**All Projects**".
{% endhint %}
{% endstep %}

{% step %}

#### Select a BetterBugs project to integrate and hit "Connect"

Select a project from the projects name list (that's within your Workspace). From the "**Actions**" column, hit "**Connect**" for that project.
{% endstep %}

{% step %}

#### **Authorize BetterBugs.io for Microsoft Teams**

Authorize BetterBugs.io for your MS Teams account.

{% hint style="warning" %}
**IMPORTANT NOTE**&#x20;

If you're on a **free plan**, Steps 6 and 7 are **NOT REQUIRED**. **You can just SKIP** to "*How to Create Bug Report (as Message) on Microsoft Teams Channel using BetterBugs*" section on this page.

**FOR PAID PLANS (Teams and Enterprise)**

Steps 6 and 7 enables you to explicitly choose between:

* **Manual Ticket Creation (Default)**: This means for sharing a bug report/message to Teams, you'd need to manually select the **Team\*** and **Channel\*** your Teams workspace. Its a **FREE FEATURE**.
* **Automatic Ticket Creation:** This means for sharing a bug report/message to MS Teams, you can configure BetterBugs to auto-populate the **Team\*** and **Channel\*** for Teams. Its a **PAID FEATURE**.
  {% endhint %}
  {% endstep %}

{% step %}

#### Optional: Choose your preferred method for creating tickets: Manually or Automatically

From the "**Forward Bug Reports**" dropdown, select your preferred method for creating tickets in your project tool:

* **Manually**: Enables you to **create tickets manually**. *Here, we've selected the manual method to showcase project integration steps.*
* **Automatically**: Enables you to [**create tickets with automation**](/dashboard/workspace-settings/integrations/project-integration/project-automation).
  {% endstep %}

{% step %}

#### Optional: Select "Manually" and Connect

Finally, select "**Manually**" from the "**Forward Bug Reports**" dropdown and hit "**Connect**".
{% endstep %}
{% endstepper %}

Okay! You're good to go with the Project level integration for MS Teams. Now, you can create detailed reports and share them as MS Teams messages directly from your browser with a few clicks.

### How to Create Bug Report (as Message) on **Microsoft** Teams Channel using BetterBugs

{% stepper %}
{% step %}

#### Capture the Bug and Add Bug Details

Use the BetterBugs extension to capture the bug and add details for it. You can add the details (*Title + Quick Summary + Steps to Reproduce*) manually in the description area manually or automatically with the "**AI**" toggle.
{% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project Integrated with MS Teams

From the two dropdowns above the description area, select:

* **BetterBugs Workspace**
* **BetterBugs Project** (that you integrated with MS Teams)
  {% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select MS Teams Message

Open "**+ Send to your PM Tool**" dropdown and select "**MS Teams Message**".
{% endstep %}

{% step %}

#### **Select Your Team and Channel and Hit "Next"**

Select the **Team\*** and **Channel\*** you want the message to send and click "**Next**".
{% endstep %}

{% step %}

#### Create Session

From the top right, click "**Create Session**".
{% endstep %}
{% endstepper %}

There you go!

This instantly posts a message on your Teams channel packed with all the bug details and a link to the **complete bug report** with [**developer tools info**](/product-features/developer-tools).

* You can access the Teams message from the BetterBugs report from the "[**Comments & Activities**](/product-features/comments-activities)" tab located below the bug description area.
* Use the report link in your Teams message to access the complete report on BetterBugs.

### How to Send Existing BetterBugs Report to Microsoft Teams Channel as a Message

{% stepper %}
{% step %}

#### Open a Bug Report

Login to BetterBugs and open a project report to share on MS Teams.
{% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select MS Teams Message

From the top-right of the report screen, open "**+ Send to your PM Tool**" dropdown and select "**MS Teams Message**".
{% endstep %}

{% step %}

#### Select Your **Team and Channel** and Click "Create Task"

Select the **Team\*** and **Channel\*** you want the message to send and click "**Create Task**".
{% endstep %}
{% endstepper %}

This instantly posts a message on your Teams channel packed with all the bug details and a link to the **complete bug report** with [**developer tools info**](/product-features/developer-tools).

* You can access the Teams message from the BetterBugs report from the "[**Comments & Activities**](/product-features/comments-activities)" tab located below the bug description area.
* Use the report link in your Teams message to access the complete report on BetterBugs.

### How to Disconnect BetterBugs Project from **Microsoft** Teams

{% stepper %}
{% step %}

#### Open Project Settings

Use the **Gear Icon** beside the **BetterBugs Project** **Name** to open **Project Settings**.
{% endstep %}

{% step %}

#### Go to Workspace Settings > Integrations

Navigate to **Workspace Settings** > **Integrations**
{% endstep %}

{% step %}

#### Search **Microsoft Teams**

In the **Integrations** tab, search for **Microsoft Teams** and click to open the **Microsoft Teams** card.
{% endstep %}

{% step %}

#### Select BetterBugs project to disconnect and click (⋮) under "Actions"

In the **Microsoft Teams** card, select the BetterBugs project (from the Project list) to disconnect. For the project, click vertical dots (**⋮**) under the **Actions** column.
{% endstep %}

{% step %}

#### Disconnect and Confirm Action

To confirm action, click "**Disconnect**" and "**Continue**".
{% endstep %}
{% endstepper %}

This instantly disconnects **Microsoft** **Teams** from the selected BetterBugs project.


# Trello

Create Trello Cards for your workspaces with links for complete bug reports.

### BetterBugs integration with Trello

With BetterBugs connected to Trello, posting issues directly to your Trello Kanban boards is a breeze. You can create and share detailed bug reports, complete with screenshots or screen recordings, to your Trello workspace in minutes. No need to copy-paste anything. Just capture and share your issues with your Trello projects with a few simple clicks.

### How to Integrate BetterBugs Project with Trello: Step-by-Step

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FSREmPwpQNTOfujDmFRs3%2F00-BetterBugs-and-Trello-Integration.mp4?alt=media&token=de0cffcb-707d-4f12-8716-35eb247f6ce3>" %}
How to Integrate BetterBugs Project with Trello: Video Demo
{% endembed %}

{% hint style="info" %}
Here, we've covered the steps to integrate a single BetterBugs project (within your BetterBugs Workspace) with Trello. You can also integrate the complete BetterBugs Workspace in one go (that includes all the projects within your Workspace) to Trello or any other project tool. [**Check out the steps for Workspace Integration**](/dashboard/workspace-settings/integrations/workspace-integration)**.**
{% endhint %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side of app screen. Now, click the **gear icon** to open **Workspace Settings** > **Integrations**.
{% endstep %}

{% step %}

#### Search Trello

In the **Integrations** tab, search for **Trello** and click to open the **Trello** card.
{% endstep %}

{% step %}

#### Turn off workspace-wide integration

Toggle off the "**All Projects**" option and hit "**Continue**". You should see the "**Manage per project**" option now.

{% hint style="info" %}
By default, its turned on for workspace level integration. For project-wise integration, you need to disable "**All Projects**".
{% endhint %}
{% endstep %}

{% step %}

#### Select a BetterBugs project to integrate and hit "Connect"

Select a project from the projects name list (that's within your Workspace). From the "**Actions**" column, hit "**Connect**" for that project.
{% endstep %}

{% step %}

#### **Authorize BetterBugs.io for Trello**

Authorize BetterBugs.io for your Trello workspace.

{% hint style="warning" %}
**IMPORTANT NOTE**&#x20;

If you're on a **free plan**, Steps 6 and 7 are **NOT REQUIRED**. **You can just SKIP** to "*How to Create Bug Report on Trello using BetterBugs*" section on this page.

**FOR PAID PLANS (Teams and Enterprise)**

Steps 6 and 7 enables you to explicitly choose between:

* **Manual Ticket Creation (Default)**: This means for sharing a bug report to Trello, you'd need to manually populate fields for your Trello card. (**Workspace**, **Board**, **List**, and others). Its a **FREE FEATURE**.
* **Automatic Ticket Creation:** This means for sharing a bug report to Trello, you can configure BetterBugs to auto-populate fields for Trello card (**Workspace**, **Board**, **List**, and others). Its a **PAID FEATURE**.
  {% endhint %}
  {% endstep %}

{% step %}

#### Optional: Choose your preferred method for creating tickets: Manually or Automatically

From the "**Forward Bug Reports**" dropdown, select your preferred method for creating tickets in your project tool:

* **Manually**: Enables you to **create ticket manually**. *Here, we've selected the manual method to showcase project integration steps.*
* **Automatically**: Enables you to [**create tickets with automation**](/dashboard/workspace-settings/integrations/project-integration/project-automation).
  {% endstep %}

{% step %}

#### Optional: Select "Manually" and Connect

Finally, select "**Manually**" from the "**Forward Bug Reports**" dropdown and hit "**Connect**".
{% endstep %}
{% endstepper %}

Okay! You're good to go with the Project level integration for Trello. Now, you can create detailed reports and share them as Trello cards directly from your browser with a few clicks.

### How to Create Bug Report on Trello using BetterBugs

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FZUQWB3barm8zTvUMZtjT%2F01-Create-Bug-Report-on-Trello-using-BetterBugs-io.mp4?alt=media&token=8bebbc17-0b58-47cc-8bec-d824d0c8f071>" %}
How to Create Bug Report on Trello Kanban Board using BetterBugs: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Capture the Bug and Add Bug Details

Use the BetterBugs extension to capture the bug and add details for it. You can add the details (*Title + Quick Summary + Steps to Reproduce*) manually in the description area manually or automatically with the "**AI**" toggle.
{% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project Integrated with Trello

From the two dropdowns above the description area, select:

* **BetterBugs Workspace**
* **BetterBugs Project** (that you integrated with Trello)
  {% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select Trello Card

Open "**+ Send to your PM Tool**" dropdown and select "**Trello Card**".
{% endstep %}

{% step %}

#### **Populate Card Details for Trello and Hit "Next"**

Populate Trello Card Fields for the report: **Workspace**, **Board**, **List**, and others and click "**Next**".
{% endstep %}

{% step %}

#### Create Session

From the top right, click "**Create Session**".
{% endstep %}
{% endstepper %}

There you go!

A new tab with the Trello card opens up posting the task to the Trello board packed with all the bug details and a link to the **complete bug report** with [**developer tools info**](/product-features/developer-tools).

* Use the report link in your Trello card to access the complete report on BetterBugs.
* You can also access the Trello card from the BetterBugs report from the "[**Comments & Activities**](/product-features/comments-activities)" tab located below the bug description area.

### How to Send Existing BetterBugs Report to Trello

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2F58K3Ry5V3eQ1vBmDnBAy%2F02-Send-Existing-BetterBugs-Bug-Report-to-Trello.mp4?alt=media&token=2ddc325a-3688-424c-87c0-b746ec16e444>" %}
How to Send an Existing BetterBugs Report to Trello Kanban Board: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open a Bug Report

Login to BetterBugs and open a project report to share on Trello.
{% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select Trello Card

From the top-right of the report screen, open "**+ Send to your PM Tool**" dropdown and select "**Trello Card**".
{% endstep %}

{% step %}

#### Populate Card Details for Trello and Click "Create Task"

Populate Trello Card Fields for the report: **Workspace**, **Board**, **List**, and others and click "**Create Task**".
{% endstep %}
{% endstepper %}

Okay! You're all set. This instantly should create Trello ticket with the BetterBugs bug report.

### How to Disconnect BetterBugs Project from Trello

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2Fkhq8Pl8zNbeBMEB9lPdJ%2F03-Disconnect-BetterBugs-From-Trello.mp4?alt=media&token=3abf22ad-b11d-4333-a740-cdafb5f74bf1>" %}
How to Disconnect BetterBugs Project from Trello: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open Project Settings

Use the **Gear Icon** beside the **BetterBugs Project** **Name** to open **Project Settings**.
{% endstep %}

{% step %}

#### Go to Workspace Settings > Integrations

Navigate to **Workspace Settings** > **Integrations**
{% endstep %}

{% step %}

#### Search Trello

In the **Integrations** tab, search for **Trello** and click to open the **Trello** card.
{% endstep %}

{% step %}

#### Select BetterBugs project to disconnect and click (⋮) under "Actions"

In the Trello card, select the BetterBugs project (from the Project list) to disconnect. For the project, click vertical dots (**⋮**) under the **Actions** column.
{% endstep %}

{% step %}

#### Disconnect and Confirm Action

To confirm action, click "**Disconnect**" and "**Continue**".
{% endstep %}
{% endstepper %}

This instantly disconnects Trello from the selected BetterBugs project.


# Azure Boards

Share bug reports instantly to Azure Boards as Azure work items.

### BetterBugs integration with Azure Boards

With BetterBugs, you can streamline defect reporting and management by sending bug reports directly to your connected Azure project board.

After capturing an issue and linking your BetterBugs project to Azure, you can create and send Azure Work Items straight from the bug report screen. You can easily access the complete bug report with shared links and details within your Azure project.

### How to Integrate BetterBugs Project with Azure Boards: Step-by-Step

{% hint style="info" %}
Here, we've covered the steps to integrate a single BetterBugs project (within your BetterBugs Workspace) with Azure. You can also integrate the complete BetterBugs Workspace in one go (that includes all the projects within your Workspace) to Azure or any other project tool. [**Check out the steps for Workspace Integration**](/dashboard/workspace-settings/integrations/workspace-integration)**.**
{% endhint %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side of app screen. Now, click the **gear icon** to open **Workspace Settings** > **Integrations**.
{% endstep %}

{% step %}

#### Search Azure

In the **Integrations** tab, search for **Azure** and click to open the **Azure** card.
{% endstep %}

{% step %}

#### Turn off workspace-wide integration

Toggle off the "**All Projects**" option and hit "**Continue**". You should see the "**Manage per project**" option now.

{% hint style="info" %}
By default, its turned on for workspace level integration. For project-wise integration, you need to disable "**All Projects**".
{% endhint %}
{% endstep %}

{% step %}

#### Select a BetterBugs project to integrate and hit "Connect"

Select a project from the projects name list (that's within your Workspace). From the "**Actions**" column, hit "**Connect**" for that project.
{% endstep %}

{% step %}

#### **Authorize BetterBugs.io for Azure**

Authorize BetterBugs.io for your Azure Workspace.

{% hint style="warning" %}
**IMPORTANT NOTE**&#x20;

If you're on a **free plan**, Steps 6 and 7 are **NOT REQUIRED**. **You can just SKIP** to "*How to Create Bug Report on Azure Boards using BetterBugs*" section on this page.

**FOR PAID PLANS (Teams and Enterprise)**

Steps 6 and 7 enables you to explicitly choose between:

* **Manual Ticket Creation (Default)**: This means for sharing a bug report to Azure Boards, you'd need to manually populate fields for your Azure workspace (**Organization**, **Project**, **Type**, and others). Its a **FREE FEATURE**.
* **Automatic Ticket Creation:** This means for sharing a bug report to Azure Boards, you can configure BetterBugs to auto-populate fields for your Azure workspace (**Organization**, **Project**, **Type**, and others). Its a **PAID FEATURE**.
  {% endhint %}
  {% endstep %}

{% step %}

#### Optional: Choose your preferred method for creating tickets: Manually or Automatically

From the "**Forward Bug Reports**" dropdown, select your preferred method for creating tickets in your project tool:

* **Manually**: Enables you to **create tickets manually**. *Here, we've selected the manual method to showcase project integration steps.*
* **Automatically**: Enables you to [**create tickets with automation**](/dashboard/workspace-settings/integrations/project-integration/project-automation).
  {% endstep %}

{% step %}

#### Optional: Select "Manually" and Connect

Finally, select "**Manually**" from the "**Forward Bug Reports**" dropdown and hit "**Connect**".
{% endstep %}
{% endstepper %}

Okay! You're good to go with the Project level integration for Azure boards. Now, you can create detailed reports and share them as Azure boards work items/tickets directly from your browser with a few clicks.

### How to Create Bug Report on Azure Boards using BetterBugs

{% stepper %}
{% step %}

#### Capture the Bug and Add Bug Details

Use the BetterBugs extension to capture the bug and add details for it. You can add the details (*Title + Quick Summary + Steps to Reproduce*) manually in the description area manually or automatically with the "**AI**" toggle.
{% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project Integrated with Azure

From the two dropdowns above the description area, select:

* **BetterBugs Workspace**
* **BetterBugs Project** (that you integrated with Azure)
  {% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select Azure Work Item

Open "**+ Send to your PM Tool**" dropdown and select "**Azure Work Item**".
{% endstep %}

{% step %}

#### **Populate Ticket Details for Azure and Hit "Next"**

Populate Azure Fields for the report: **Organization**, **Project**, **Type**, and others and click "**Next**".
{% endstep %}

{% step %}

#### Create Session

From the top right, click "**Create Session**".
{% endstep %}
{% endstepper %}

There you go!

A new tab with the Azure work item opens up posting the task to the Azure project packed with all the bug details and a link to the **complete bug report** with [**developer tools info**](/product-features/developer-tools).

* Use the report link in your Azure work item to access the complete report on BetterBugs.
* You can also access the Azure work item from the BetterBugs report from the "[**Comments & Activities**](/product-features/comments-activities)" tab located below the bug description area.

### How to Send Existing BetterBugs Report to Azure Boards

{% stepper %}
{% step %}

#### Open a Bug Report

Login to BetterBugs and open a project report to share on Azure Boards.
{% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select Azure Work Item

From the top-right of the report screen, open "**+ Send to your PM Tool**" dropdown and select "**Azure Work Item**".
{% endstep %}

{% step %}

#### Populate Ticket Details for Azure Boards and Click "Create Task"

Populate Azure Board Fields for the report: **Organization**, **Project**, **Type**, and others and click "**Create Task**".
{% endstep %}
{% endstepper %}

Okay! You're all set. This instantly should create Azure work item with the BetterBugs bug report.

### How to Disconnect BetterBugs Project from Azure Boards

{% stepper %}
{% step %}

#### Open Project Settings

Use the **Gear Icon** beside the **BetterBugs Project** **Name** to open **Project Settings**.
{% endstep %}

{% step %}

#### Go to Workspace Settings > Integrations

Navigate to **Workspace Settings** > **Integrations**
{% endstep %}

{% step %}

#### Search Azure

In the **Integrations** tab, search for **Azure** and click to open the **Azure** card.
{% endstep %}

{% step %}

#### Select BetterBugs project to disconnect and click (⋮) under "Actions"

In the Azure card, select the BetterBugs project (from the Project list) to disconnect. For the project, click vertical dots (**⋮**) under the **Actions** column.
{% endstep %}

{% step %}

#### Disconnect and Confirm Action

To confirm action, click "**Disconnect**" and "**Continue**".
{% endstep %}
{% endstepper %}

This instantly disconnects Azure Boards from the selected BetterBugs project.


# Notion

Create and send bug reports instantly to your Notion project as tasks.

### BetterBugs integration with Notion

With BetterBugs and Notion integration, you can seamlessly share detailed bug reports as tasks in your Notion project workspace, 10X faster. BetterBugs enables you to create and share comprehensive, context-rich, and technically sound bug reports bundled with visual proofs and devtools details, such as reporter information, issue link, logs & diagnostics, environment information, and more in a few clicks, right from the browser.&#x20;

Get everything you need as a developer from your Quality Assurance (QA) teams, co-developers, stakeholders, or support teams right to your Notion project for faster debugging sessions and better bug management processes.

### How to Integrate BetterBugs Project with Notion: Step-by-Step

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FEnwpVnWCowHToonOAmCE%2F01-Integrate-BetterBugs-Project-with-Notion.mp4?alt=media&token=3cb85f4b-f514-4a5c-a2f6-8c8c8a85b36c>" %}
How to Integrate BetterBugs Project with Notion: Video Demo
{% endembed %}

{% hint style="info" %}
Here, we've covered the steps to integrate a single BetterBugs project (within your BetterBugs Workspace) with Notion. You can also integrate the complete BetterBugs Workspace in one go (that includes all the projects within your Workspace) to Notion or any other project tool. [**Check out the steps for Workspace Integration**](/dashboard/workspace-settings/integrations/workspace-integration)**.**
{% endhint %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side of app screen. Now, click the **gear icon** to open **Workspace Settings** > **Integrations**.
{% endstep %}

{% step %}

#### Search Notion

In the **Integrations** tab, search for **Notion** and click to open the **Notion** card.
{% endstep %}

{% step %}

#### Turn off workspace-wide integration

Toggle off the "**All Projects**" option and hit "**Continue**". You should see the "**Manage per project**" option now.

{% hint style="info" %}
By default, its turned on for workspace level integration. For project-wise integration, you need to disable "**All Projects**".
{% endhint %}
{% endstep %}

{% step %}

#### Select a BetterBugs project to integrate and hit "Connect"

Select a project from the projects name list (that's within your Workspace). From the "**Actions**" column, hit "**Connect**" for that project.
{% endstep %}

{% step %}

#### **Authorize BetterBugs.io for Notion**

Hit “**Allow access**” to authorize BetterBugs.io for your Notion page.

{% hint style="warning" %}
**IMPORTANT NOTE**&#x20;

If you're on a **free plan**, Steps 6 and 7 are **NOT REQUIRED**. **You can just SKIP** to "*How to Create Bug Report on Notion using BetterBugs*" section on this page.

**FOR PAID PLANS (Teams and Enterprise)**

Steps 6 and 7 enables you to explicitly choose between:

* **Manual Ticket Creation (Default)**: This means for sharing a bug report to Notion, you'd need to manually populate fields for Notion (**Database**, **Environment**, and **others**). Its a **FREE FEATURE**.
* **Automatic Ticket Creation:** This means for sharing a bug report to Notion, you can configure BetterBugs to auto-populate fields for your Notion page (**Database**, **Environment**, and **others**). Its a **PAID FEATURE**.
  {% endhint %}
  {% endstep %}

{% step %}

#### Optional: Choose your preferred method for creating tickets: Manually or Automatically

From the "**Forward Bug Reports**" dropdown, select your preferred method for creating tickets in your project tool:

* **Manually**: Enables you to **create tickets manually**. *Here, we've selected the manual method to showcase project integration steps.*
* **Automatically**: Enables you to [**create tickets with automation**](/dashboard/workspace-settings/integrations/project-integration/project-automation).
  {% endstep %}

{% step %}

#### Optional: Select "Manually" and Connect

Finally, select "**Manually**" from the "**Forward Bug Reports**" dropdown and hit "**Connect**".
{% endstep %}
{% endstepper %}

Okay! You're good to go with the Project level integration for Notion. Now, you can create detailed reports and share them as Notion tasks directly from your browser with a few clicks.

### How to Create Bug Report on Notion using BetterBugs

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2F0rYAwt61tEfs0ErRzMe2%2F02-Create-New-Bug-Report-and-Send-to-Notion-Page.mp4?alt=media&token=b2458996-43ac-445b-b90f-5ed20e1a21bb>" %}
How to Create Bug Report on Notion Page using BetterBugs: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Capture the Bug and Add Bug Details

Use the BetterBugs extension to capture the bug and add details for it. You can add the details (*Title + Quick Summary + Steps to Reproduce*) manually in the description area manually or automatically with the "**AI**" toggle.
{% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project Integrated with Notion

From the two dropdowns above the description area, select:

* **BetterBugs Workspace**
* **BetterBugs Project** (that you integrated with Notion)
  {% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select Notion Page

Open "**+ Send to your PM Tool**" dropdown and select "**Notion Page**".
{% endstep %}

{% step %}

#### **Populate Task Details for Notion and Hit "Next"**

Populate Notion Fields for the report: **Database**, **Environment**, and **others** and click "**Next**".
{% endstep %}

{% step %}

#### Create Session

From the top right, click "**Create Session**".
{% endstep %}
{% endstepper %}

There you go!

A new tab with the Notion task opens up posting the task to the Notion page packed with all the bug details and a link to the **complete bug report** with [**developer tools info**](/product-features/developer-tools).

* Use the report link in your Notion task to access the complete report on BetterBugs.
* You can also access the Notion task from the BetterBugs report from the "[**Comments & Activities**](/product-features/comments-activities)" tab located below the bug description area.

### How to Send Existing BetterBugs Report to Notion Page

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FZWNJ6z6safAb6Xz8IG1I%2F03-Send-Existing-BetterBugs-report-to-Notion-Page.mp4?alt=media&token=91f99b3a-17f0-4882-96e0-300c1e5c3a81>" %}
How to Send Existing BetterBugs Report to Notion Page: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open a Bug Report

Login to BetterBugs and open a project report to share on Notion.
{% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select Notion Page

From the top-right of the report screen, open "**+ Send to your PM Tool**" dropdown and select "**Notion Page**".
{% endstep %}

{% step %}

#### Populate Task Details for Notion and Click "Create Task"

Populate Notion Fields for the report: **Database**, **Environment,** and **others** and click "**Create Task**".
{% endstep %}
{% endstepper %}

Okay! You're all set. This instantly should create Notion task with the BetterBugs bug report.

### How to Disconnect BetterBugs Project from Notion

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FukvHWtKFQNxGIFy43xnT%2F04-Disconnect-BetterBugs-Project-from-Notion.mp4?alt=media&token=b2a3f18d-3423-4fbf-944c-5a49e49b598d>" %}
How to Disconnect BetterBugs Project from Notion: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open Project Settings

Use the **Gear Icon** beside the **BetterBugs Project** **Name** to open **Project Settings**.
{% endstep %}

{% step %}

#### Go to Workspace Settings > Integrations

Navigate to **Workspace Settings** > **Integrations**
{% endstep %}

{% step %}

#### Search Jira

In the **Integrations** tab, search for **Notion** and click to open the **Notion** card.
{% endstep %}

{% step %}

#### Select BetterBugs project to disconnect and click (⋮) under "Actions"

In the Notion card, select the BetterBugs project (from the Project list) to disconnect. For the project, click vertical dots (**⋮**) under the **Actions** column.
{% endstep %}

{% step %}

#### Disconnect and Confirm Action

To confirm action, click "**Disconnect**" and "**Continue**".
{% endstep %}
{% endstepper %}

This instantly disconnects Notion from the selected BetterBugs project.


# GitLab

Share complete bug reports as issues directly to your GitLab issue boards.

### BetterBugs integration with GitLab

Issue tracking with GitLab just got even more intuitive and efficient with BetterBugs integration.

BetterBugs enables you to create comprehensive bug reports and share them directly with your GitLab project in just a few clicks, without ever switching browser windows. No need to juggle tools or manually input issue details.

Once you connect a BetterBugs project or your entire workspace with GitLab, reporting bugs is effortless. Simply take a screenshot or record a video of the issue, add relevant details, describe the problem and issue repro steps (either manually or with AI), populate the task fields for the selected GitLab project, and instantly add the issue to your GitLab board.

All key technical details, such as environment information, console logs, network requests, navigation steps, and more, are automatically attached to your bug report. One click, and everything is captured and included. Developers can then access the complete bug report through the shared link on the GitLab issue board, which provides everything they need (visual proof, issue descriptions, repro steps, logs, environment info, and more) to start debugging right off the bat.

This streamlined process makes bug reporting up to 10X faster and significantly shortens turnaround times.

### How to Integrate BetterBugs Project with GitLab: Step-by-Step

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2F1pep7mljyZRkqZ2xFCeL%2F00-BetterBugs-and-GitLab-Integration.mp4?alt=media&token=57c5740c-46e4-40db-9524-8c5bc421ce04>" %}
How to Integrate BetterBugs Project with GitLab: Video Demo
{% endembed %}

{% hint style="info" %}
Here, we've covered the steps to integrate a single BetterBugs project (within your BetterBugs Workspace) with GitLab. You can also integrate the complete BetterBugs Workspace in one go (that includes all the projects within your Workspace) to GitLab or any other project tool. [**Check out the steps for Workspace Integration**](/dashboard/workspace-settings/integrations/workspace-integration)**.**
{% endhint %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side of app screen. Now, click the **gear icon** to open **Workspace Settings** > **Integrations**.
{% endstep %}

{% step %}

#### Search GitLab

In the **Integrations** tab, search for **GitLab** and click to open the **GitLab** card.
{% endstep %}

{% step %}

#### Turn off workspace-wide integration

Toggle off the "**All Projects**" option and hit "**Continue**". You should see the "**Manage per project**" option now.

{% hint style="info" %}
By default, its turned on for workspace level integration. For project-wise integration, you need to disable "**All Projects**".
{% endhint %}
{% endstep %}

{% step %}

#### Select a BetterBugs project to integrate and hit "Connect"

Select a project from the projects name list (that's within your Workspace). From the "**Actions**" column, hit "**Connect**" for that project.
{% endstep %}

{% step %}

#### Select GitLab Version for Integration: Cloud Version (gitlab.com with OAuth)

You've two versions for it:

* **Cloud Version** -> Enables you to connect BetterBugs.io with gitlab.com with OAuth.
* **Self-hosted** -> Enables you to connect your self hosted GitLab project with your Personal Access Token.

Select the Cloud Version of GitLab. You can check out the [steps to connect GitLab Self Hosted version](/product-features/integrations/gitlab/self-hosted-gitlab).
{% endstep %}

{% step %}

#### **Authorize BetterBugs.io for GitLab**

Authorize BetterBugs.io for your GitLab account.

{% hint style="warning" %}
**IMPORTANT NOTE**&#x20;

If you're on a **free plan**, Steps 6 and 7 are **NOT REQUIRED**. **You can just SKIP** to "*How to Raise an Issue on GitLab using BetterBugs*" section on this page.

**FOR PAID PLANS (Teams and Enterprise)**

Steps 6 and 7 enables you to explicitly choose between:

* **Manual Issue Creation (Default)**: This means for sharing a bug report to GitLab, you'd need to manually populate fields for your GitLab Repo. (**Project**, **Assignees**, **Labels**, and others). Its a **FREE FEATURE**.
* **Automatic Issue Creation:** This means for sharing a bug report to GitLab Repo, you can configure BetterBugs to auto-populate fields for GitLab (**Project**, **Assignees**, **Labels**, and others). Its a **PAID FEATURE**.
  {% endhint %}
  {% endstep %}

{% step %}

#### Optional: Choose your preferred method for creating tickets: Manually or Automatically

From the "**Forward Bug Reports**" dropdown, select your preferred method for creating tickets in your project tool:

* **Manually**: Enables you to **raise issues manually**. *Here, we've selected the manual method to showcase project integration steps.*
* **Automatically**: Enables you to [**raise issues with automation**](/dashboard/workspace-settings/integrations/project-integration/project-automation).
  {% endstep %}

{% step %}

#### Optional: Select "Manually" and Connect

Finally, select "**Manually**" from the "**Forward Bug Reports**" dropdown and hit "**Connect**".
{% endstep %}
{% endstepper %}

Okay! You're good to go with the Project level integration for GitLab. Now, you can create detailed reports and share them as GitLab issues directly from your browser with a few clicks.

### How to Raise an Issue on GitLab using BetterBugs

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2Fxg8hMvjwAZyqTyhUNPob%2F01-Raise-GitLab-Issue-Using-BetterBugs-io.mp4?alt=media&token=2b05c6ea-b6ff-4ac2-b51e-bc5c2f21d590>" %}
How to Raise Issue on GitLab using BetterBugs: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Capture the Bug and Add Bug Details

Use the BetterBugs extension to capture the bug and add details for it. You can add the details (*Title + Quick Summary + Steps to Reproduce*) manually in the description area manually or automatically with the "**AI**" toggle.
{% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project Integrated with GitLab

From the two dropdowns above the description area, select:

* **BetterBugs Workspace**
* **BetterBugs Project** (that you integrated with GitLab)
  {% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select GitLab Issue

Open "**+ Send to your PM Tool**" dropdown and select "**GitLab Issue**".
{% endstep %}

{% step %}

#### **Populate Issue Details for GitLab and Hit "Next"**

Populate GitLab Fields for the report: **Project**, **Assignees**, **Labels**, and others and click "**Next**".
{% endstep %}

{% step %}

#### Create Session

From the top right, click "**Create Session**".
{% endstep %}
{% endstepper %}

There you go!

A new tab with the GitLab issue opens up posting the work item to the GitLab project packed with all the bug details and a link to the **complete bug report** with [**developer tools info**](/product-features/developer-tools).

* Use the report link in your GitLab issue to access the complete report on BetterBugs.
* You can also access the GitLab issue from the BetterBugs report from the "[**Comments & Activities**](/product-features/comments-activities)" tab located below the bug description area.

### How to Send Existing BetterBugs Report to GitLab to Raise Issue

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2F3ydJ7zfgyiFqsrJdTGps%2F02-Send-Existing-Bug-Report-to-GitLab.mp4?alt=media&token=431ab249-c585-4e8e-a04e-b310092ce0de>" %}
How to Send Existing BetterBugs Report to GitLab to Raise Issue: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open a Bug Report

Login to BetterBugs and open a project report to share on GitLab.
{% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select GitLab Issue

From the top-right of the report screen, open "**+ Send to your PM Tool**" dropdown and select "**GitLab Issue**".
{% endstep %}

{% step %}

#### Populate Issue Details for GitLab and Click "Create Task"

Populate GitLab Fields for the report: **Project**, **Assignees**, **Labels**, and others and click "**Create Task**".
{% endstep %}
{% endstepper %}

Okay! You're all set. This instantly should create GitLab issue with the BetterBugs bug report.

### How to Disconnect BetterBugs Project from GitLab

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2Fr25h9irzeMiZl73diG2u%2F03-Disconnect-BetterBugs-from-GitLab.mp4?alt=media&token=1e6bae5e-83fb-4aa2-8a6c-6ef8f56eba37>" %}
How to Disconnect BetterBugs Project from GitLab: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open Project Settings

Use the **Gear Icon** beside the **BetterBugs Project** **Name** to open **Project Settings**.
{% endstep %}

{% step %}

#### Go to Workspace Settings > Integrations

Navigate to **Workspace Settings** > **Integrations**
{% endstep %}

{% step %}

#### Search GitLab

In the **Integrations** tab, search for **GitLab** and click to open the **GitLab** card.
{% endstep %}

{% step %}

#### Select BetterBugs project to disconnect and click (⋮) under "Actions"

In the GitLab card, select the BetterBugs project (from the Project list) to disconnect. For the project, click vertical dots (**⋮**) under the **Actions** column.
{% endstep %}

{% step %}

#### Disconnect and Confirm Action

To confirm action, click "**Disconnect**" and "**Continue**".
{% endstep %}
{% endstepper %}

This instantly disconnects GitLab from the selected BetterBugs project.


# Self-Hosted GitLab

Share complete bug reports as issues directly to your GitLab self-hosted project’s issue boards.

### BetterBugs Integration with Your Self-Hosted GitLab Instance

You can integrate BetterBugs.io with your self-hosted instance on GitLab.&#x20;

Whenever you face an issue in your app, you can instantly capture it using the BetterBugs extension and share it with your GitLab self-hosted instance as an issue.

With every issue raised (created as bug reports using BetterBugs) in your GitLab project, you get:

* The visual evidence captured as a screenshot, screen recording, or a 2-minute Rewind video session
* Issue description (added manually or AI-generated by the reporter)
* Device and environment info when the issue occurred.
* Console logs, network requests, and any other logs.
* Page navigation steps
* Metadata (Custom)
* App local and session storage

Your engineers get all this info as a bug report packed with visual evidence and technical details for debugging. You can access the complete bug report with the unique report link included within the GitLab task created as an issue on your self-hosted project.

### What Do You Need for the Setup and How it Works?

{% hint style="info" %}
Here’s what you need to do for integrating your self hosted project:

1. Set up a new OAuth application in GitLab&#x20;
2. Use the application (**Application ID** + **Secret**) credentials to integrate BetterBugs.io.

We've covered the steps for it.&#x20;
{% endhint %}

### How to Set Up a New OAuth Application in GitLab (for Self-Hosted instance): Step-by-Step

{% stepper %}
{% step %}

#### Login to GitLab

Login to your GitLab self hosted instance.
{% endstep %}

{% step %}

#### Create a New Application

Create a new application in GitLab with the following steps:

1. Click on your **Profile picture** in the top from the navigation pane.
2. Navigate to **Preferences** > **Applications** > **Add new application**
   {% endstep %}

{% step %}

#### Add Name, Redirect URI, and Select Scopes

Add details for the app:

* **Name** — Provide a unique name for your application, (e.g., BetterBugs Test App)
* **Redirect URI** — Here, add “`https://app.betterbugs.io/connect/gitlab`” as the Redirect URI. (*Please use this exact address for any new app(s) you’d want to connect with BetterBugs.)*
* **Confidential** — It should be ✅auto-checked by default.
* **Scopes** — Next, check ✅ only the “`api`” option in scopes. No other options are required.
  {% endstep %}

{% step %}

#### Save

Hit the “**Save application**” button from below to save.&#x20;
{% endstep %}

{% step %}

#### Copy the Newly Generated Application Credentials and Hit Continue

Copy your application credentials and keep them handy. You’ll need these to integrate with Betterbugs.

* **Application  ID**
* **Secret**

Now, hit “**Continue**” and you’re all set.
{% endstep %}
{% endstepper %}

### How to Integrate BetterBugs Project with GitLab (for Self-Hosted Instances): Step-by-Step

{% hint style="warning" %}
**PREREQUISITES for BetterBugs.io + GitLab Self-Hosted Integration**

* GitLab **Application ID** and **Secret** (as generated using the above steps)
* Your **GitLab Base URL** (self-hosted)
  {% endhint %}

{% hint style="info" %}
Here, we've covered the steps to integrate a single BetterBugs project (within your BetterBugs Workspace) with GitLab. You can also integrate the complete BetterBugs Workspace in one go (that includes all the projects within your Workspace) to GitLab or any other project tool. [**Check out the steps for Workspace Integration**](/dashboard/workspace-settings/integrations/workspace-integration)**.**
{% endhint %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side of app screen. Now, click the **gear icon** to open **Workspace Settings** > **Integrations**.
{% endstep %}

{% step %}

#### Search GitLab

In the **Integrations** tab, search for **GitLab** and click to open the **GitLab** card.
{% endstep %}

{% step %}

#### Turn off workspace-wide integration

Toggle off the "**All Projects**" option and hit "**Continue**". You should see the "**Manage per project**" option now.

{% hint style="info" %}
By default, its turned on for workspace level integration. For project-wise integration, you need to disable "**All Projects**".
{% endhint %}
{% endstep %}

{% step %}

#### Select a BetterBugs project to integrate and hit "Connect"

Select a project from the projects name list (that's within your Workspace). From the "**Actions**" column, hit "**Connect**" for that project.
{% endstep %}

{% step %}

#### Select GitLab Version for Integration: Self-hosted Version&#x20;

You've two versions for it:

* **Cloud Version** -> Enables you to [connect BetterBugs with gitlab.com with OAuth](/product-features/integrations/gitlab).
* **Self-hosted** -> Enables you to connect your self hosted GitLab project with your Personal Access Token.

Select the "**Self-hosted**" Version of GitLab.&#x20;
{% endstep %}

{% step %}

#### Enter GitLab application credentials

Enter details for the GitLab application + your GitLab Base URL:

* **Client ID\*** — Application ID
* **Client Secret\*** — Secret
* **Base URL** — GitLab Base URL

{% hint style="warning" %}
**IMPORTANT**

Make sure your **GitLab Base URL** (used during integration) **does not end with a trailing slash**.

**For example**: ✔️ <https://gitlab.example.com>

&#x20;                        ❌ <https://gitlab.example.com/>
{% endhint %}
{% endstep %}

{% step %}

#### **Authorize BetterBugs.io for GitLab**

Authorize BetterBugs.io for your GitLab account.

{% hint style="warning" %}
**IMPORTANT NOTE**&#x20;

If you're on a **free plan**, Steps 6 and 7 are **NOT REQUIRED**. **You can just SKIP** to "[*How to Raise an Issue on GitLab using BetterBugs*](/product-features/integrations/gitlab)" section.

**FOR PAID PLANS (Teams and Enterprise)**

Steps 6 and 7 enables you to explicitly choose between:

* **Manual Issue Creation (Default)**: This means for sharing a bug report to GitLab, you'd need to manually populate fields for your GitLab Repo. (**Project**, **Assignees**, **Labels**, and others). Its a **FREE FEATURE**.
* **Automatic Issue Creation:** This means for sharing a bug report to GitLab Repo, you can configure BetterBugs to auto-populate fields for GitLab (**Project**, **Assignees**, **Labels**, and others). Its a **PAID FEATURE**.
  {% endhint %}
  {% endstep %}

{% step %}

#### Optional: Choose your preferred method for creating tickets: Manually or Automatically

From the "**Forward Bug Reports**" dropdown, select your preferred method for creating tickets in your project tool:

* **Manually**: Enables you to **raise issues manually**. *Here, we've selected the manual method to showcase project integration steps.*
* **Automatically**: Enables you to [**raise issues with automation**](/dashboard/workspace-settings/integrations/project-integration/project-automation).
  {% endstep %}

{% step %}

#### Optional: Select "Manually" and Connect

Finally, select "**Manually**" from the "**Forward Bug Reports**" dropdown and hit "**Connect**".
{% endstep %}
{% endstepper %}

Okay! You're good to go with the Project level integration for GitLab Self-hosted version. Now, you can create detailed reports and share them as GitLab issues directly from your browser with a few clicks.


# Basecamp

Add perfect bug reports as tasks to your Basecamp project.

### BetterBugs integration with Basecamp

Now, you can integrate BetterBugs with Basecamp to share complete bug reports directly to your Basecamp project. Every Basecamp card you create with BetterBugs comes bundled with comprehensive details about the issue, including the bug title, a link to the complete bug report, steps to reproduce the issue, reporter details, device details, and more.&#x20;

Using BetterBugs, you can share visual and technically sound bug reports to your Basecamp’s chat or card table within your project. You do not have to switch tools to add bug reports to Basecamp. Once you integrate, all it takes is a few clicks to share bug reports right from your browser directly to your Basecamp project. This makes the bug reporting process up to 10X faster and significantly easier.

Using the report link in the Basecamp task, developers can then access the report with complete context and [technical details](/product-features/developer-tools) they need (visual proof, console logs, network requests, environment info, steps to reproduce, and more) for debugging.

### How to Integrate BetterBugs Project with Basecamp: Step-by-Step

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FUyrPl5WwbZQgAuptUKJ3%2F01-Integrate-BetterBugs-Project-with-Basecamp.mp4?alt=media&token=be534fd2-13fa-479d-9f56-0c84c3aaebda>" %}
How to Integrate BetterBugs Project with Basecamp: Video Demo
{% endembed %}

{% hint style="info" %}
Here, we've covered the steps to integrate a single BetterBugs project (within your BetterBugs Workspace) with Basecamp. You can also integrate the complete BetterBugs Workspace in one go (that includes all the projects within your Workspace) to Basecamp or any other project tool. [**Check out the steps for Workspace Integration**](/dashboard/workspace-settings/integrations/workspace-integration)**.**
{% endhint %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side of app screen. Now, click the **gear icon** to open **Workspace Settings** > **Integrations**.
{% endstep %}

{% step %}

#### Search Basecamp

In the **Integrations** tab, search for **Basecamp** and click to open the **Basecamp** card.
{% endstep %}

{% step %}

#### Turn off workspace-wide integration

Toggle off the "**All Projects**" option and hit "**Continue**". You should see the "**Manage per project**" option now.

{% hint style="info" %}
By default, its turned on for workspace level integration. For project-wise integration, you need to disable "**All Projects**".
{% endhint %}
{% endstep %}

{% step %}

#### Select a BetterBugs project to integrate and hit "Connect"

Select a project from the projects name list (that's within your Workspace). From the "**Actions**" column, hit "**Connect**" for that project.
{% endstep %}

{% step %}

#### **Authorize BetterBugs.io for Basecamp**

Click “**Allow**” to authorize BetterBugs.io for your Basecamp Workspace.

{% hint style="warning" %}
**IMPORTANT NOTE**&#x20;

If you're on a **free plan**, Steps 6 and 7 are **NOT REQUIRED**. **You can just SKIP** to "*How to Create Bug Report on Basecamp using BetterBugs*" section on this page.

**FOR PAID PLANS (Teams and Enterprise)**

Steps 6 and 7 enables you to explicitly choose between:

* **Manual Ticket Creation (Default)**: This means for sharing a bug report to Basecamp, you'd need to manually populate fields for your Basecamp project (**Organization**, **Project**, **Column,** and others). Its a **FREE FEATURE**.
* **Automatic Ticket Creation:** This means for sharing a bug report to Basecamp, you can configure BetterBugs to auto-populate fields for your Basecamp project (**Organization**, **Project**, **Column,** and others). Its a **PAID FEATURE**.
  {% endhint %}
  {% endstep %}

{% step %}

#### Optional: Choose your preferred method for creating tickets: Manually or Automatically

From the "**Forward Bug Reports**" dropdown, select your preferred method for creating tickets in your project tool:

* **Manually**: Enables you to **create tickets manually**. *Here, we've selected the manual method to showcase project integration steps.*
* **Automatically**: Enables you to [**create tickets with automation**](/dashboard/workspace-settings/integrations/project-integration/project-automation).
  {% endstep %}

{% step %}

#### Optional: Select "Manually" and Connect

Finally, select "**Manually**" from the "**Forward Bug Reports**" dropdown and hit "**Connect**".
{% endstep %}
{% endstepper %}

Okay! You're good to go with the Project level integration for your Basecamp app. Now, you can create detailed reports and share them as Basecamp tasks directly from your browser with a few clicks.

### How to Create Bug Report on Basecamp using BetterBugs

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FbPAOQdSvQCFf9A9g2ZPF%2F02-Create-a-Bug-Report-on-Basecamp-using-BetterBugs.mp4?alt=media&token=dc091678-ad6c-4921-ad02-27efc88a705f>" %}
How to Create Bug Report on Basecamp using BetterBugs: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Capture the Bug and Add Bug Details

Use the BetterBugs extension to capture the bug and add details for it. You can add the details (*Title + Quick Summary + Steps to Reproduce*) manually in the description area manually or automatically with the "**AI**" toggle.
{% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project Integrated with Basecamp

From the two dropdowns above the description area, select:

* **BetterBugs Workspace**
* **BetterBugs Project** (that you integrated with Basecamp)
  {% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select Basecamp Task

Open "**+ Send to your PM Tool**" dropdown and select "**Basecamp Task**".
{% endstep %}

{% step %}

#### **Populate Task Details for Basecamp and Hit "Next"**

Populate Basecamp Fields for the report: Organization, **Project**, **Column,** and **others** and click "**Next**".
{% endstep %}

{% step %}

#### Create Session

From the top right, click "**Create Session**".
{% endstep %}
{% endstepper %}

There you go!

A new tab with the Basecamp task opens up posting the task to the Basecamp project packed with all the bug details and a link to the **complete bug report** with [**developer tools info**](/product-features/developer-tools).

* Use the report link in your Basecamp task to access the complete report on BetterBugs.
* You can also access the Basecamp task from the BetterBugs report from the "[**Comments & Activities**](/product-features/comments-activities)" tab located below the bug description area.

### How to Send Existing BetterBugs Report to Basecamp

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FaHDdUF2IxYVr7wbg5Uae%2F03-Send-Existing-BetterBugs-Report-to-Basecamp.mp4?alt=media&token=eac7b5d0-941b-4065-bffe-c942639f5af7>" %}
How to Send Existing BetterBugs Report to Basecamp: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open a Bug Report

Login to BetterBugs and open a project report to share on Basecamp.
{% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select Basecamp Task

From the top-right of the report screen, open "**+ Send to your PM Tool**" dropdown and select "**Basecamp Task**".
{% endstep %}

{% step %}

#### Populate Task Details for Basecamp and Click "Create Task"

Populate Basecamp Fields for the report: Organization, **Project**, **Column**, and **others**  and click "**Create Task**".
{% endstep %}
{% endstepper %}

Okay! You're all set. This instantly should create Basecamp task with the BetterBugs bug report.

### How to Disconnect BetterBugs Project from Basecamp

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FLVswxk1PCtVRUemWtWFM%2F04-Disconnect-BetterBugs-Project-from-Basecamp.mp4?alt=media&token=d2ef6911-2046-41ed-8987-deedb21606ea>" %}
How to Disconnect BetterBugs Project from Basecamp: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open Project Settings

Use the **Gear Icon** beside the **BetterBugs Project** **Name** to open **Project Settings**.
{% endstep %}

{% step %}

#### Go to Workspace Settings > Integrations

Navigate to **Workspace Settings** > **Integrations**
{% endstep %}

{% step %}

#### Search Basecamp

In the **Integrations** tab, search for **Basecamp** and click to open the **Basecamp** card.
{% endstep %}

{% step %}

#### Select BetterBugs project to disconnect and click (⋮) under "Actions"

In the Basecamp card, select the BetterBugs project (from the Project list) to disconnect. For the project, click vertical dots (**⋮**) under the **Actions** column.
{% endstep %}

{% step %}

#### Disconnect and Confirm Action

To confirm action, click "**Disconnect**" and "**Continue**".
{% endstep %}
{% endstepper %}

This instantly disconnects Basecamp from the selected BetterBugs project.


# Zoho

Share bit-perfect bug reports as tasks to your Zoho project.

### BetterBugs integration with Zoho

You can integrate BetterBugs with Zoho, making it easier to send detailed bug reports directly into your Zoho projects. Each task created through BetterBugs includes key information like the bug title, a link to the full report, steps to reproduce the issue, who reported it, device details, and more.

You can share bug reports to Zoho Projects without switching tools. Just a few clicks from your browser, and the report is added to your Zoho project as a task. This makes reporting bugs much faster and easier.

Developers can then open the Zoho task and access the complete bug report using the report link included within the task. The bug report bundles everything they need to fix the issue — screenshots, console logs, network data, environment details, and clear steps to reproduce.

### How to Integrate BetterBugs Project with Zoho Bug Tracker: Step-by-Step

{% hint style="info" %}
Here, we've covered the steps to integrate a single BetterBugs project (within your BetterBugs Workspace) with Zoho. You can also integrate the complete BetterBugs Workspace in one go (that includes all the projects within your Workspace) to Zoho or any other project tool. [**Check out the steps for Workspace Integration**](/dashboard/workspace-settings/integrations/workspace-integration)**.**
{% endhint %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side of app screen. Now, click the **gear icon** to open **Workspace Settings** > **Integrations**.
{% endstep %}

{% step %}

#### Search Zoho

In the **Integrations** tab, search for **Zoho** and click to open the **Zoho** card.
{% endstep %}

{% step %}

#### Turn off workspace-wide integration

Toggle off the "**All Projects**" option and hit "**Continue**". You should see the "**Manage per project**" option now.

{% hint style="info" %}
By default, its turned on for workspace level integration. For project-wise integration, you need to disable "**All Projects**".
{% endhint %}
{% endstep %}

{% step %}

#### Select a BetterBugs project to integrate and hit "Connect"

Select a project from the projects name list (that's within your Workspace). From the "**Actions**" column, hit "**Connect**" for that project.
{% endstep %}

{% step %}

#### **Authorize BetterBugs.io for Zoho**

Authorize BetterBugs.io for your Zoho workspace.

{% hint style="warning" %}
**IMPORTANT NOTE**&#x20;

If you're on a **free plan**, Steps 6 and 7 are **NOT REQUIRED**. **You can just SKIP** to "*How to Create Bug Report on Zoho Bug Tracker using BetterBugs*" section on this page.

**FOR PAID PLANS (Teams and Enterprise)**

Steps 6 and 7 enables you to explicitly choose between:

* **Manual Ticket Creation (Default)**: This means for sharing a bug report to Zoho, you'd need to manually populate fields for your Zoho task. (**Portal**, **Project**, **Type**, **Task List**, and others). Its a **FREE FEATURE**.
* **Automatic Ticket Creation:** This means for sharing a bug report to Zoho, you can configure BetterBugs to auto-populate fields for Zoho task (**Portal**, **Project**, **Type**, **Task List**, and others). Its a **PAID FEATURE**.
  {% endhint %}
  {% endstep %}

{% step %}

#### Optional: Choose your preferred method for creating tickets: Manually or Automatically

From the "**Forward Bug Reports**" dropdown, select your preferred method for creating tickets in your project tool:

* **Manually**: Enables you to **create task manually**. *Here, we've selected the manual method to showcase project integration steps.*
* **Automatically**: Enables you to [**create task with automation**](/dashboard/workspace-settings/integrations/project-integration/project-automation).
  {% endstep %}

{% step %}

#### Optional: Select "Manually" and Connect

Finally, select "**Manually**" from the "**Forward Bug Reports**" dropdown and hit "**Connect**".
{% endstep %}
{% endstepper %}

Okay! You're good to go with the Project level integration for Zoho. Now, you can create detailed reports and share them as Zoho tasks directly from your browser with a few clicks.

### How to Create Bug Report on Zoho Bug Tracker using BetterBugs

{% stepper %}
{% step %}

#### Capture the Bug and Add Bug Details

Use the BetterBugs extension to capture the bug and add details for it. You can add the details (*Title + Quick Summary + Steps to Reproduce*) manually in the description area manually or automatically with the "**AI**" toggle.
{% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project Integrated with Zoho

From the two dropdowns above the description area, select:

* **BetterBugs Workspace**
* **BetterBugs Project** (that you integrated with Zoho)
  {% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select Zoho Task

Open "**+ Send to your PM Tool**" dropdown and select "**Zoho Task**".
{% endstep %}

{% step %}

#### **Populate Task Details for Zoho  and Hit "Next"**

Populate Zoho Task Fields for the report: **Portal**, **Project**, **Type**, **Task List**, and others and click "**Next**".
{% endstep %}

{% step %}

#### Create Session

From the top right, click "**Create Session**".
{% endstep %}
{% endstepper %}

There you go!

A new tab with the Zoho task opens up posting the task to the Zoho Bug Tracker packed with all the bug details and a link to the **complete bug report** with [**developer tools info**](/product-features/developer-tools).

* Use the report link in your Zoho task to access the complete report on BetterBugs.
* You can also access the Zoho task from the BetterBugs report from the "[**Comments & Activities**](/product-features/comments-activities)" tab located below the bug description area.

### How to Send Existing BetterBugs Report to Zoho Bug Tracker

{% stepper %}
{% step %}

#### Open a Bug Report

Login to BetterBugs and open a project report to share on Zoho.
{% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select Zoho Task

From the top-right of the report screen, open "**+ Send to your PM Tool**" dropdown and select "**Zoho Task**".
{% endstep %}

{% step %}

#### Populate Task Details for Zoho and Click "Create Task"

Populate Zoho Task Fields for the report: **Portal**, **Project**, **Type**, **Task List**, and others and click "**Create Task**".
{% endstep %}
{% endstepper %}

Okay! You're all set. This instantly should create Zoho task with the BetterBugs bug report.

### How to Disconnect BetterBugs Project from Zoho

{% stepper %}
{% step %}

#### Open Project Settings

Use the **Gear Icon** beside the **BetterBugs Project** **Name** to open **Project Settings**.
{% endstep %}

{% step %}

#### Go to Workspace Settings > Integrations

Navigate to **Workspace Settings** > **Integrations**
{% endstep %}

{% step %}

#### Search Zoho

In the **Integrations** tab, search for **Zoho** and click to open the **Zoho** card.
{% endstep %}

{% step %}

#### Select BetterBugs project to disconnect and click (⋮) under "Actions"

In the Zoho card, select the BetterBugs project (from the Project list) to disconnect. For the project, click vertical dots (**⋮**) under the **Actions** column.
{% endstep %}

{% step %}

#### Disconnect and Confirm Action

To confirm action, click "**Disconnect**" and "**Continue**".
{% endstep %}
{% endstepper %}

This instantly disconnects Zoho from the selected BetterBugs project.


# Bugasura

Share perfect bug reports to Bugasura with all the context and details you need for debugging.

### BetterBugs integration with Bugasura

Now you can integrate BetterBugs with Bugasura for even better bug tracking and debugging workflows.

{% hint style="warning" %}
**PREREQUISITE: Bugasura User API Key**

You'd need your Bugasura account User API key to integrate BetterBugs. Here're the steps to get it:

1. Log into your Bugasura account
2. Click the user avatar from the bottom left screen to open User Profile&#x20;
3. Copy the User API key and keep it handy to use for the integration steps.
   {% endhint %}

### How to Integrate BetterBugs Project with Bugasura: Step-by-Step

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2Ffk2wiwCeVOuRwjgBzewo%2F01-Integrate-BetterBugs-with-Bugasura.mp4?alt=media&token=f6bea25e-0ae8-4951-b22a-a335bf9e9b4e>" %}
How to Integrate BetterBugs Project with Bugasura: Video Demo
{% endembed %}

{% hint style="info" %}
Here, we've covered the steps to integrate a single BetterBugs project (within your BetterBugs Workspace) with Bugasura. You can also integrate the complete BetterBugs Workspace in one go (that includes all the projects within your Workspace) to Bugasura or any other project tool. [**Check out the steps for Workspace Integration**](/dashboard/workspace-settings/integrations/workspace-integration)**.**
{% endhint %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side of app screen. Now, click the **gear icon** to open **Workspace Settings** > **Integrations**.
{% endstep %}

{% step %}

#### Search Bugasura

In the **Integrations** tab, search for **Bugasura** and click to open the **Bugasura** card.
{% endstep %}

{% step %}

#### Turn off workspace-wide integration

Toggle off the "**All Projects**" option and hit "**Continue**". You should see the "**Manage per project**" option now.

{% hint style="info" %}
By default, its turned on for workspace level integration. For project-wise integration, you need to disable "**All Projects**".
{% endhint %}
{% endstep %}

{% step %}

#### Select a BetterBugs project to integrate and hit "Connect"

Select a project from the projects name list (that's within your Workspace). From the "**Actions**" column, hit "**Connect**" for that project.
{% endstep %}

{% step %}

#### Add User API Key for Bugasura

Add the **User API key** for your Bugasura Workspace and hit “**Connect**”.

{% hint style="warning" %}
**IMPORTANT NOTE**&#x20;

If you're on a **free plan**, Steps 6 and 7 are **NOT REQUIRED**. **You can just SKIP** to "*How to Create Bug Report on Bugasura using BetterBugs*" section on this page.

**FOR PAID PLANS (Teams and Enterprise)**

Steps 6 and 7 enables you to explicitly choose between:

* **Manual Ticket Creation (Default)**: This means for sharing a bug report to Bugasura, you'd need to manually populate fields for your Bugasura project (**Team**, **Project**, **Sprint**, **Assignees**, and others). Its a **FREE FEATURE**.
* **Automatic Ticket Creation:** This means for sharing a bug report to Bugasura, you can configure BetterBugs to auto-populate fields for your Bugasura project (**Team**, **Project**, **Sprint**, **Assignees**, and others). Its a **PAID FEATURE**.
  {% endhint %}
  {% endstep %}

{% step %}

#### Optional: Choose your preferred method for creating tickets: Manually or Automatically

From the "**Forward Bug Reports**" dropdown, select your preferred method for creating tickets in your project tool:

* **Manually**: Enables you to **create tasks manually**. *Here, we've selected the manual method to showcase project integration steps.*
* **Automatically**: Enables you to [**create task with automation**](/dashboard/workspace-settings/integrations/project-integration/project-automation).
  {% endstep %}

{% step %}

#### Optional: Select "Manually" and Connect

Finally, select "**Manually**" from the "**Forward Bug Reports**" dropdown and hit "**Connect**".
{% endstep %}
{% endstepper %}

Okay! You're good to go with the Project level integration for Bugasura. Now, you can create detailed reports and share them as Bugasura tickets directly from your browser with a few clicks.

### How to Create Bug Report on Bugasura using BetterBugs

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FkXlPg0erz3ZRBJLMK7u1%2F02-Create-Bug-Report-on-Bugasura.mp4?alt=media&token=f9d5583a-5742-4826-82f0-1c5d30db5a3c>" %}
How to Create Bug Report on Bugasura using BetterBugs: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Capture the Bug and Add Bug Details

Use the BetterBugs extension to capture the bug and add details for it. You can add the details (*Title + Quick Summary + Steps to Reproduce*) manually in the description area manually or automatically with the "**AI**" toggle.
{% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project Integrated with Bugasura

From the two dropdowns above the description area, select:

* **BetterBugs Workspace**
* **BetterBugs Project** (that you integrated with Bugasura)
  {% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select Bugasura Tracker

Open "**+ Send to your PM Tool**" dropdown and select "**Bugasura Tracker**".
{% endstep %}

{% step %}

#### **Populate Ticket Details for Bugasura and Hit "Next"**

Populate Bugasura Fields for the report: **Team**, **Project**, **Sprint**, **Assignees**, and others and click "**Next**".
{% endstep %}

{% step %}

#### Create Session

From the top right, click "**Create Session**".
{% endstep %}
{% endstepper %}

There you go!

A new tab with the Bugasura task opens up posting the task to the Bugasura project packed with all the bug details and a link to the **complete bug report** with [**developer tools info**](/product-features/developer-tools).

* Use the report link in your Bugasura task to access the complete report on BetterBugs.
* You can also access the Bugasura Task from the BetterBugs report from the "[**Comments & Activities**](/product-features/comments-activities)" tab located below the bug description area.

### How to Send Existing BetterBugs Report to Bugasura

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FKXxNNwYGMOCJoidsTM4y%2F03-Send-Existing-Bug-Report-to-Bugasura.mp4?alt=media&token=f51bdd9a-f527-4c52-a0af-ff50e8e706c5>" %}
How to Send Existing BetterBugs Report to Bugasura: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open a Bug Report

Login to BetterBugs and open a project report to share on Bugasura.
{% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select Bugasura Tracker

From the top-right of the report screen, open "**+ Send to your PM Tool**" dropdown and select "**Bugasura Tracker**".
{% endstep %}

{% step %}

#### Populate Task Details for Bugasura and Click "Create Task"

Populate Bugasura Fields for the report: **Team**, **Project**, **Sprint**, **Assignees**, and others and click "**Create Task**".
{% endstep %}
{% endstepper %}

Okay! You're all set. This instantly should create Bugasura ticket with the BetterBugs bug report.

### How to Disconnect BetterBugs Project from Bugasura

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2F7NHmvMOKOLDYoUG3rt65%2F04-Disconnect-BetterBugs-project-from-Bugasura.mp4?alt=media&token=31eb8607-9e25-4bb9-b3d3-93e26c1175d3>" %}
How to Disconnect BetterBugs Project from Bugasura: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open Project Settings

Use the **Gear Icon** beside the **BetterBugs Project** **Name** to open **Project Settings**.
{% endstep %}

{% step %}

#### Go to Workspace Settings > Integrations

Navigate to **Workspace Settings** > **Integrations**
{% endstep %}

{% step %}

#### Search Bugasura

In the **Integrations** tab, search for **Bugasura** and click to open the **Bugasura** card.
{% endstep %}

{% step %}

#### Select BetterBugs project to disconnect and click (⋮) under "Actions"

In the Click Up card, select the BetterBugs project (from the Project list) to disconnect. For the project, click vertical dots (**⋮**) under the **Actions** column.
{% endstep %}

{% step %}

#### Disconnect and Confirm Action

To confirm action, click "**Disconnect**" and "**Continue**".
{% endstep %}
{% endstepper %}

This instantly disconnects Bugasura from the selected BetterBugs project.


# ProofHub

Create bug reports and share directly to your ProofHub project with all the technical details and context you need for debugging purposes.

### BetterBugs integration with ProofHub

{% hint style="info" %}
**REQUIREMENTS**

* **ProofHub Domain**: Check out the [steps to get your ProofHub Domain](https://help.proofhub.com/plus/account/custom-domain/).
* **ProofHub API Key:** Check out the [steps to get your ProofHub API Key](https://help.proofhub.com/swift/others/how-to-access-your-api-key).
  {% endhint %}

### How to Integrate BetterBugs Project with ProofHub: Step-by-Step

{% hint style="info" %}
Here, we've covered the steps to integrate a single BetterBugs project (within your BetterBugs Workspace) with ProofHub. You can also integrate the complete BetterBugs Workspace in one go (that includes all the projects within your Workspace) to ProofHub or any other project tool. [**Check out the steps for Workspace Integration**](/dashboard/workspace-settings/integrations/workspace-integration)**.**
{% endhint %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side of app screen. Now, click the **gear icon** to open **Workspace Settings** > **Integrations**.
{% endstep %}

{% step %}

#### Search ProofHub

In the **Integrations** tab, search for **ProofHub** and click to open the **ProofHub** card.
{% endstep %}

{% step %}

#### Turn off workspace-wide integration

Toggle off the "**All Projects**" option and hit "**Continue**". You should see the "**Manage per project**" option now.

{% hint style="info" %}
By default, its turned on for workspace level integration. For project-wise integration, you need to disable "**All Projects**".
{% endhint %}
{% endstep %}

{% step %}

#### Select a BetterBugs project to integrate and hit "Connect"

Select a project from the projects name list (that's within your Workspace). From the "**Actions**" column, hit "**Connect**" for that project.
{% endstep %}

{% step %}

#### Enter ProofHub Domain\* and API Key\*

Add your **ProofHub Domain\*** and the **API Key\*** and hit "**Connect**".
{% endstep %}

{% step %}

#### **Authorize BetterBugs.io for ProofHub**

Authorize BetterBugs.io for your ProofHub workspace.

{% hint style="warning" %}
**IMPORTANT NOTE**&#x20;

If you're on a **free plan**, Steps 6 and 7 are **NOT REQUIRED**. **You can just SKIP** to "*How to Create Bug Report on ProofHub using BetterBugs*" section on this page.

**FOR PAID PLANS (Teams and Enterprise)**

Steps 6 and 7 enables you to explicitly choose between:

* **Manual Ticket Creation (Default)**: This means for sharing a bug report to ProofHub, you'd need to manually populate fields for your ProofHub project (**Project**, **Todo List**, **Assignees**, **Labels**, and others). Its a **FREE FEATURE**.
* **Automatic Ticket Creation:** This means for sharing a bug report to ProofHub, you can configure BetterBugs to auto-populate fields for your ProofHub project (**Project**, **Todo List**, **Assignees**, **Labels**, and others). Its a **PAID FEATURE**.
  {% endhint %}
  {% endstep %}

{% step %}

#### Optional: Choose your preferred method for creating tickets: Manually or Automatically

From the "**Forward Bug Reports**" dropdown, select your preferred method for creating tickets in your project tool:

* **Manually**: Enables you to **create tickets manually**. *Here, we've selected the manual method to showcase project integration steps.*
* **Automatically**: Enables you to [**create tickets with automation**](/dashboard/workspace-settings/integrations/project-integration/project-automation).
  {% endstep %}

{% step %}

#### Optional: Select "Manually" and Connect

Finally, select "**Manually**" from the "**Forward Bug Reports**" dropdown and hit "**Connect**".
{% endstep %}
{% endstepper %}

Okay! You're good to go with the Project level integration for ProofHub. Now, you can create detailed reports and share them as ProofHub tickets directly from your browser with a few clicks.

### How to Create Bug Report on ProofHub using BetterBugs

{% stepper %}
{% step %}

#### Capture the Bug and Add Bug Details

Use the BetterBugs extension to capture the bug and add details for it. You can add the details (*Title + Quick Summary + Steps to Reproduce*) manually in the description area manually or automatically with the "**AI**" toggle.
{% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project Integrated with ProofHub

From the two dropdowns above the description area, select:

* **BetterBugs Workspace**
* **BetterBugs Project** (that you integrated with ProofHub)
  {% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select ProofHub Task

Open "**+ Send to your PM Tool**" dropdown and select "**ProofHub Task**".
{% endstep %}

{% step %}

#### **Populate Ticket Details for ProofHub and Hit "Next"**

Populate ProofHub Fields for the report: **Project**, **Todo List**, **Assignees**, **Labels**, and **others** and click "**Next**".
{% endstep %}

{% step %}

#### Create Session

From the top right, click "**Create Session**".
{% endstep %}
{% endstepper %}

There you go!

A new tab with the ProofHub task opens up posting the task to the ProofHub project packed with all the bug details and a link to the **complete bug report** with [**developer tools info**](/product-features/developer-tools).

* Use the report link in your ProofHub task to access the complete report on BetterBugs.
* You can also access the ProofHub task from the BetterBugs report from the "[**Comments & Activities**](/product-features/comments-activities)" tab located below the bug description area.

### How to Send Existing BetterBugs Report to ProofHub

{% stepper %}
{% step %}

#### Open a Bug Report

Login to BetterBugs and open a project report to share on ProofHub.
{% endstep %}

{% step %}

#### Click "+ Send to your PM Tool" Dropdown and Select ProofHub Task

From the top-right of the report screen, open "**+ Send to your PM Tool**" dropdown and select "**ProofHub Task**".
{% endstep %}

{% step %}

#### Populate Ticket Details for ProofHub and Click "Create Task"

Populate ProofHub Fields for the report: **Project**, **Todo List**, **Assignees**, **Labels**, and **others** and click "**Create Task**".
{% endstep %}
{% endstepper %}

Okay! You're all set. This instantly should create ProofHub task with the BetterBugs bug report.

### How to Disconnect BetterBugs Project from ProofHub

{% stepper %}
{% step %}

#### Open Project Settings

Use the **Gear Icon** beside the **BetterBugs Project** **Name** to open **Project Settings**.
{% endstep %}

{% step %}

#### Go to Workspace Settings > Integrations

Navigate to **Workspace Settings** > **Integrations**
{% endstep %}

{% step %}

#### Search ProofHub

In the **Integrations** tab, search for **ProofHub** and click to open the **ProofHub** card.
{% endstep %}

{% step %}

#### Select BetterBugs project to disconnect and click (⋮) under "Actions"

In the ProofHub card, select the BetterBugs project (from the Project list) to disconnect. For the project, click vertical dots (**⋮**) under the **Actions** column.
{% endstep %}

{% step %}

#### Disconnect and Confirm Action

To confirm action, click "**Disconnect**" and "**Continue**".
{% endstep %}
{% endstepper %}

This instantly disconnects ProofHub from the selected BetterBugs project.


# Sentry

Get all event logs and error stack traces from Sentry within your bug report.

### BetterBugs integration with Sentry

BetterBugs + Sentry integration connects your Sentry infrastructure to your BetterBugs account. You can get Sentry event logs (**front and backend**) auto-attached to every bug report.

You don’t have to log in to your Sentry account every time to see event logs or stack traces coming from your Sentry infrastructure setup. See those logs directly on the frontend whenever you capture issues using BetterBugs.

### How it works

You can capture Sentry event logs or stack traces directly in the bug reports you create. Here’s how it works:

* Whenever you capture an issue, it auto-attaches Sentry event logs with timestamps to every bug report.&#x20;
* You can see event logs on the frontend without signing in to the Sentry account every time to see the event logs.&#x20;
* You can get the Sentry event logs for the connected project from up to 3 hours before and 3 hours after you capture an issue.
* Detailed bug reports with Sentry event logs help get to the root cause of the issue much faster.&#x20;

### Steps to integrate BetterBugs with Sentry

{% embed url="<https://youtu.be/wxX-OO8nt58?si=dKpmEiL_JvslXUal>" %}
BetterBugs and Sentry Integration
{% endembed %}

{% stepper %}
{% step %}

### Login

Log in to your BetterBugs account
{% endstep %}

{% step %}

### Choose the project to connect with Sentry

Select the Project for which you want to connect Sentry with.
{% endstep %}

{% step %}

### Open integrations

Go to **Project Settings** and press the **Integrations** tab.
{% endstep %}

{% step %}

### Connect with Sentry

Hit **Connect** under the Sentry option. Click "**Accept & Install**" on the authentication page.
{% endstep %}
{% endstepper %}

This successfully connects BetterBugs to Sentry.

### Steps to create a bug report and get Sentry logs

{% stepper %}
{% step %}

### Capture the bug

Take a [screenshot](/product-features/screen-capturing), [record a video](/product-features/screen-recording), or hit [Rewind](/product-features/rewind) (if it's already enabled for the website).
{% endstep %}

{% step %}

### Open the Back-end tab

In the report screen, click the "**Back-end**" tab from below.
{% endstep %}

{% step %}

### Select the project for Sentry event logs

Select a project from the left-side dropdown under "**Projects**".
{% endstep %}
{% endstepper %}

This instantly gets you the event logs and error stack traces from Sentry.

### Connecting Sentry (Alternate method)

{% stepper %}
{% step %}

### Login

Log in to your BetterBugs account.
{% endstep %}

{% step %}

### Select a project

Select the project you want to integrate Sentry with.
{% endstep %}

{% step %}

### Open the Back-end Tab from the bug report

Click on one of the sessions from the list to open a bug report. Click on the "**Back-end**" tab.
{% endstep %}

{% step %}

### Connect with Sentry

Hit the "**Connect now**" option. Click "**Accept & Install**" on the authentication page.
{% endstep %}

{% step %}

### Select the project for Sentry event logs

Select a project from the left-side dropdown under "**Projects**".
{% endstep %}
{% endstepper %}

This opens up any Sentry event logs from the selected bug report.&#x20;

You can now share the bug report link with the concerned members. Visiting the report link gets you all the details as a complete bug report, [developer tools info](/product-features/developer-tools), and the Sentry logs.


# Intercom

Request screen recordings from customers to resolve issues 10X faster.

Get screen recordings from customers directly via Intercom chat. Quickly share a recording link on the chat and get a perfect bug report from the customer with auto-attached devtool logs.

### How does BetterBugs + Intercom help in customer support

The BetterBugs app enables your customers to share a screen recording (via Intercom chat) of issues that they are facing through a simple recording link. With BetterBugs and Intercom integration, you’ll be able to:

* Get screen recordings of the issues directly from customers (your customers do not have to set up or download anything).
* Get the exact issue reproduction steps taken by the customer that triggered it.
* Get devtools information (console logs, network requests, and others) along with the recordings.
* Resolve support tickets way faster with perfect bug reports sent directly into your BetterBugs project.

### What do you need to setup BetterBugs and Intercom

Once you create a BetterBugs account and integrate with Intercom:

* You DO NOT require any extra setup within BetterBugs to get only the screen recording via the recording link shared using Intercom. Simply integrate Intercom and you’re good to go.
* To get the screen recording + devtools logs of customer issues via a recording link, you’ll have to [configure your own domain within BetterBugs](/product-features/recording-links/recording-links-with-developer-logs) to generate recording links that also capture devtool logs along with the screen recording

### How to connect BetterBugs with Intercom to get screen recording from customers on chat

Steps to integrate BetterBugs with Intercom:

{% stepper %}
{% step %}

### Open a Project in the BetterBugs Workspace

Log in to your BetterBugs account and open a BetterBugs project within a Workspace.

<figure><img src="/files/2RvVJVZdVIFu4sHyBPlq" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Open Project Settings

On the left sidebar, hover over the Project name and click the three (•••) dots to open Project Settings.&#x20;

<figure><img src="/files/d5ZM4QeIc7e1m0X42FuX" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Note that the integration happens at the project level in BetterBugs.
{% endhint %}
{% endstep %}

{% step %}

### Go to the Intercom card in the Integrations tab

Click the “**Integrations**” tab and go to the Intercom card.

<figure><img src="/files/ymUprkOVVIikENCCShZs" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Authorize BetterBugs for Intercom

Hit the “**Connect**” button and authorize BetterBugs with your Intercom app.

<figure><img src="/files/VQfwr4peqxahnhJQrVIR" alt="" width="484"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### In your Intercom inbox, search for the BetterBugs app from the Edit apps and pin it for quick access

In the Intercom inbox, click the “Edit apps" option in the bottom right. You’ll see the BetterBugs app. Pin it to your sidebar and drag it to the top of other apps for quick access.

<figure><img src="/files/lXVtREr4jWBzeN9FPw1k" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

You're all set with the integration part.

### How to use BetterBugs + Intercom

Here are the steps for it:

{% stepper %}
{% step %}

### Request a screen recording from the user

When a customer sends a message in your chat about an issue that they’re facing, you can request the user to share a screen recording of the issue on the Intercom chat.

<figure><img src="/files/PGf09dJir5JW0aIijLLg" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Generate and send the BetterBugs recording link.

You can generate and send the BetterBugs recording link on chat. Your customer will be prompted to record their screen.

<figure><img src="/files/WM0fQYcrwzVxdKS8AoI7" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Get the recorded session back when the recording is submitted

Once the customer finishes the recording and submits the bug report, the screen recording link will instantly be available in your Intercom chat as “**BetterBugs Session**”.

<figure><img src="/files/KNTyIWF2ReEUKJRFud71" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

In the Intercom chat, you’ll also get notified when the:

* Recording is in progress.
* Recording is complete, but not yet submitted by the user.
* Recording has been submitted by the user + a link to the session recording.

The submitted recording gets nicely added to the BetterBugs project that you’ve connected with Intercom.

<figure><img src="/files/35HSXe0zWy4ZLTQmxWF9" alt=""><figcaption></figcaption></figure>


# LogRocket

Get LogRocket session links auto-attached to your bug reports.

### BetterBugs integration with LogRocket

If your website uses LogRocket for product and customer analytics, you can easily get the LogRocket session link every time you capture and create a bug report using BetterBugs. The session link will auto-included in the bug report, allowing you to access it without switching tools.

<div data-with-frame="true"><figure><img src="/files/4aZPE8Tu8Ld7UFvqHL4j" alt="BetterBugs.io Integration with LogRocket"><figcaption><p>BetterBugs.io Integration with LogRocket</p></figcaption></figure></div>

The LogRocket session link will automatically be included in the “**Info**” tab within your bug report, alongside all other devtools information.

<div data-with-frame="true"><figure><img src="/files/TqdN6SmG8L5UxBfFphfU" alt="LogRocket Session Link within the &#x22;Info&#x22; tab of BetterBugs.io Bug Report"><figcaption><p>LogRocket Session Link within the "<strong>Info</strong>" tab of BetterBugs.io Bug Report</p></figcaption></figure></div>

You don't need to manually connect BetterBugs with LogRocket; BetterBugs automatically detects if your website is using LogRocket for analytics.&#x20;

Whenever you create a bug report, the LogRocket session link is seamlessly included. This enables your developers to access all the technical details and context they need in an ideal bug report, helping them pinpoint issues more quickly.


# Fullstory

Access the Fullstory session link instantly from within your bug report.

### BetterBugs integration with Fullstory

If you’re using Fullstory to gain insights and customer analytics data for user behavior on your website, you can easily access the Fullstory session link within your BetterBugs.io bug report.&#x20;

<div data-with-frame="true"><figure><img src="/files/Kf30tsiZDM3mXM5wcplz" alt="BetterBugs.io Integration with Fullstory"><figcaption><p>BetterBugs.io Integration with Fullstory</p></figcaption></figure></div>

You don’t need to switch tools to retrieve the Fullstory session link; it's automatically included in your bug report's “**Info**” tab when you capture a bug.

<div data-with-frame="true"><figure><img src="/files/v3R6P12b0XLI9lrkKbme" alt="Fullstory Session Link within the &#x22;Info&#x22; tab of BetterBugs.io Bug Report"><figcaption><p>Fullstory Session Link within the "<strong>Info</strong>" tab of BetterBugs.io Bug Report</p></figcaption></figure></div>

Also, there’s no need for manual integration or setup to connect BetterBugs with Fullstory. BetterBugs automatically detects if your website is using Fullstory.&#x20;

Once you create a bug report, you can instantly share it with your team members, complete with all the devtools information and context they need for debugging.


# Webhook

Integrate your preferred project tools and issue trackers using a webhook.

### What is a Webhook?

A webhook enables an application to send real-time data or notifications to other systems. It’s an event-driven mechanism to integrate systems that works like a reverse user-defined API callback over HTTP using the POST method.&#x20;

Simply put, it's a lightweight way for one system to communicate with and notify another system over HTTP about an event or a change.

> **For instance**, if you want to retrieve data about a bug captured via BetterBugs.io in your application, your application’s webhook URL added to BetterBugs.io can immensly simplify this process.
>
> Here's how it works.
>
> Rather than having your application initiate an API call to fetch data from BetterBugs.io, the webhook URL (serving as your application's endpoint) enables BetterBugs.io to perform a POST request automatically.&#x20;
>
> This request delivers the complete data (as a **JSON payload** OR **Form Data**) directly to your application. Your app can then process the payload and utilize the retrieved information as required.

### How does the Webhook Integration Work?

Here’s how it works:

1. **Setup** — Your application provides a webhook URL to BetterBugs.io. This Webhook URL acts as the endpoint where data will be delivered.
2. **Event Trigger** — When you create a report with BetterBugs.io and share it with your application, BetterBugs.io dispatches an **HTTP POST** request to the set webhook URL.
3. **Payload Delivery** —  The HTTP request contains the event data (payload) in a **JSON format** or **Form Data format**, which gets delivered to your application and can then be processed as required.

### Example Use Case for BetterBugs.io Webhook Integration

If you have a project management app, you can integrate a webhook to retrieve all the information for the software issue or bug captured using BetterBugs.io to send it to your application backend servers.&#x20;

Your application can then process the sent data (such as bugId, workspaceId, projectId, description, status, priority, type, sessionUrl, and others), visualize, display, or use it as required on the frontend.

### What are the Key Benefits of Using BetterBugs.io Webhook Integration?

Benefits of using BetterBugs.io webhook:

* Send technical data and developer-friendly details of the bugs to your project tools and issue trackers.
* Save massive time, resources, and manual effort for bug reporting and debugging workflows.&#x20;
* Cut back on to-and-fro communication for reporting and fixing bugs, and manual copy-pasting of information.&#x20;

### How to Add Your App Webhook URL to BetterBugs.io: Step-by-Step

Adding your webhook is super simple. Here are the steps for it:

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side of app screen. Now, click the **gear icon** to open **Workspace Settings** > **Integrations**.
{% endstep %}

{% step %}

#### Search Webhook

In the **Integrations** tab, search for **Webhook** and click to open the **Webhook** card.
{% endstep %}

{% step %}

#### Turn off workspace-wide integration

Toggle off the "**All Projects**" option and hit "**Continue**". You should see the "**Manage per project**" option now.

{% hint style="info" %}
By default, its turned on for workspace level integration. For project-wise integration, you need to disable "**All Projects**".
{% endhint %}
{% endstep %}

{% step %}

#### Select a BetterBugs project to integrate and hit "Connect"

Select a project from the projects name list (that's within your Workspace). From the "**Actions**" column, hit "**Connect**" for that project.
{% endstep %}

{% step %}

#### Enter Webhook URL\*

In the "**Configure webhook integration**" modal, enter your **Webhook URL\*** and click "**Verify**".&#x20;

{% hint style="info" %}
Note that the URL endpoint should respond with a **2XX series response code** (such as 200, 201, or 204) when the verify request is dispatched.
{% endhint %}
{% endstep %}

{% step %}

#### Enter Other Details: Payload Format\*, Custom Headers, Custom Fields

Once your Webhook URL is validated and verified, add the:

* **Payload Format\***: JSON or Form Data
* **Custom Headers** (Optional)
* **Custom Fields** (Optional)
  {% endstep %}

{% step %}

#### Confirm

Click "**Add Webhook**" to confirm action.
{% endstep %}
{% endstepper %}

Okay! You're all set with the Webhook integration.

### Sample JSON Payload sent by BetterBugs.io using a Webhook URL

Here’s what the payload looks like being sent via webhook:

```json
{
    "customFields": {
        "field1": "data1",
        "field2": "data2"
    },
    "bugId": "682c1dbb3b574d66f3863324",
    "projectId": "68088dd3077eafee5d46cf86",
    "workspaceId": "68088dd2077eafee5d46cf83",
    "userId": "66dea4b99fee48c5dcdc1d2c",
    "title": "Sample Bug title",
    "description": "<p style=\"visibility: visible;\"><strong>Sample Bug Description:</strong></p><p style=\"visibility: visible;\">&nbsp;</p><p style=\"visibility: visible;\"><strong>Summary:</strong></p><p style=\"visibility: visible;\">Multiple attempts to configure webhook integration failed due to an active API key not being found for the project, preventing successful connection setup.</p><p style=\"visibility: visible;\"></p><p style=\"visibility: visible;\"><strong>Steps to reproduce bug:</strong></p><ol><li style=\"visibility: visible;\">First step</li></ol>",
    "status": "OPEN",
    "priority": "HIGH",
    "type": "screenshot",
    "createdAt": "2025-05-20T06:14:18.814Z",
    "updatedAt": "2025-05-20T06:14:27.491Z",
    "metadata": [],
    "assignees": [{
        "email": "quinn@example.com",
        "id": "66dea4b99fee48c5dcdc1d2c",
        "name": "quinn"
    }],
    "sessionUrl": "https://app.betterbugs.io/session/682c1dbb3b574d66f3863324",
    "screenshotUrl": "https://cdn.betterbugs.io/workspace/69a039e216ab18c8c2a1d0c8/69a039e216ab18c8c2a1d0cc/69bd2da39b22f777f76cdd14/s-1774005668325-WQGA.png"
}
```


# Clear Cookies & Cache

Clear cookies & cache instantly with BetterBugs.io

You can clear cookies & cache instantly with BetterBugs.io. You can also wipe the local and session data clean from your browser. This is an add-on feature of BetterBugs.io and works perfectly when your browser faces issues like slow loading, corrupted cache data, etc.

### How to Instantly Clear Your Website Cookies/Cache/Session Data using BetterBugs.io Extension

1. Open the extension and click the **three vertical dots (⋮)** icon on the top left (just beside the home icon).&#x20;
2. Click "**Clear Cookies & Cache**".
3. Select check boxes for what you'd like you clear:&#x20;
   * **Clear cache**&#x20;
   * **Clear cookies**
   * **Clear local & session**
4. &#x20;Hit "**Clear**" and you're good to go!&#x20;


# Settings

The "Extension Settings" option enables you to manage various features of BetterBugs right from the extension's user interface.

### Extension Settings

Open the extension and click the **three vertical dots (⋮)** icon on the top left (just beside the home icon). Now, click "**Extension Settings**" to access it.

### Available Options in the Extension Settings

<table><thead><tr><th width="252.888671875">Name</th><th width="487">Description</th></tr></thead><tbody><tr><td>Manage Extension</td><td>Manage, enable, disable, or remove the extension.</td></tr><tr><td><a href="/pages/tvgpiZhHxVoP006en6ei">Keyboard shortcuts</a></td><td>Customize keyboard shortcuts to quickly access and control extension features.</td></tr><tr><td>Theme</td><td>Select theme for the extension: Light | Dark | System</td></tr><tr><td>Capture Cookies</td><td>Enable/disable cookie capturing by the extension to display them in bug reports for debugging sessions.</td></tr><tr><td><a href="/pages/844W0Dwm5ZjLNLldwaWm">Clear cookies &#x26; cache</a></td><td>Enable/disable auto-refresh page after clearing cookies &#x26; cache.</td></tr><tr><td><a href="/pages/UYRnHfR6Uoula3nU6jQ9">Enable Rewind</a></td><td>Master toggle switch to enable/disable the Rewind feature for the extension.</td></tr><tr><td>Blocked websites "<strong>for Rewind</strong>"</td><td>Add websites/domains on which the <strong>Rewind</strong> would remain deactivated at all times. </td></tr><tr><td>Always allow websites "<strong>for Rewind</strong>"</td><td>Add websites/domains on which the <strong>Rewind</strong> would remain activated at all times.</td></tr><tr><td><a href="/pages/jUprQa6Py8Rodcg6LKz7">Redact Data with Regex</a></td><td>Manage custom regex patterns to devtools data captured in bug reports, allowing you to hide or redact sensitive information from bug reports before they get uploaded.</td></tr><tr><td>Manage Extension Access</td><td>Add websites/domains on which the <strong>BetterBugs.io extension</strong> would remain deactivated at all times. </td></tr></tbody></table>


# Mobile inspector

BetterBugs for capturing issues in a responsive layouts/mobile inspector.

You can use the capture issues with the responsive layout/mobile inspector turned on from the Chrome dev tools. This enables you to capture issues, especially UI issues, for your application's mobile device layout.&#x20;

### How to Capture Issues using BetterBugs.io in a Responsive Layout/Mobile Inspector?

Here's how to capture issues with BetterBugs.io for responsive layouts:

{% stepper %}
{% step %}

#### Open "inspect" for the Web Page

Right-click on your web page and select the "**Inspect**" option from the menu.
{% endstep %}

{% step %}

#### Toggle Device Mode

Click the **toggle device toolbar** (mobile inspector icon) from the top left corner of your Chrome Dev Tools.&#x20;

Alternatively, you can use the following shortcuts to toggle device mode:

* For Windows: <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd>
* For Mac: <kbd>Command</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd>
  {% endstep %}

{% step %}

#### Select Device

Select your desired mobile device/resolution to get the responsive layout.
{% endstep %}

{% step %}

#### Capture Issue using Visible Screenshot&#x20;

Open the BetterBugs.io extension and capture the issue using [Capture Screenshot (visible screen)](/product-features/screen-capturing/visible-screen-capture), [Record Screen](/product-features/screen-recording), or [Rewind](/product-features/rewind).&#x20;

For instance, click the **visible screenshot** option to take a screenshot of the entire mobile layout.
{% endstep %}

{% step %}

#### Annotate Screenshot (Optional)

Use the markup toolbar at the left to highlight the issue.
{% endstep %}

{% step %}

#### Enter Issue Details

You can add the details (**Title + Quick Summary + Steps to Reproduce**) manually in the description area manually or automatically with the "**AI**" toggle.
{% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project

From the two dropdowns above the description area, select:

* **Workspace** (Default: My Workspace)
* **Project** (Default: My Project)

This is where your report saves once you create a session.
{% endstep %}

{% step %}

#### Create Session

Finally, hit "**Create Session**" button on the top right.
{% endstep %}
{% endstepper %}

Your visual bug report is good to go with the added information and auto-attached [technical details](/product-features/developer-tools) for developers.&#x20;


# Comments/Activities

Collaborate on bug reports by adding real-time comments to the bug reports and viewing all activities for it.

### Collaborate on bug reports in real-time

BetterBugs enables you and your team members to collaborate on reporting and debugging issues with the "**Comments/Activities**" tab.&#x20;

After you upload a report session to the BetterBugs project, you can find the "**Comments/Activities"** tab on the bottom right of the bug report. This tab enables you and your teammates to:

* Add/edit comments to the bug report
* View all activities of the bug report

<figure><img src="/files/ntEFjQfRv7wZ4zlxxEat" alt="" width="563"><figcaption><p>Comments/Activities tab</p></figcaption></figure>

Comments can be included in real-time, which reflects instantly in the bug report. This is especially beneficial while communicating for quick feedback, getting additional information, or taking follow-ups on a particular issue. This significantly shortens the TAT for resolving software issues.


# Developer tools

BetterBugs.io automatically attaches technical information and data with every bug report you create for debugging purposes.

Debugging can be difficult without the related technical details of the issue. QA engineers have to worry no more about sending the logs from dev tools separately while reporting the issues to the developers.

BetterBugs.io automatically attaches key information like console logs, network requests and logs, and system information to the generated bug report.

### What are the Technical Details Auto-Attached to Every BetterBugs.io bug report for Debugging Purposes?

#### Quick Overview of BetterBugs.io Bug Report

<table><thead><tr><th width="301.7777099609375">Detail name</th><th>Value(s)</th></tr></thead><tbody><tr><td>Workspace name</td><td>My Workspace (default)</td></tr><tr><td>Project name</td><td>My Project (default)</td></tr><tr><td>Share the report with the integrated tools: "<strong>+ Send to your PM Tool</strong>"</td><td>Jira, Linear, Slack, ClickUp, Asana, GitHub, MS Teams, Trello, Azure Boards, Notion, and others.</td></tr><tr><td>Invite</td><td>Invite members or share using the report link</td></tr><tr><td>Visual proof</td><td>Screenshot, Screen recording, Rewind session video</td></tr><tr><td>Summary</td><td>Bug title, Manually added or AI-generated description of the issue</td></tr><tr><td>Upload files</td><td>Add up to 5 files | Supported formats: Doc, Excel, PDF, Txt, Image, and Video</td></tr><tr><td>Details</td><td>Priority, Status, Assignee, Tags (up to 10)</td></tr><tr><td>Comments/Activities</td><td>System/user generated actions</td></tr></tbody></table>

#### Technical Details for Developers for Manual + AI Debugging Workflows

<table><thead><tr><th width="164">Detail name (from the devtools tabs)</th><th>Value(s)</th></tr></thead><tbody><tr><td>Info</td><td>Timestamp (Time zone when captured, Your time zone, UTC time zone), URL, Network Speed, Device, Browser Mode, Charging Status, Available Battery, Browser, Window Size, Screenshot Dimensions, Extension Version, App Version, Bug Reporter, IP Address, Country, Time zone, User Agent</td></tr><tr><td>Console</td><td>Info, Warning, Log, Error, Network Error</td></tr><tr><td>Network</td><td>Fetch/XHR, JS, CSS, WS, Media, Font, Doc, Manifest, Method, Status</td></tr><tr><td>Backend</td><td>Event logs from Sentry (after Sentry integration)</td></tr><tr><td>Steps</td><td>Page navigation, Network errors, User activities</td></tr><tr><td>MetaData</td><td>Custom data as "<strong>Title</strong> and <strong>Value</strong>"  or <code>key: value</code> pairs added by the reporter</td></tr><tr><td>Application</td><td>Cookies, Local Storage, Session Storage</td></tr><tr><td><a href="/pages/fzTeqs6RhZBt6Onr6lcN">MCP Server</a></td><td>Documentation link to connect BetterBugs MCP Server for AI debugging </td></tr><tr><td><a href="/pages/1Shwx4cOKIIPvSrMSaA0">AI Debugger</a></td><td>AI-powered root cause analysis, test cases, and possible solutions</td></tr></tbody></table>


# GraphQL - Error handling

### Error handling status codes: Rest APIs vs GraphQL

[HTTP response status codes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status#server_error_responses) represent the nature of the response when there is an API call to the server. These status codes are unique for the type of response the server sends.&#x20;

For instance, if there is a successful API response, 200 OK is its status code. Errors codes like 400 for Bad Request, 404 for Not Found, 500 for Internal Server Error, 502 for Bad Gateway, and so on are common responses denoting a semantic meaning for end users.&#x20;

**REST APIs** use these exact codes to handle responses. So, if a server sends a Not Found response, REST APIs will send a 404 code.&#x20;

However, with **GraphQL**, the server responds only with the status code 200, even if the response body contains an error. And this can be a source of confusion.&#x20;

You get a response with status code 200 OK (success code) in GraphQL, but there’s a 400 Bad Request error. You have to manually pinpoint the issue by searching through the exact response body, rather than relying on the status code sent by GraphQL.

### How BetterBugs handles GraphQL errors?

**BetterBugs** parses through the erroneous response body while auto-attaching them to your bug report. That way, you know the exact semantic meaning of the server response whenever a server uses GraphQL.

For instance, if your application uses GraphQL and your server response has an error, you will still get a 200 OK status code for every API call. BetterBugs derives the exact status code with code logic and only then shows the error code to attach to your bug report.&#x20;

When you capture issues with BetterBugs, you clearly see the error in your bug report with the exact response code, like 400 series, 500 series, et,c rather than 200 OK every time you have an error in the server response.&#x20;

And that’s how BetterBugs excels in handling and capturing GraphQL errors.


# Redact sensitive data

Redact Sensitive Data (with Custom HTML Attribute and Regex Patterns)

BetterBugs.io enables you to prevent sensitive information from being captured or shared while creating bug reports with [screenshots](/product-features/screen-capturing), [screen recordings](/product-features/screen-recording), or [Rewind sessions](/product-features/rewind).&#x20;

You can configure BetterBugs.io to do this in multiple ways. For this, you have the following options

* **Custom HTML Attribute for Blurring Information** —  Adding `data-betterbugs=”ignore”` to your web page HTML element blurs out those elements before taking screenshots or recording screens or when using Rewind.
* **Redact Data with Regex Patterns** — Adding default or custom regex patterns first globally identifies the defined key/value pairs in the technical information getting captured (while creating bug reports). Then, the corresponding values get redacted and replaced with `“[*** REDACTED BY BETTERBUGS FOR PRIVACY ***]”` from your bug reports.

### Custom HTML attribute for blurring information

Before creating a report, you need to add the `data-betterbugs=”ignore”` HTML attribute to your application web page(s) elements to exclude them from getting captured.&#x20;

You can use this to blur out DOM elements. This means adding the attribute to the DOM elements would prevent them from getting recorded.

### Using `data-betterbugs=”ignore”` HTML attribute in your source code

To use the feature, just add the attribute in your HTML source code for selecting the desired element(s) to be ignored during screenshots, screen recordings, or Rewind sessions.

Here’s what it looks like:

<figure><img src="/files/pBIKUJjkTM5KrXGKy6Yg" alt=""><figcaption><p>Adding HTML Attribute to Your Web Page(s)</p></figcaption></figure>

You're good to go.

### Redact data with regex patterns

You can easily add regular expressions (REGEX) to BetterBugs.io for it to redact/remove sensitive data or prevent information from getting captured.

<a href="/pages/itmXna2SreMOdQZt99PP" class="button primary" data-icon="shield-check">Steps to Add Custom Regex Patterns</a>

#### How It Works

Once you add the specific regex, when you create a report, BetterBugs.io stringifies the technical details captured during the screen capturing (screenshot, screen record, or Rewind) session object and processes it with the saved regex patterns before the report uploads.&#x20;

This prevents the pre-defined sensitive information, such as authentication headers, access tokens, emails, passwords, card numbers, CVV, and API keys, from being accidentally shared along with the bug reports.

{% hint style="info" %}
The system avoids overwriting critical fields like titles, descriptions, or metadata unless specified by the regex patterns. Besides this, BetterBugs.io shows a preview of the data after redaction, allowing you to verify and adjust regex patterns as needed.
{% endhint %}

For instance, if a network request (being captured) in your bug report contains a sensitive user email ID, with the pre-applied regex pattern, BetterBugs.io redacts it automatically while getting shared.&#x20;

This means instead of the actual email ID for the key/pair value in the request/response/payload object, BetterBugs.io replaces it with `“[*** REDACTED BY BETTERBUGS FOR PRIVACY ***]”` as the value in the result object.

**EXAMPLE**

Original JSON Object before capturing:

```json
{
   "updated_at":"2025-03-12T05:52:49.101Z",
   "email":"example@gmail.com",
   "email_verified":true,
   "sub":"auth0|67d121311d653da533819a74"
}

```

Redacted JSON result with the pre-applied REGEX after capturing:

```json
{
   "updated_at":"2025-03-12T05:52:49.101Z",
   "email":"[*** REDACTED BY BETTERBUGS FOR PRIVACY ***]",
   "email_verified":true,
   "sub":"auth0|67d121311d653da533819a74"
}

```

### Use cases: Redact data with regex

Here’s how it’s commonly used:

* **Data Privacy Management** — You can define multiple regex patterns in the settings to redact sensitive data before uploading. BetterBugs.io comes with predefined regex patterns for common sensitive data types like authentication headers, access tokens, emails, passwords, card numbers, CVV, and API keys. You can view unredacted data before uploading and verify redaction after uploading sensitive data.
* **Customizable Redaction** — You can modify the regex patterns to fit your application's specific requirements. Redaction is applied only to sensitive data, and other intentionally added data remains unaltered.


# Keyboard shortcuts

Keyboard shortcuts for BetterBugs

BetterBugs.io has four pre-configured keyboard shortcuts to capture issues instantly.&#x20;

### What are the Keyboard shortcuts for Taking Screenshots and Recording Screens in BetterBugs.io?

<table><thead><tr><th width="301.66668701171875">Description</th><th>Windows</th><th>Mac</th></tr></thead><tbody><tr><td>Activate the extension</td><td><kbd>Alt</kbd> + <kbd>Shift</kbd>+ <kbd>B</kbd></td><td><kbd>^</kbd> + <kbd>⌘</kbd> + <kbd>B</kbd></td></tr><tr><td>To capture Rewind</td><td><kbd>Alt</kbd> + <kbd>Shift</kbd>+ <kbd>R</kbd></td><td><kbd>^</kbd> + <kbd>⌘</kbd> + <kbd>R</kbd></td></tr><tr><td>To start screen recording</td><td><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td><td><kbd>^</kbd> + <kbd>⌘</kbd> + <kbd>D</kbd></td></tr><tr><td>To capture screenshot</td><td><kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td><td><kbd>^</kbd> + <kbd>⌘</kbd> + <kbd>S</kbd></td></tr></tbody></table>

{% hint style="info" %}
**Note**: Chrome allows up to four keyboard-configurable shortcuts for an extension.
{% endhint %}

### How to Edit Shortcuts for BetterBugs.io Extension?

You can also edit keyboard shortcuts or add a fifth one to "**Activate the extension**" as you want. Here's how:

1. Go to `chrome://extensions/shortcuts`
2. Search the BetterBugs.io extension and edit the shortcuts to your liking.


# Supported browsers

Currently, BetterBugs is compatible with all Chromium-based browsers, including:

* Google Chrome (version 109 and later)
* Microsoft Edge
* Opera&#x20;
* Brave
* Arc&#x20;

You can use BetterBugs while you are:

* Logged in a browser
* In Incognito mode

To enable BetterBugs for Incognito, follow the steps mentioned [here](/product-features/incognito-mode). Our team is working on making BetterBugs compatible with other popular browsers.

### Download BetterBugs

You can get the BetterBugs extension for all Chromium browsers from the official Chrome Web Store. Download BetterBugs by visiting the link [here](https://chromewebstore.google.com/detail/betterbugs-a-fresh-approa/mdljmlgokccncglfobogbfjgcijldnaj).

### Logs and Feature Support

| Browser        | Console Logs | Network Requests | Web Sockets |
| -------------- | ------------ | ---------------- | ----------- |
| Google Chrome  | ✔️           | ✔️               | ✔️          |
| Microsoft Edge | ✔️           | ✔️               | ✔️          |
| Opera          | ✔️           | ✔️               | ✔️          |
| Brave          | ✔️           | ✔️               | ❌           |
| Arc            | ✔️           | ✔️               | ✔️          |


# Incognito mode

BetterBugs for Incognito

You can take advantage of all the features of BetterBugs even while using Incognito mode in your browser.&#x20;

BetterBugs enables you to [capture screenshots](/product-features/screen-capturing), [record screens](/product-features/screen-recording), and use the [Rewind](/product-features/rewind) feature with all the details in private browsing mode, just like the general browsing mode.

Here's how to enable BetterBugs for Incognito mode in Chrome:

1. Go to `chrome://extensions` in your browser.
2. Click the "**Details**" button in the BetterBugs extension.
3. Search "**Allow in Incognito**" in the extension settings menu and enable it.


# Security and compliance

We have included top-tier privacy and security measures in our application. You're safe with us.

### Quick overview

At BetterBugs.io, keeping your data safe and secure isn’t just a checkbox; it’s our top priority. We follow strict enterprise security standards to protect your information, and we don’t take shortcuts.&#x20;

* Our infrastructure, policies, and company practices undergo **periodic security reviews** by independent and third-party auditors.&#x20;
* We run **quarterly vulnerability tests** and **annual security exercises** to meet **SOC 2 Type II standards** and make sure everything's up to the mark.&#x20;

### SOC Type II compliance

We’re SOC 2 Type II compliant, which means our security, data protection, and operational procedures meet rigorous industry benchmarks. If you're a qualified customer and want to check out our SOC 2 Type II report, just drop us a message at <dev@betterbugs.io>, and we’ll be happy to share it.

### Infrastructure and hosting setup

BetterBugs runs on **Amazon Web Services (AWS)**, specifically in the **us-east-1 region**. Our **content delivery network (CDN)** services are powered by **Cloudflare**, so your experience stays fast and secure.

Our Chrome extension is officially distributed through **Google’s Chrome Web Store**, ensuring it meets all necessary security requirements.

### Data backup period

The data backup period depends on the frequency of the DB snapshots captured and used by the application.

<table><thead><tr><th width="155.6666259765625">Frequency unit</th><th>Every</th><th>Retention duration</th></tr></thead><tbody><tr><td>Hourly</td><td>6 hours</td><td>2 days</td></tr><tr><td>Daily</td><td>N/A</td><td>7 days</td></tr><tr><td>Weekly</td><td>Saturday</td><td>4 weeks</td></tr><tr><td>Monthly</td><td>Last day of the month</td><td>12 months</td></tr><tr><td>Yearly</td><td>First of Decemeber</td><td>1 year</td></tr></tbody></table>

### Frequently asked questions (FAQs)

<details>

<summary>1 - Does BetterBugs backup my data?</summary>

Yes, BetterBugs backs up your data (please refer to the table above) for the core features of BetterBugs to function correctly. However, our engineering team ensures that all the safeguards are in place and your data is stored responsibly and reliably.

</details>

<details>

<summary>2 - What is the data retention policy of BetterBugs?</summary>

BetterBugs has a data retention policy of 2 years for the Free, Individual, and Teams plans. For the Enterprise plan, we offer a custom data retention policy.

</details>

<details>

<summary>3 - What are the encryption and security measures used in BetterBugs?</summary>

We take encryption seriously and your data stays protected at all times:

* Data at **REST** is encrypted using **AES-256**, meaning it’s secure even when stored.
* Data in **transit** is encrypted with **HTTPS/TLS** to ensure it stays safe while moving.

</details>

<details>

<summary>4 - How does BetterBugs ensure cloud security, and what safeguards are in place for access controls?</summary>

We’ve included multiple security layers in our cloud systems. Here’s more on it:

* **Two-factor authentication (2FA)** is required for accessing cloud services, source code, and third-party integrations.
* Attack prevention systems are in place via **Cloudflare** to safeguard against cyber threats.
* We have security Firewalls within our **AWS cloud infrastructure**.
* AWS fully manages our cloud infrastructure, so we don’t run an **Intrusion Detection System (IDS)** or **Intrusion Prevention System (IPS)** in our production network. **AWS** takes care of that for us.

</details>

<details>

<summary>5 - How does BetterBugs handle security incidents?</summary>

We don’t take security concerns lightly. If an issue comes up:

* We actively investigate and resolve security risks as soon as we’re aware of them.
* If a security event affects our users, we communicate openly and let you know what’s going on.

</details>

<details>

<summary>6 - Does BetterBugs have bug bounty programs?</summary>

Currently, BetterBugs.io doesn’t have a bug bounty program. However, we’d love your feedback to further improve our security. Write to us at <dev@betterbugs.io>, and we’ll get back to you asap.

</details>

<details>

<summary>7 - How do I report a security bug or an issue in BetterBugs?</summary>

If you ever come across a potential security issue or just have a question, reach out to us at <dev@betterbugs.io>. We’ll respond as soon as possible.

</details>


# Overview

BetterBugs dashboard provides all options to manage your account, workspace, projects, and more.

When you log in to your BetterBugs.io account, the dashboard opens with all the customizations and bug management options.&#x20;

### Quick Overview of the BetterBugs.io Dashboard

Here's a summary of the dashboard layout in BetterBugs.io:

#### Key Features/UI Elements

<table><thead><tr><th width="197.55548095703125">Feature/Button/Text</th><th width="224.5555419921875">Description</th><th>Available option(s) when you click</th></tr></thead><tbody><tr><td><strong>My Workspace</strong></td><td>It's your default/current workspace.</td><td><ul><li><a href="/pages/03KWDWSfW8YFBgYqyKh0">Workspace Settings</a></li><li><a href="/pages/xRT21YHZBFV0naaloF9X">Create new workspace</a></li></ul></td></tr><tr><td><strong>Projects</strong> </td><td>Contains the list of projects in the workspace.</td><td><kbd>+</kbd> <strong>button</strong> - <a href="/pages/tpREM9ngSp6sOu1rmKWH">Create new project</a></td></tr><tr><td><a href="/pages/wfvccD3PCPfvozFySM6C"><strong>Recording Links</strong></a></td><td>Create shareable links that allow users to record their screen and submit bugs directly.</td><td>N/A</td></tr><tr><td><strong>My Project</strong> </td><td>It's your default project name.</td><td>N/A</td></tr><tr><td><strong>Profile Details</strong> (at the left bottom)</td><td>Manage your profile.</td><td><ul><li><a href="/pages/RigqF6fvKCjv4yf8o1xs">Plans &#x26; Pricing</a></li><li><a href="https://docs.betterbugs.io/">Documentation</a></li><li><a href="/pages/Y4RfTKy8mIbP3RcTYuFD">Settings</a></li><li><a href="https://status.betterbugs.io/">System Status</a></li><li>Logout</li></ul></td></tr></tbody></table>

#### Projects/Sessions UI

<table><thead><tr><th width="198.44439697265625">Feature/Button/Text</th><th width="225.1112060546875">Description</th><th>Available option(s) when you click</th></tr></thead><tbody><tr><td><strong>Project name  ⚙</strong></td><td>Manage project settings.</td><td><p></p><ul><li><a href="/pages/MkCgGDiJmsj7tqOqbsLs">General</a> - Upload image, Session Visibility, Project Visibility, Danger Zone (to archive project)</li><li><a href="/pages/9vYa2qZIl7eDetA2hMXc">Members</a> - Manage members for a specific project in the workspace</li></ul></td></tr><tr><td><strong>Search Session</strong></td><td>Search box to search reports/sessions.</td><td>N/A</td></tr><tr><td><a href="/pages/1SyI9JNC5HCLQAMPuVDD"><strong>Filters</strong></a></td><td>Apply filters to the collection of available sessions/reports in a project.</td><td><ul><li>Priority </li><li>Status</li><li>Creator</li><li>Assignees</li><li>Tags</li><li>Integrations</li><li>Creation Source</li><li>Date Range</li><li>Deleted sessions</li></ul></td></tr><tr><td><a href="/pages/AxNvsBSEuonPeUB1n8BI"><strong>Sessions view</strong></a></td><td>Toggle sessions view.</td><td><ul><li>Thumbnail grid</li><li>List</li></ul></td></tr></tbody></table>

### Reorder Projects in Your Workspace Using the Drag-and-Drop Action

You can reorder or rearrange the projects in your workspace using the drag-and-drop action.

<figure><img src="/files/MLe1aWIFdmTDiiompuDh" alt=""><figcaption><p>Reorder Project in Your Workspace with Drag and Drop </p></figcaption></figure>


# Create new workspace

Steps to create a new workspace in BetterBugs.io

When you log in to the BetterBugs.io dashboard for the first time, you'll see "**My Workspace**" as the default workspace.&#x20;

You can also create workspace(s) in your dashboard or edit an existing one (from [workspace settings](/dashboard/workspace-settings)).

{% hint style="info" %}
**IMPORTANT NOTE**

Creating new wokspace is a **PAY-PER-WORKSPACE** feature even for the **TEAM Plan**. So, when you create a new workspace, you'd be prompted to confirm the Payment Method OR Add Payment Method.
{% endhint %}

### How to Create a New Workspace in BetterBugs.io?

To create a new workspace:

{% stepper %}
{% step %}

#### Open the Existing Workspace List

Log in to your BetterBugs.io account and click the current workspace name at the top left of your screen.

This opens a dropdown containing a list of all the workspaces.
{% endstep %}

{% step %}

#### Create a New Workspace

Click on the "**+ Create workspace**" button.
{% endstep %}

{% step %}

#### Enter Workspace Details

Now, add details for the new workspace, such as:

* Workspace Icon
* Workspace Name\* (**required**)
  {% endstep %}

{% step %}

#### Confirm

Once you've added the workspace details, hit the "**Create Workspace**" button, and you're good to go.
{% endstep %}
{% endstepper %}


# Create new project

Steps to create a new project in the current workspace in BetterBugs.io

When you log in to the BetterBugs dashboard for the first time, you'll see "**My Project**" as the default project in your current workspace (default: My Workspace).&#x20;

You can also create project(s) in your workspace or edit an existing one (from [project settings](/dashboard/project-settings)).

### How to Create a New Project in BetterBugs.io in Your Current Workspace?

To create a new project:

{% stepper %}
{% step %}

#### Create New Project in Your Current Workspace

From the dashboard sidebar, click the  <kbd>+</kbd>  button at the top right side of projects list (beside the **Projects** text).

This opens a modal window to "**Create New Project**".
{% endstep %}

{% step %}

#### Add Project Name and Project Icon

Enter the name\* of your new project (**required**) and optionally add an icon/image for it.&#x20;

Hit "**Next**".&#x20;
{% endstep %}

{% step %}

#### Set Access Permissions for Project Accessibility (set who can access the project)

Choose between:

* **Private** - Only project members can view the project.
* **Public (Default)** - Everyone added to the workspace can view the project.
  {% endstep %}

{% step %}

#### Set Access Permissions for Sessions (set who can view the project reports)

Next, select between:

* **Private** - Only project members can access a report/session (using the report link).
* **Public (Default)** - Anyone (inside or outside workspace) with the report link can view the reports/sessions.
  {% endstep %}

{% step %}

#### Review details and confirm

Finally, review the project details and hit the "+ **Create Project**" button.
{% endstep %}
{% endstepper %}

You're good to go with the new project.


# Project Settings

Make all the changes you want to your BetterBugs project.

### Steps to access project settings

To access project settings:

{% stepper %}
{% step %}

#### Get started

Open the extension from your browser and click the "**Home**" icon to open the BetterBugs dashboard.
{% endstep %}

{% step %}

#### Select a project

From the left side panel, click on the project that you want to tweak the settings for.
{% endstep %}

{% step %}

#### Access project settings

Click the "**gear icon**" placed beside the project name at the top to access project settings.
{% endstep %}
{% endstepper %}

### Project settings: Options

In the project settings, you've the following options:

<table><thead><tr><th width="239.7777099609375">Project settings tab name</th><th>Description</th></tr></thead><tbody><tr><td><a href="/pages/MkCgGDiJmsj7tqOqbsLs">General</a></td><td>Manage general information about your project as an Admin.</td></tr><tr><td><a href="/pages/9vYa2qZIl7eDetA2hMXc">Members</a> </td><td>Manage and view project members as an Admin.</td></tr></tbody></table>


# General

Manage general information about your project: Login > Project Settings > General (Admin Access Only)

The "**General**" tab in project settings allows you to manage your project's general information.

{% hint style="info" %}
**IMPORTANT:** You need Admin-level permissions to view and manage the "**General**" tab in project settings.
{% endhint %}

### Available Options

Here's what you can manage/edit from here:

<table><thead><tr><th width="192.75">Section name</th><th width="248.25">Description</th><th>Option(s)</th></tr></thead><tbody><tr><td><strong>Project Details</strong></td><td>View and update your project information.</td><td><ul><li><strong>Project Logo</strong></li><li><strong>Project Name*</strong></li></ul></td></tr><tr><td><strong>Project Access</strong></td><td>Choose who can access your project.</td><td><ul><li><strong>Private (Default)</strong>: Only project members can access the project.</li><li><strong>Public</strong>: All workspace members can access the project.</li></ul></td></tr><tr><td><strong>Session Visibility</strong></td><td>Choose who can view report sessions for the project.</td><td><ul><li><strong>Private (Default)</strong>: Only project members can view project sessions.</li><li><strong>Public</strong>: Anyone with the report link (inside and outside workspace) can view project sessions.</li></ul></td></tr><tr><td><strong>Delete Project</strong></td><td>Enables you to delete your project from your active projects.</td><td>Use this option to archive your project sessions for 30 days before it gets permanently deleted.</td></tr></tbody></table>


# Members

Manage members for a specific project in the workspace: Login > Project Settings > Members

Click "**Members**" to view existing project members or add new members to it.

{% hint style="warning" %}
**IMPORTANT**

For Private Projects (projects set to "**Private**" from **Project Settings > General > Project Access**)

* Admin access is required to add or manage members from **Project Settings > Members**
* Members can also access **Project Settings > Members** for projects they are part of, but they do not have permissions to make changes or manage settings.

For Public Projects (projects set to "**Workspace**" from **Project Settings > General > Project Access)**

* **Project Settings > Members** is accessible to all roles — Owner, Admins, and Member. However, public projects do not provide any edit options, even for Admins.
  {% endhint %}

### Available info in the Project Members table

<table><thead><tr><th width="172.4444580078125">Column Name</th><th>Description</th></tr></thead><tbody><tr><td><strong>Member Name</strong></td><td>List of all members added to the project.</td></tr><tr><td><strong>Joined</strong></td><td>Date on which the person joined the current project.</td></tr><tr><td><strong>Status</strong></td><td>Invitation status</td></tr><tr><td><strong>Role Type</strong></td><td>Assigned role to the added member: <strong>Member, Admin, Guest</strong></td></tr></tbody></table>

### How to add members to a BetterBugs Project

Here's how you can quickly add members to your project:

{% hint style="info" %}
**IMPORTANT NOTE:** To add new people to a project, first you need to [invite and add them to the current workspace from the Workspace Settings > Members](/dashboard/workspace-settings/members). After that, they'd be available in the member's email list for getting added to the project.
{% endhint %}

{% stepper %}
{% step %}

#### Click "Add member"

Click the "**Add member**" button located at the right side of the screen.
{% endstep %}

{% step %}

#### Add email address

From the "**Invite members**" modal window, enter the email address of the member(s) and hit "**Return**". Ensure that the person(s) is already in your workspace.
{% endstep %}

{% step %}

#### Select role

Select role for the member: **Member**, **Admin**, **Guest**
{% endstep %}

{% step %}

#### Confirm action

Hit the "**Send Invites**" button to confirm action
{% endstep %}
{% endstepper %}

Each person will receive an email invitation to join your BetterBugs project. They can accept or decline the invite.


# Workspace Settings

Make all the changes you want to your BetterBugs workspace.

{% hint style="info" %}
**IMPORTANT**: Only Admin can see all the options (**General**, **Members**, **Integrations**, **and others**) in workspace settings. Members invited and added to a workspace will only be able to see the **Integrations** and **Members** option in the workspace settings for that workspace.
{% endhint %}

### Steps to access workspace settings&#x20;

To access workspace settings:

{% stepper %}
{% step %}

#### Get started

Open the extension from your browser and click the "**Home**" icon to open the BetterBugs dashboard.
{% endstep %}

{% step %}

#### Access workspace settings

Click on BetterBugs Workspace name at the top left side. Now, click the **gear icon** to open **Workspace Settings.**
{% endstep %}
{% endstepper %}

### Workspace Settings: Options

In the workspace settings, you've the following options:

<table><thead><tr><th width="181.9998779296875">Option</th><th>Description</th></tr></thead><tbody><tr><td>General</td><td>Manage general information about your workspace as an Admin.</td></tr><tr><td>Members</td><td>Manage workspace members and configure SSO settings for your workspace.</td></tr><tr><td>Integrations</td><td>Manage your integrated project tools at <strong>project-level</strong> and <strong>workspace-level</strong>. From here, you can manage automation flows too.</td></tr><tr><td>Recording Links</td><td>Generate and manage recording link URLs.</td></tr><tr><td>Mobile SDK</td><td>Setup BetterBugs framework for your iOS and Android devices.</td></tr><tr><td>Web SDK</td><td>Setup a feedback widget for your web apps with the BetterBugs Web SDK.</td></tr><tr><td>SSO</td><td>Add custom domains to your workplace for automated member onboarding.</td></tr><tr><td>Audit Logs</td><td>Track your team's activity in the workspace with audit logs.</td></tr><tr><td>Security (via Regex)</td><td>Add custom regex patterns to dev tools data captured in bug reports. Enables you to hide or redact sensitive information from bug reports before it gets uploaded.</td></tr></tbody></table>


# General

Manage general information about your workspace: Login > Workspace Settings > General (Admin Access Only)

The "**General**" tab in workspace settings allows you to manage general information about the workspace.&#x20;

{% hint style="info" %}
**IMPORTANT:** You need to have Admin-level permissions to view and manage the "**General**" tab in workspace settings.&#x20;
{% endhint %}

### Workspace Details

Enables you to view and update your workspace info. Here's what you can manage/edit from here:

* Workspace Logo
* Workspace Name
* Company Location
* Company Size
* Company Industry

### Delete Workspace

{% hint style="danger" %}
**WARNING:** Deleting the workspace will permanently remove it and all its associated data. The delete action **CANNOT BE UNDONE**.
{% endhint %}

To delete the workspace:

1. Click the "**Delete Workspace**" button in the General tab (Workspace Settings).
2. Enter the workspace name.
3. Hit "**Yes**" to confirm action.


# Members

Manage workspace members and configure SSO settings for your workspace: Login > Workspace Settings > Members

Click the "**Members**" tab from the workspace settings menu to invite and change preferences for workspace members.

{% hint style="warning" %}
**IMPORTANT:** You need Admin/Owner access to manage the "**Members**" tab in workspace settings. Members can also access the "**Members**" tab in the workspace settings for any workspace they're added to. However, they cannot make changes or manage the settings, as the Admin/Owner role is required for this.
{% endhint %}

### Available options/features

<table><thead><tr><th width="242.00006103515625">Feature/Option</th><th>Description</th></tr></thead><tbody><tr><td>Invite members</td><td>Invite members to your workspace with an email address.</td></tr><tr><td>Search by name or email</td><td>Search for a member with the member's email address.</td></tr><tr><td>Members</td><td>List of all users added to your workspace.</td></tr><tr><td>Member Type</td><td>Assigned role to the added/invited user: <strong>Admin</strong> or <strong>Member</strong> or <strong>Guest</strong></td></tr><tr><td>Status</td><td>Displays the current status of a user: <strong>Active</strong> or <strong>Pending</strong></td></tr><tr><td>Action</td><td>Choose an action for the added user: <strong>Resend Invite</strong> or <strong>Delete</strong></td></tr></tbody></table>

### Invite members

Here are the steps to invite a user(s) to your workspace:

{% stepper %}
{% step %}

### Get started

Click the "**Invite members**" option in the "**Members**" tab (**Workspace Settings**).
{% endstep %}

{% step %}

### Enter email and role&#x20;

Enter the email address for the user to be added and assign a role: **Member** or **Admin** or **Guest**

{% hint style="info" %}
You can send an invite to multiple people at the same time. After entering an email address and the role, click the "**+ Invite more members**" button to add more people.
{% endhint %}
{% endstep %}

{% step %}

### Confirm action

Finally, hit the "**Send Invitation**" button, and you're good to go.
{% endstep %}
{% endstepper %}

Once you send the invite and the role for the added user, it appears in the list of team members. You can change the role after it gets added to the list. You can also delete members from the Members list.

When you send an invite, that person has to accept the invitation sent through email. The person can choose to "**Reject**" or "**Accept**" the invitation.

In case there is an invite "**Pending**" status in the list, you (default Admin) can "**Resend Invite**" or "**Delete**" the invitation.

As an "**Admin**", you have full control of the workspace and project.

### SSO Settings (Onboarding Workflow Feature)

You can add custom domains to your workplace that enable members to select one or multiple workspaces and join without having you (the owner or admin) invite them separately to your workspace.&#x20;

#### Here's how the SSO Settings (Onboarding workflow feature) work:

As a workspace owner or an Admin, you can add any domain name in the SSO list under **SSO settings**.

For instance, if you add the domain name: "**hello.io"** under the SSO list for your workspace,\
whenever a new user (first-time user) tries to log in using an email with the domain "**hello.io**" in his/her email ID, he/she can see a list of all your workspaces since you have "**hello.io"** listed it under your SSO settings.\
\
The person can select one or multiple workspaces and join without an invite to your workspace. \
\
For example, Jessie is a new user who has never used BetterBugs. Jessie enters his email as **<jessie@hello.io>** and enters the OTP for email verification.&#x20;

Jessie can see your workspace list with "**hello.io**" added to the SSO Settings list. He can join any or all of your workspaces where "**hello.io**" is added to the Workspace SSO list. Jessie can now navigate directly to your workspace.

That's how SSO Settings works.

## Managing your guest users

BetterBugs also enables you to onboard guest users as a Member to your project.

{% hint style="warning" %}
NOTE: Only Admin/Owners can see this option in the **Workspace Settings > Members** tab.
{% endhint %}

Before covering the onboarding steps that allow a guest user to become a Member for a given workspace, we’ve listed the actions that guest users can/cannot do.

### Actions allowed for a guest user

Guest users can:

* View bug reports, sessions, and dashboards in their workspace.
* [Add comments and replies](/product-features/comments-activities) to bug reports.
* Use bug recording links (shared by members) to submit bugs.
* Use Back-end for event logs and [AI-Debugger](/debug-a-report/ai-debugger) tabs.
* Save [filter views](/sessions/session-filters) on Dashboard.
* Change assignee or update bug priority.
* Update bug details.
* Configure [Recording links](/product-features/recording-links), [Web SDK](/developer-guide-old/betterbugs-web-sdk) and Mobile SDK.
* Invite others for view-only sessions.
* Receive notifications (comments, role changes, etc.)

### Actions not-allowed for a guest user

Here’s a list of actions that a guest user cannot perform for the Workspace:

**Tools & Extensions**

Use the BetterBugs Chrome Extension.

**Project Management**

* Move sessions between projects.
* Delete sessions.
* [Create new project](/dashboard/overview/create-new-project).
* Create recording links.
* AI repro-steps generation.
* Modify [project settings](/dashboard/project-settings).
* Archive/Restore projects.
* Access private projects (unless explicitly added).
* Delete workspace or transfer ownership.
* Access [workspace settings](/dashboard/workspace-settings) or [billing](/dashboard/my-account/plans-and-usage) configurations.

**Collaboration & User Management**

* Invite/remove other users.
* Approve/reject invitations.
* Manage user roles.

**Integrations**

* Use [third-party integrations](/product-features/integrations).

**Restricted Features**

* Bypass guest restrictions in Manual upgrade flow.
* Perform restricted actions (unless role is upgraded to Member).

### Onboarding Guest Users as Members

As a Workplace Admin/Owner, you can choose a suitable option for onboarding a guest user as a Member.&#x20;

There are two options for it:

<figure><img src="/files/PQ0wkvnHwT8vErIFvLNa" alt=""><figcaption></figcaption></figure>

* **Instant Approval** — Allows guest users to automatically upgrade their role to a Member (No manual approval required from the Admin/Owner).
* **Manual Approval** (*Selected by default*) — Requires explicit approval from the Owner/Admin to become a Member.

### How does the Instant Approval flow work?

As a Owner/Admin, If you’ve selected the “**Instant Approval**” option, whenever a guest user performs an action (such as, creating new project, modifying Project Settings) that’s allowed by default for a Member, the role of the of the guest user would automatically be updated to Member.

{% hint style="warning" %}
**IMPORTANT NOTE**: **This option is not selected by default.** However, if you configure your Workspace with this option enabled, whenever a guest user tries to access a Member-only feature, the guest auto-converts to a Member, and you'll automatically be billed for the seat.
{% endhint %}

### How does the Manual Approval flow work? (enabled by default)

Using the "**Manual Approval**” option as an Admin/Owner, whenever a guest tries to perform an action that’s reserved for a Member role, the user will be prompted to send a request to the Admin/Owner of that Workspace.&#x20;

Once the request has been accepted by the Admin/Owner, the guest user role would automatically be upgraded to “**Member**” (*This is also billable per seat*).


# Integrations

Integrate and automate BetterBugs with your issue trackers, messaging, and error logging tools.

You can connect your preferred project management tools, issue trackers, communication apps, and error and performance monitoring applications to BetterBugs.io with the:

* [Workspace Integration](/dashboard/workspace-settings/integrations/workspace-integration)
* [Project Integration](/dashboard/workspace-settings/integrations/project-integration)

Once you integrate your project tool with BetterBugs.io, you can instantly create and share issue tickets or tasks to the connected platforms with details and links to access complete bug reports, right from your browser window.

Plus, you can automate ticket creation using the:

* [Workspace Automation](/dashboard/workspace-settings/integrations/workspace-integration/workspace-automation)
* [Project Automation](/dashboard/workspace-settings/integrations/project-integration/project-automation)


# Project Integration

Manage integrated tools for your BetterBugs project within your workspace: Login > Workspace Settings > Integrations

Use the “**Integrations**” tab within “**Workspace Settings**” to connect BetterBugs Project (individually) to your project management tools, issue trackers, communication software, and backend logger.

{% hint style="success" %}
You can also connect your project tool(s) at **Workspace Level** using workspace integration.
{% endhint %}

Here, we've covered project-level integration and steps for it.

### Integrate Project Tools with BetterBugs.io: At the Project Level <a href="#integrate-project-tools-with-betterbugs.io-at-the-project-level" id="integrate-project-tools-with-betterbugs.io-at-the-project-level"></a>

You can integrate tools at the project level by navigating to **Workspace Settings > Integrations** from within your BetterBugs.io workspace.

{% hint style="info" %}
You can setup the project-wise integration as an "**Admin**" or a "**Member**". Project-wise integration enables you to setup one or more integrations for BetterBugs projects individually.
{% endhint %}

### How to Integrate Your Project Tools at the Project Level: Linear Example <a href="#how-to-integrate-your-project-tools-at-the-project-level" id="how-to-integrate-your-project-tools-at-the-project-level"></a>

Here are the steps to connect BetterBugs.io with your project tools at the project level:

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FEQ2eWcKvm4guRoTERpaa%2F01-Integrate-BetterBugs-with-Linear.mp4?alt=media&token=963b69ea-8f95-41b4-aec8-a380068c7d5f>" %}
How to Integrate Linear with BetterBugs at Project Level: Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side of app screen. Now, click the **gear icon** to open **Workspace Settings** > **Integrations**.
{% endstep %}

{% step %}

#### Search Linear

In the **Integrations** tab, search for **Linear** and click to open the **Linear** card.
{% endstep %}

{% step %}

#### Turn off workspace-wide integration

Toggle off the "**All Projects**" option and hit "**Continue**". You should see the "**Manage per project**" option now.

{% hint style="info" %}
By default, its turned on for workspace level integration. For project-wise integration, you need to disable "**All Projects**".
{% endhint %}
{% endstep %}

{% step %}

#### Select a BetterBugs project to integrate and hit "Connect"

Select a project from the projects name list (that's within your Workspace). From the "**Actions**" column, hit "**Connect**" for that project.
{% endstep %}

{% step %}

#### **Authorize BetterBugs.io for Linear**

Hit “**Authorize**” to authorize BetterBugs.io for your Linear Workspace.

{% hint style="warning" %}
**IMPORTANT NOTE**&#x20;

If you're on a **free plan**, Steps 6 and 7 are **NOT REQUIRED**. **You can just SKIP** to "[*How to Create Bug Report on Linear using BetterBugs*](/product-features/integrations/linear#how-to-create-bug-report-on-linear-using-betterbugs)".

**FOR PAID PLANS (Teams and Enterprise)**

Steps 6 and 7 enables you to explicitly choose between:

* **Manual Ticket Creation (Default)**: This means for sharing a bug report to Linear, you'd need to manually populate fields for your Linear project (**Team**, **Project**, **Priority**, and others). Its a **FREE FEATURE**.
* **Automatic Ticket Creation:** This means for sharing a bug report to Linear, you can configure BetterBugs to auto-populate fields for your Linear project (**Team**, **Project**, **Priority**, and others). Its a **PAID FEATURE**.
  {% endhint %}
  {% endstep %}

{% step %}

#### Optional: Choose your preferred method for creating tickets: Manually or Automatically

From the "**Forward Bug Reports**" dropdown, select your preferred method for creating tickets in your project tool:

* **Manually**: Enables you to **create tickets manually**. *Here, we've selected the manual method to showcase project integration steps.*
* **Automatically**: Enables you to [**create tickets with automation**](/dashboard/workspace-settings/integrations/project-integration/project-automation).
  {% endstep %}

{% step %}

#### Optional: Select "Manually" and Connect

Finally, select "**Manually**" from the "**Forward Bug Reports**" dropdown and hit "**Connect**".
{% endstep %}
{% endstepper %}

Okay! You're good to go with the Project level integration for your Linear app. Now, you can create detailed reports and share them as Linear issues directly from your browser with a few clicks.

{% hint style="success" %}
You can follow the same steps to integrate other project tools.
{% endhint %}

### How to Disconnect Your Project Tool that's Integrated at the Project Level: Linear Example

Here're the steps to disconnect a BetterBugs project that's integrated with a project tool at the project level:

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2Fo8L8QVi3qkYcxNG4ZizJ%2F04-Disconnect-BetterBugs-Project-from-Linear.mp4?alt=media&token=8bfa5fb0-c528-424f-9822-bec6c0bced82>" %}
How to Disconnect Your Project Tool that's Integrated at the Project Level: Video Demo | Linear Example
{% endembed %}

{% stepper %}
{% step %}

#### Open Project Settings

Use the **Gear Icon** beside the **BetterBugs Project** **Name** to open **Project Settings**.
{% endstep %}

{% step %}

#### Go to Workspace Settings > Integrations

Navigate to **Workspace Settings** > **Integrations**
{% endstep %}

{% step %}

#### Search Linear

In the **Integrations** tab, search for **Linear** and click to open the **Linear** card.
{% endstep %}

{% step %}

#### Select BetterBugs project to disconnect and click (⋮) under "Actions"

In the Linear card, select the BetterBugs project (from the Project list) to disconnect. For the project, click vertical dots (**⋮**) under the **Actions** column.
{% endstep %}

{% step %}

#### Disconnect and Confirm Action

To confirm action, click "**Disconnect**" and "**Continue**".
{% endstep %}
{% endstepper %}

This instantly disconnects Linear app from the selected BetterBugs project.


# Project Automation

Check out the steps for project level automation in BetterBugs.io

### How does the Project-level Automation Work in BetterBugs.io? <a href="#how-it-works" id="how-it-works"></a>

Once you connect your BetterBugs.io to your PM tool at the project level, you can preset values in a report template for the fields of that specific tool(s). So, whenever you create a bug report, you don’t have to enter field values and other details manually for that connected tool(s).

> Just **capture the bug and upload the report** to your BetterBugs.io project, and the report will **instantly be auto-shared with the integrated project tool(s)**.&#x20;

No extra steps are required.

This means you don’t have to juggle tools or search for details about the project tool(s) workspace to which the report has to be shared.&#x20;

> Plus, you can configure automation for multiple tools for a BetterBugs project. This means that if you use project tools like **Jira**, **Asana**, **GitHub**, or any others, you do not have to create tickets separately for each tool. Just create one report, and BetterBugs creates tickets to all of your tools in one click. You do not have to create tickets/tasks/issues manually. With BetterBugs, you can automate the entire ticket creation process.

### How to Integrate BetterBugs Project to Your PM Tool with Automation: Linear Example <a href="#steps-to-integrate-your-project-tool-at-the-workspace-level" id="steps-to-integrate-your-project-tool-at-the-workspace-level"></a>

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FWsOBB0nGQ8r0BbCRb22K%2F01-Integrate-BetterBugs-Project-to-Linear-with-Automation-Workflow.mp4?alt=media&token=ce4a134b-6e12-493f-82f9-875a2d6ff848>" %}
Steps to Integrate BetterBugs Project to PM Tool with Automation: Video Demo | Linear Example
{% endembed %}

{% hint style="success" %}
Here, we've covered the end-to-end steps to:

* Integrate Project Tool at Project Level
* Project Level Automation

For manual integration only, check out the [Project Integration](/dashboard/workspace-settings/integrations/project-integration) Page.
{% endhint %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side. Now, click the **gear icon** to open **Workspace Settings** > **Integrations.**
{% endstep %}

{% step %}

#### Search Linear

In the **Integrations** tab, search for **Linear** and click to open the **Linear** card.
{% endstep %}

{% step %}

#### Turn off workspace-wide integration

Toggle off the "**All Projects**" option and hit "**Continue**". You should see the "**Manage per project**" option now.

{% hint style="info" %}
By default, its turned on for workspace level integration. For project-wise integration, you need to disable "**All Projects**".
{% endhint %}
{% endstep %}

{% step %}

#### Select BetterBugs project to integrate and hit "Connect"

Select a project from the projects name list (that's within your Workspace). From the "**Actions**" column, hit "**Connect**" for that project.
{% endstep %}

{% step %}

#### Authorize BetterBugs.io <a href="#authorize-betterbugs.io" id="authorize-betterbugs.io"></a>

Hit “**Authorize**” to authorize BetterBugs.io for your Linear Workspace.
{% endstep %}

{% step %}

#### Choose your preferred method for creating tickets

From the "**Forward Bug Reports**" dropdown, select "**Automatically**".&#x20;

{% hint style="info" %}
This fetches the Linear template with the available fields for automation.&#x20;

Here, you can preset field values for automated ticket creation in Linear (or any other tools). This means while sharing a bug report to Linear, this would auto-populate fields for your Linear project (**Team**, **Project, Priority**, and others).&#x20;
{% endhint %}
{% endstep %}

{% step %}

#### Enter default field values

Add details for the available fields, such as **Team**, **Project**, **Priority**, and others.

These details would be used as defaults for every report you create and upload. **For instance**, if you are reporting only **bugs** for your projects, you can pre-configure the details for it, so you don’t have to fill in the details every time you report a bug to your project tool.
{% endstep %}

{% step %}

#### Confirm action

Finally, click “**Connect**” and you’re good to go.
{% endstep %}
{% endstepper %}

{% hint style="success" %}
You can follow the same steps to configure automation for other project tools.
{% endhint %}

### How to Create Bug Report and Send to Your PM Tool with Automation: Linear Example

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FWl0dbTpWmw4IDuKOA1rT%2F02-Create-Bug-Report-and-Send-it-to-Linear-with-Automation.mp4?alt=media&token=ed6da790-ef34-484a-bf30-1cef91719e7a>" %}
Steps to Create Bug Report and Send to Your PM Tool with Automation: Video Demo | Linear Example
{% endembed %}

{% stepper %}
{% step %}

#### Capture the Bug and Add Bug Details

Use the BetterBugs extension to capture the bug and add details for it. You can add the details (*Title + Quick Summary + Steps to Reproduce*) manually in the description area manually or automatically with the "**AI**" toggle.
{% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project Integrated with Linear

From the two dropdowns above the description area, select:

* **BetterBugs Workspace**
* **BetterBugs Project** (that you integrated with Linear)
  {% endstep %}

{% step %}

#### Switch On the Automation Toggle for Linear

Below the **Details** area (at the bottom right of report screen), enable **Automation** for **Linear** using the "**Toggle**" switch.
{% endstep %}

{% step %}

#### Create Session

Finally, click "**Create Session**" from the top right and you're good to go!
{% endstep %}
{% endstepper %}

This instantly creates a ticket to your Linear project as per the pre-configured field values.&#x20;

To check for successful automation, check the "[**Comments & Activities**](/product-features/comments-activities)" tab located below the bug description area. From here, you can directly access the Linear task.

### How to Create Tickets on Multiple PM Tools with BetterBugs Automation

Once you've integrated BetterBugs project with automation for multiple tools (as per the steps above), you can create tickets on each of those tools in one go.

> #### **Practical Use Case Example**
>
> Let's say you are using the following tools in your project:
>
> * **GitHub**&#x20;
> * **Jira**
>
> So, whenever you create a bug report session using BetterBugs, you can instantly:
>
> * **Raise an issue on your GitHub Repo**
> * **Create a Jira ticket** with the exact same information and details.&#x20;
>
> No manual copy pasting of information OR manual ticket creation is required. BetterBugs does this for you in seconds!

The following steps and video demonstrates BetterBugs automation to create tickets to three tools in one go:

* **Linear**&#x20;
* **ClickUp**
* **Asana**

Let's get to it.

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FqdNfdA0ud72itsCIN2jl%2F03-Creating-Tickets-in-Multiple-Project-Tools-with-BetterBugs-Automation.mp4?alt=media&token=52b88bc2-2bb5-45a4-8d2f-1539ba15cde0>" %}

{% stepper %}
{% step %}

#### Capture the Bug and Add Bug Details

Use the BetterBugs extension to capture the bug and add details for it. You can add the details (*Title + Quick Summary + Steps to Reproduce*) manually in the description area manually or automatically with the "**AI**" toggle.
{% endstep %}

{% step %}

#### Select BetterBugs Workspace and Project with Preset Automations

From the two dropdowns above the description area, select:

* **BetterBugs Workspace**
* **BetterBugs Project** (with Preset Automations)
  {% endstep %}

{% step %}

#### Switch On the Automation Toggles for PM Tools

Below the **Details** area (at the bottom right of report screen), enable **Automations** for:

* **Linear**
* **ClickUp**
* **Asana**
  {% endstep %}

{% step %}

#### Create Session

Finally, click "**Create Session**" from the top right and you're good to go!
{% endstep %}
{% endstepper %}

This instantly creates tickets on all the selected tools as per the pre-configured field values.&#x20;

To check for successful automation, check the "[**Comments & Activities**](/product-features/comments-activities)" tab located below the bug description area. From here, you can directly access the tickets that you just created; its as easy as that!

### How to Edit Ticket Creation Method from Manual to Automated: Linear Example <a href="#steps-to-integrate-your-project-tool-at-the-workspace-level" id="steps-to-integrate-your-project-tool-at-the-workspace-level"></a>

If you've integrated a PM tool for manual ticketing with BetterBugs, you can edit and convert that to automated method and vice versa. Check out the following steps for it:

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FebTNgygsyqbjOndzuYCR%2F04-How-to-Edit-Ticket-Creation-Method-from-Manual-to-Automatic.mp4?alt=media&token=12b5ed97-bd3c-456f-bad6-0559763ab9ef>" %}
Steps to Edit Ticket Creation Method from Manual to Automated: Video Demo | Linear Example
{% endembed %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side. Now, click the **gear icon** to open **Workspace Settings** > **Integrations.**
{% endstep %}

{% step %}

#### Search Linear

In the **Integrations** tab, search for **Linear** and click to open the **Linear** card.
{% endstep %}

{% step %}

#### Turn off workspace-wide integration

Toggle off the "**All Projects**" option and hit "**Continue**". You should see the "**Manage per project**" option now.

{% hint style="info" %}
By default, its turned on for workspace level integration. For project-wise integration, you need to disable "**All Projects**".
{% endhint %}
{% endstep %}

{% step %}

#### Select BetterBugs project to change ticket creation method for and click (⋮) under "Actions"

Select a project from the projects name list (that's within your Workspace). From the "**Actions**" column, click (⋮) under "**Actions**".
{% endstep %}

{% step %}

#### Click "Edit Settings" <a href="#authorize-betterbugs.io" id="authorize-betterbugs.io"></a>

Click "Edit Settings". This instantly opens the **Forward Bug Reports** dropdown for Linear app.
{% endstep %}

{% step %}

#### Choose your preferred method for creating tickets

From the "**Forward Bug Reports**" dropdown, select "**Automatically**".&#x20;

{% hint style="info" %}
This fetches the Linear template with the available fields for automation.&#x20;

Here, you can preset field values for automated ticket creation in Linear (or any other tools). This means while sharing a bug report to Linear, this would auto-populate fields for your Linear project (**Team**, **Project, Priority**, and others).&#x20;
{% endhint %}
{% endstep %}

{% step %}

#### Enter default field values

Add details for the available fields, such as **Team**, **Project**, **Priority**, and others.

These details would be used as defaults for every report you create and upload. **For instance**, if you are reporting only **bugs** for your projects, you can pre-configure the details for it, so you don’t have to fill in the details every time you report a bug to your project tool.
{% endstep %}

{% step %}

#### Confirm action

Finally, click “**Connect**” and you’re good to go.
{% endstep %}
{% endstepper %}

{% hint style="success" %}
You can follow the same steps to configure automation for other project tools.
{% endhint %}


# Workspace Integration

Manage integrated tools for the workspace: Login > Workspace Settings > Integrations

Use the “**Integrations**” tab within “**Workspace Settings**” to centrally connect your BetterBugs Workspace (that includes all the projects within the workspace) to your project management tools, issue trackers, communication software, and backend logger.&#x20;

You can integrate them all in one go using the workspace-level integration.

{% hint style="success" %}
You can also connect your project tool(s) at **BetterBugs Project Level** using [project level integration](/dashboard/workspace-settings/integrations/project-integration).
{% endhint %}

Here, we've covered workspace-level integration and steps for it.

### How to Integrate All Your Projects in a BetterBugs Workspace to your PM Tool: Linear Example

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FtoxIMlBosLmdfxDHfCjk%2F01-BetterBugs-Integration-with-Linear-Workpace-wide.mp4?alt=media&token=c3bf7eed-c2d6-47fa-a229-1d65d33ad42b>" %}
Steps to Integrate All Projects in BetterBugs Workspace with Your PM Tool: Video Demo | Linear Example&#x20;
{% endembed %}

{% hint style="info" %}
You can setup the workspace-wise integration as an "**Admin**" or a "**Owner**".
{% endhint %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side. Now, click the **gear icon** to open **Workspace Settings** > **Integrations.**
{% endstep %}

{% step %}

#### Select your preferred tool to integrate

In the **Integrations** tab, select your preferred tool and click on the tool's card. For instance, let's open **Linear** app's card.
{% endstep %}

{% step %}

#### Turn on workspace-wide integration&#x20;

Make sure that that the toggle is **ON** for "**All Projects**".&#x20;

{% hint style="warning" %}
By default, its turned on for workspace level integration.
{% endhint %}
{% endstep %}

{% step %}

#### Connect

Next, hit “**Connect**” at the top right.
{% endstep %}

{% step %}

#### Authorize BetterBugs.io <a href="#authorize-betterbugs.io" id="authorize-betterbugs.io"></a>

Hit “**Authorize**” to authorize BetterBugs.io for your Linear Workspace.

{% hint style="warning" %}
**IMPORTANT NOTE**

If you're on a **free plan**, Steps 6 and 7 are **NOT REQUIRED**. **You can just SKIP** to "*How to Create Bug Report for A Specific Project in BetterBugs and Send to Your PM Tool: Linear Example*".

**FOR PAID PLANS (Teams and Enterprise)**

Steps 6 and 7 enables you to explicitly choose between:

* **Manual Ticket Creation (Default)**: This means for sharing a bug report to Linear, you'd need to manually populate fields for your Linear project (**Team**, **Project**, **Priority**, and others). Its a **FREE FEATURE**.
* **Automatic Ticket Creation:** This means for sharing a bug report to Linear, you can configure BetterBugs to auto-populate fields for your Linear project (**Team**, **Project**, **Priority**, and others). Its a **PAID FEATURE**.
  {% endhint %}
  {% endstep %}

{% step %}

#### Optional: Choose your preferred method for creating tickets

From the "**Forward Bug Reports**" dropdown, select your preferred method for creating tickets in your project tool:

* **Manually**: Enables you to **create tickets manually**. *Here, we've selected the manual method to showcase workspace integration steps.*
* **Automatically**: Enables you to [**create tickets with automation**](/dashboard/workspace-settings/integrations/workspace-integration/workspace-automation).
  {% endstep %}

{% step %}

#### Optional: Select "Manually" and Connect

Finally, select "**Manually**" from the "**Forward Bug Reports**" dropdown and hit "**Connect**".
{% endstep %}
{% endstepper %}

Okay! You're good to go with the Workspace level integration for your Linear app. All your BetterBugs.io projects (within the workspace that you’re currently in) are connected to your Linear Workspace.&#x20;

{% hint style="success" %}
You can follow the same steps as above for integrating other tools.
{% endhint %}

### How to Disconnect Your PM Tool that's Integrated at the Workspace-level: Linear Example <a href="#steps-to-integrate-your-project-tool-at-the-workspace-level" id="steps-to-integrate-your-project-tool-at-the-workspace-level"></a>

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2Ffv8FQ9RfN8WNvLKP9I1a%2F04-Disconnect-Workspace-wide-Integration.mp4?alt=media&token=d2d48b96-936f-4ecc-b6cd-93433e06509f>" %}
Steps to Disconnect Your PM Tools that's Integrated at the Workspace Level in BetterBugs: Video Demo | Linear Example&#x20;
{% endembed %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side. Now, click the **gear icon** to open **Workspace Settings** > **Integrations.**
{% endstep %}

{% step %}

#### Select your project tool <a href="#select-your-project-tool" id="select-your-project-tool"></a>

From the "**Integrations**" tab, select the tool that you want to disconnect. For the demo, let’s disconnect “**Linear**” (that's connected at the workspace level).
{% endstep %}

{% step %}

#### Disconnect

Click on the “**Linear**” card and hit the “**Disconnect**” button at the bottom right.
{% endstep %}

{% step %}

#### Confirm action <a href="#authorize-betterbugs.io" id="authorize-betterbugs.io"></a>

To confirm action, click "**Disconnect**" from the modal.
{% endstep %}
{% endstepper %}

This instantly disconnects Linear app from your entire workspace.

### How to Exclude or Disconnect BetterBugs Project(s) from the Workspace Level Integration <a href="#steps-to-integrate-your-project-tool-at-the-workspace-level" id="steps-to-integrate-your-project-tool-at-the-workspace-level"></a>

If you want to exclude some projects from your Linear app that’s integrated at the workspace level, you can do that too. Here are the steps for it:

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FIXYkQMAlBdYriDutLiCq%2F03-Disconnect-Specific-BetterBugs-Projects-from-Workspace-Wide-Integration.mp4?alt=media&token=c819eebc-5579-4425-a0b4-e040f83c67e0>" %}
Steps to Exclude BetterBugs Project(s) from the Workspace Level Integration: Video Demo | Linear Example
{% endembed %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side. Now, click the **gear icon** to open **Workspace Settings** > **Integrations.**
{% endstep %}

{% step %}

#### Select your project tool integrated at the workspace level <a href="#select-your-project-tool" id="select-your-project-tool"></a>

From the "**Integrations**" tab, select the tool that you want to exclude projects from. For instance, let’s exclude a project from “**Linear app**” (that's connected at the workspace level).
{% endstep %}

{% step %}

#### Open Linear card and turn off "All Projects"

Click on the “**Linear**” card. Next, toggle off "**All Projects**" and hit "**Continue**".&#x20;

This enables the "**Manage per project**" integration mode and instantly shows a list of projects that're centrally connected to Linear at the workspace level.
{% endstep %}

{% step %}

#### Select BetterBugs project to disconnect and click (⋮) under "Actions"  <a href="#authorize-betterbugs.io" id="authorize-betterbugs.io"></a>

Select the BetterBugs project (from the list below) to disconnect. For the project, click vertical dots (**⋮**) under the **Actions** column.
{% endstep %}

{% step %}

### Disconnect

To confirm action, click "**Disconnect**" and "**Continue**".
{% endstep %}
{% endstepper %}

This instantly disconnects the project from workspace wise integration with Linear.


# Workspace Automation

Check out the steps for workspace level automation in BetterBugs.io

### How it works <a href="#how-it-works" id="how-it-works"></a>

Once you connect your BetterBugs.io to your project tool at the workspace level, you can pre-configure values for the fields of that specific tool(s). So, whenever you create a bug report, you don’t have to populate the details manually for that connected tool.

Just **create and upload the report** to your BetterBugs.io project, and the report will **instantly be auto-shared to the integrated project tool.**

With one click, you’re good to go. No other steps are required. This means you don’t have to juggle tools or search for details about the project tool workspace to which the report has to be shared, saving you extra time, effort, and mouse and keyboard clicks.

### How to Integrate BetterBugs Workspace to Your PM Tool with Automation: Linear Example <a href="#steps-to-integrate-your-project-tool-at-the-workspace-level" id="steps-to-integrate-your-project-tool-at-the-workspace-level"></a>

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FWVEmkJ6f3l5WJkjreWaG%2F01-Enable-Workspace-wide-Automation-for-All-BetterBugs-Projects-for-Linear.mp4?alt=media&token=180ae845-5bb6-437d-b185-8c47ee9e06a3>" %}

{% hint style="success" %}
Here, we've covered the end-to-end steps to:

* Integrate Project Tool at Workspace Level
* Automation&#x20;

For manual integration only, check out the [Workspace Integration](/dashboard/workspace-settings/integrations/workspace-integration) Page.
{% endhint %}

{% stepper %}
{% step %}

#### Open Workspace Settings > Integrations

Click on BetterBugs Workspace name at the top left side. Now, click the **gear icon** to open **Workspace Settings** > **Integrations.**
{% endstep %}

{% step %}

#### Search Linear <a href="#select-your-project-tool" id="select-your-project-tool"></a>

In the **Integrations** tab, select your preferred tool and click on the tool's card. For instance, let's open **Linear** app's card.
{% endstep %}

{% step %}

#### Turn on workspace-wide integration

Make sure that that the toggle is **ON** for "**All Projects**".

{% hint style="info" %}
By default, its turned on for workspace level integration.
{% endhint %}
{% endstep %}

{% step %}

#### Connect

Next, hit “**Connect**” at the top right.
{% endstep %}

{% step %}

#### Authorize BetterBugs.io <a href="#authorize-betterbugs.io" id="authorize-betterbugs.io"></a>

Hit “**Authorize**” to authorize BetterBugs.io for your Linear Workspace.
{% endstep %}

{% step %}

#### Choose your preferred method for creating tickets

From the "**Forward Bug Reports**" dropdown, select "**Automatically**".&#x20;

{% hint style="info" %}
This fetches the Linear template with the available fields for automation. This enables you to configure automated ticket creation for Linear (or any other tools). This means while sharing a bug report to Linear, this would auto-populate fields for your Linear project (**Team**, **Project**, **Priority**, and others).&#x20;
{% endhint %}
{% endstep %}

{% step %}

#### Enter default field values

Add details for the available fields, such as **Team**, **Project**, **Priority**, and others.

These details would be used as defaults for every report you create and upload. **For instance**, if you are reporting only **bugs** for your projects, you can pre-configure the details for it, so you don’t have to fill in the details every time you report a bug to your project tool.
{% endstep %}

{% step %}

#### Confirm action

Finally, click “**Connect**” and you’re good to go.
{% endstep %}
{% endstepper %}

{% hint style="success" %}
You can follow the same steps to configure automation for other project tools.
{% endhint %}


# Recording Link

Configure your website for getting screen recording and technical details for issues using Recording Links: Login > Workspace Settings > 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 ->**&#x54;his 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.&#x20;

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

```html
<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>
```

{% 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.&#x20;

```html
<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>
```

{% endstep %}

{% step %}

#### Register Your Domain

To register your website address/base domain with BetterBugs.io, click “**Verify**” and the bottom right.&#x20;
{% 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.&#x20;

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.
{% 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.&#x20;

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.&#x20;

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.&#x20;
{% endstep %}

{% step %}

#### Disable the Reusable Option

Disable the "**Reusable**" option to create link for single usage.&#x20;

{% hint style="info" icon="lightbulb" %}
Here, we've covered the steps to generate the recording link for a one time usage.&#x20;

You can follow the same steps for [generating reusable recording links](/product-features/recording-links/using-recording-links) by enabling the "**Reusable**" option and **specifying the expiry date** + **number of times it can be reused**. &#x20;
{% 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.

  <div data-gb-custom-block data-tag="hint" data-style="info" data-icon="lightbulb" class="hint hint-info"><p><strong>MORE INFO</strong></p><p>The “<strong>Capture logs from</strong>” 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.</p></div>

{% 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.&#x20;

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) in the same report, everything bundled.

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

```html
<!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

<table><thead><tr><th width="282.33343505859375">Option</th><th width="226.5555419921875">Type</th><th>Description </th></tr></thead><tbody><tr><td><strong>styles</strong></td><td><p>{ theme?: "light" | "dark", </p><p>primaryColor?: string, primaryTextColor?: string, }</p></td><td>Set the styles of the recorder </td></tr><tr><td><strong>startRecordingBtnText</strong></td><td>string</td><td>Text for the start recording button  in the recorder UI</td></tr><tr><td><strong>mainHeaderText</strong></td><td>string</td><td>Main header text in the recorder UI</td></tr><tr><td><strong>subHeaderText</strong></td><td>string</td><td>Sub header text for recorder UI</td></tr><tr><td><strong>emailFieldLabel</strong></td><td>string</td><td>Email field label in the submit form after the recording is finished</td></tr><tr><td><strong>titleFieldLabel</strong></td><td>string</td><td>Title field label in the submit form </td></tr><tr><td><strong>descriptionFieldLabel</strong></td><td>string</td><td>Description field label in the submit form </td></tr><tr><td><strong>emailFieldPlaceholder</strong></td><td>string</td><td>Email field placeholder in the submit form </td></tr><tr><td><strong>titleFieldPlaceholder</strong></td><td>string</td><td>Title field placeholder in the submit form </td></tr><tr><td><strong>descriptionFieldPlaceholder</strong></td><td>string</td><td>Description field placeholder in the submit form </td></tr><tr><td><strong>successMessageHeaderText</strong></td><td>string</td><td>Main header text in the UI after the report is successfully submitted</td></tr><tr><td><strong>successMessageSubHeaderText</strong></td><td>string</td><td>Sub header text in the UI after the report is successfully submitted</td></tr><tr><td><strong>metaData</strong></td><td>object</td><td><p>Custom metadata to attach to reports. e.g., </p><p>{ username: "obi-wan",
<br>plan: "individual",
<br>userID: 1234, }</p></td></tr></tbody></table>


# Web SDK

Integrate a custom bug reporting/feedback widget into your web apps using the BetterBugs Web SDK: Login > Workspace Settings > Web SDK

### What is the BetterBugs Web SDK widget?

The BetterBugs Web SDK enables you to add a lightweight bug reporting/feedback widget to your web application. It’s got a simple and intuitive button that allows users to click, create, and submit a bug report or feedback instantly!

Once you install the Widget on your web app,

* Your customers or end-users can click the widget to create and directly share bit-perfect bug reports or send direct feedback back to you.&#x20;
* No downloads or setup is required from the end users.&#x20;
* End-users do not have to set up an account or anything else to use it.

### Installation

Check out the steps to install the BetterBugs Web SDK widget for your web apps.

<a href="/pages/9haCwnLDK49OyxHk7TiU" class="button primary">BetterBugs Web SDK: Installation Guide</a>


# Audit Logs

Audit logs enables you to record and track important activities and changes within your BetterBugs workspace: Login > Workspace Settings > Audit Logs (Admin Access Only)

{% hint style="info" %}
Audit Logs in BetterBugs is an [**Enterprise**](https://www.betterbugs.io/pricing) feature.
{% endhint %}

### What are Audit Logs in BetterBugs?

Audit logs in BetterBugs are detailed records that track important activities and changes within the workspace. As an admin, you can monitor what actions were taken, by whom, and when. This helps with accountability, troubleshooting, and compliance.

### What Audit Logs Record/Track?

Here’s a quick overview of what audit logs tracks:

* **Configuration changes** —> Updates to workflows, permissions, and global settings.
* **User management** —> Group membership changes, role assignments, and account updates.
* **Security events** —> Login attempts, failed logins, and access modifications.
* **System activity** —> Integrations and background processes.

### How Audit Logs Can Help?

* **Transparency** —> Provides a clear trail of changes.
* **Troubleshooting** —> Helps identify the root cause of any issues.
* **Compliance** —> Supports audits with verifiable records.
* **Security** —> Helps pinpoint suspicious or unauthorized activity.

### Getting Started

To enable Audit Logs for your account, you can directly connect with the founder.

<a href="https://calendly.com/nishil-betterbugs/30min?back=1&#x26;month=2024-06" class="button primary">Schedule a call with Founder</a>

### What Are the Actions that You (as an Admin) Can Track Using BetterBugs Audit Logs?

Here’s a quick summary table for it:

<table><thead><tr><th width="252.00018310546875">Action</th><th>Description</th></tr></thead><tbody><tr><td><strong>Workspace Management</strong></td><td>Create, update, archive, restore, enable/disable, or delete a workspace. Includes ownership changes and business/billing updates.</td></tr><tr><td><strong>Workspace Members &#x26; Roles</strong></td><td>Invite, resend invites, remove members, change user roles, manage guest approvals, and update SSO roles/domains.</td></tr><tr><td><strong>Workspace Automation</strong></td><td>Add, update, or remove automation within a workspace.</td></tr><tr><td><strong>Workspace Webhooks</strong></td><td>Add, update, or remove webhooks tied to workspace events.</td></tr><tr><td><strong>Workspace Integrations</strong></td><td>Connect, update, or remove project tools integrations at the workspace level.</td></tr><tr><td><strong>Project Management</strong></td><td>Create, update, archive, restore, or delete projects. Includes project status updates.</td></tr><tr><td><strong>Project Members &#x26; Roles</strong></td><td>Add, remove, change roles, or leave a project.</td></tr><tr><td><strong>Project Automation</strong></td><td>Add, update, or remove automation within a project.</td></tr><tr><td><strong>Project Webhooks</strong></td><td>Add, update, or remove project-specific webhooks.</td></tr><tr><td><strong>Project Integrations</strong></td><td>Connect, update, or remove integrations at the project level.</td></tr><tr><td><strong>Subscription &#x26; Billing</strong></td><td>Switch plans, cancel or prevent cancellation, update payment methods, and manage billing emails.</td></tr><tr><td><strong>API Keys</strong></td><td>Create, delete, or manually expire API keys.</td></tr><tr><td><strong>User Actions</strong></td><td>Signup, login, logout, accept/reject invites, update profile, or leave a workspace.</td></tr><tr><td><strong>Guest User Actions</strong></td><td>Request access, approve/reject manually, or update instant roles.</td></tr><tr><td><strong>Enterprise SSO</strong></td><td>Login via SSO, sync users, and manage auto-sync settings.</td></tr><tr><td><strong>Webhook Events</strong></td><td>Create, update, delete webhooks, and track data sent/received or failures.</td></tr><tr><td><strong>Automation Events</strong></td><td>Log automation success or failure.</td></tr><tr><td><strong>Integration Events</strong></td><td>Connect or disconnect integrations.</td></tr><tr><td><strong>Project Filters</strong></td><td>Create, update, or delete project filters.</td></tr><tr><td><strong>SDK Bug Reports</strong></td><td>Log bug creation via mobile or web SDK.</td></tr></tbody></table>


# Security (via Regex)

Add regular expressions (REGEX) to BetterBugs.io for it to automatically redact/remove sensitive data from your bug reports.

### Redact data with regex patterns

The "**Redact Data with Regex**" function lets you add custom regex patterns to devtools data captured in bug reports, allowing you to hide or redact sensitive information from bug reports before it gets uploaded.

<a href="/pages/jUprQa6Py8Rodcg6LKz7" class="button primary">Read All About Redact with Regex</a>

### Steps to Add Custom Regex Patterns

Adding custom regex patterns is super easy. Here’s how to do it:

{% stepper %}
{% step %}

#### Go to Workspace Settings > Security (Regex)

Click on BetterBugs Workspace name at the top left side. Now, click the **gear icon** to open **Workspace Settings > Security (Regex)**
{% endstep %}

{% step %}

#### Click "Add New Pattern"

Click "Add New Pattern" button to start adding your perferred Regex patterns.
{% endstep %}

{% step %}

#### Enter Regex name and Regex Pattern

Enter the desired “**Regex Name**” and its “**Regex Pattern**”.&#x20;
{% endstep %}

{% step %}

#### Save&#x20;

Hit "**Add Pattern**" button to save it.
{% endstep %}
{% endstepper %}

You're good to go.

### Default Regex Patterns that Come with BetterBugs.io

By default, BetterBugs.io comes bundled with 10 pre-added regex patterns that you might commonly use. This helps you get started with using the redaction feature right off the bat.&#x20;

### Saved Patterns

List of data points redacted by default (pre-added by BetterBugs.io):

#### **Password**

**Regex**

```regex
/(?<=["`']?(?:password|passwd|pwd)["`']?\s*[:=]\s*["`'])([^"`']+)(?=["`'])/gi
```

This regex looks for the keywords password, passwd, or pwd, optionally enclosed in quotes (", ', or \`), followed by an assignment operator (= or :), and captures the text representing the password inside quotes.

#### **API Key**

Regex

```regex
/(?:api[_-]?key|access[_-]?token|client[_-]?secret)[:=]\s*(['"]?)([a-zA-Z0-9_\-\.]{16,64})\1/gi
```

This regex matches API keys or similar tokens assigned to terms like api\_key, access\_token, or client\_secret. The key must be alphanumeric, optionally include \_, -, or ., and be 16–64 characters long.

#### **Credit Card**

Regex

```regex
/\b(?!0{16})(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|6(?:011|5[0-9]{2})[0-9]{12}|(?:2131|1800|35\d{3})\d{11})(?:[\s-]?\d{4})?/g
```

Matches valid credit card numbers from providers like Visa, Mastercard, Amex, Discover, etc., while excluding invalid numbers (e.g., 0000000000000000). It recognizes formats with spaces or dashes.

#### **CVV**

Regex

```regex
/(?<=(?:["']?(?:cvv2?|cvc2?|cid)["']?\s*[:=]\s*["']?))(?!000|999)\d{3,4}(?=["']?)/gi
```

Identifies 3–4 digit CVV codes assigned to terms like cvv, cvc, or cid, ensuring the code isn’t 000 or 999.

#### **Email**

Regex

```regex
/[a-zA-Z0-9._%+-]+(?:%40|@)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z]{2,})+/gi
```

Matches standard email addresses, allowing for +, %, or dots in local parts of the address.

#### **Authorization Header**

Regex

```regex
/(?:Authorization["'\s:]+|Bearer\s+)(eyJ[A-Za-z0-9\-_\.]+\.eyJ[A-Za-z0-9\-_\.]+\.[A-Za-z0-9\-_\.]+)/gi
```

Captures Bearer tokens from Authorization headers. These tokens must follow the JSON Web Token (JWT) structure with three dot-separated Base64-encoded segments.

#### **JWT Token**

Regex

```regex
/(eyJ[A-Za-z0-9\-_\.]+\.eyJ[A-Za-z0-9\-_\.]+\.[A-Za-z0-9\-_\.]+)/g
```

Matches JSON Web Tokens (JWT), which have three segments separated by dots. Each segment is Base64-encoded.

#### **Client ID**

Regex&#x20;

```regex
/(?<=(?:["']?(?:client_?id|clientId|client-id)["']?\s*[:=]\s*["']))([A-Za-z0-9_-]{32,})(?=["'])/gi
```

Extracts client\_id values that are 32+ alphanumeric characters long, assigned to terms like client\_id or clientId.

#### **IPv6**

Regex

```regex
/\b(?:[0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}\b/g
```

Matches valid IPv6 addresses, which are represented in hexadecimal and separated by colons.

#### **IPv4**

Regex

```regex
/(?<!["']?(?:version|ver|browserVersion|browserversion|browser_version|Chrome|chrome|Firefox|firefox|Safari|safari|Edge|edge|Opera|opera|Chrome\/|chrome\/|Firefox\/|firefox\/|Safari\/|safari\/|Edge\/|edge\/|Opera\/|opera\/)["']?\s*[/:=]\s*["']?)\b(?:\d{1,3}\.){3}\d{1,3}\b/g
```

Matches valid IPv4 addresses, ensuring they are not browser version strings (e.g., Chrome/98.0.0.0).


# My Account

Make all the changes you want to your BetterBugs account.

### Steps to access account settings

{% stepper %}
{% step %}

#### Get started

Open the extension from your browser and click the "**Home**" icon to open the BetterBugs dashboard.
{% endstep %}

{% step %}

#### Open Settings

From the left side panel, click on your Profile picture or name at the left bottom and click "**Settings**"&#x20;
{% endstep %}

{% step %}

#### Click "My Account"

Click "**My Account**" to access profile and other settings.
{% endstep %}
{% endstepper %}

### My Account: Options

Here, you've the following options:

<table><thead><tr><th width="239.7777099609375">My Account tab names</th><th>Description</th></tr></thead><tbody><tr><td><a href="/pages/zg5gCiIABd64EiW7q7Im">Profile</a></td><td>Manage and see general information about your account. Plus, you can set your preferred Theme.</td></tr><tr><td><a href="/pages/RigqF6fvKCjv4yf8o1xs">Plans and Usage</a></td><td>Manage your subscription and view the billing history for your account.</td></tr><tr><td><a href="/pages/zNMTvn8rvAFdCfiDqsJF">Deleted Sessions</a></td><td>Manage your deleted sessions from here. You can restore or permanently delete them based on your preferences.</td></tr></tbody></table>


# Profile

Manage general information about your Profile: Login > Settings > My Account > Profile

The "**Profile**" tab in **Settings > My Account** allows you to manage general information about the profile.&#x20;

### My Details

Enables you to view and update your personal info. Here's what you can manage/edit from here:

* Profile picture
* Full Name
* Work Email&#x20;
* Your Role

### My Workspaces

Enables you to manage and leave the workspace you've joined so far.&#x20;

### Theme

Set a preferred theme for your application:

* Light Mode
* Dark Mode
* System default

### Delete my account

{% hint style="danger" %}
**WARNING:** Deleting the account will permanently remove it and all its associated data. The delete action **CANNOT BE UNDONE**.
{% endhint %}

To delete your account:

1. Click the "**Delete account**" button.
2. Hit "**Yes, Delete**" to confirm action.


# Plans and Usage

Manage your subscription and view the billing history for your account: Login > Settings > My Account > Plans and Usage

{% hint style="info" %}
**IMPORTANT:** You need to have Admin-level permissions to view and manage the "**Plans and Usage**" option.
{% endhint %}

### BetterBugs pricing plans

BetterBugs offers a free tier and two paid plans. Check out the complete list of features that come with each plan from the pricing page.

<a href="https://www.betterbugs.io/pricing" class="button primary">Visit the pricing page</a>

### Quick overview

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Free</strong></td><td>Essential features for small teams. No credit card required.</td><td><ul><li>Unlimited sessions &#x26; projects</li><li>Device information</li><li>Developer logs</li><li>App storage data</li><li>Integrate all project tools</li><li>AI repro steps (up to 15 times)</li><li>2-year data retention policy</li><li>Up to 3 users</li><li>Up to 50 Recording Links/month</li></ul></td><td><a href="/files/UA3sSnY3W0dJKqOR1ihE">/files/UA3sSnY3W0dJKqOR1ihE</a></td><td><a href="https://app.betterbugs.io/login">https://app.betterbugs.io/login</a></td></tr><tr><td><strong>Team (with 10-day free trial)</strong></td><td>Better fit for growing teams handling multiple projects.</td><td><ul><li><strong>Everything in free, plus</strong></li><li>Video annotations and blurring</li><li>AI repro steps (up to 350 times/month)</li><li>Unlimited integrations with PM tools</li><li>AI Debugger</li><li>Jira 2-way sync</li><li>Support for Sentry integration</li><li>Integrate using Webhook</li><li>Automation with project tools</li><li>Private projects and sessions</li><li>Unlimited guest users</li><li>Up to 100 Recording Links/month</li></ul></td><td><a href="/files/Fk4w2ynR4viChecBO764">/files/Fk4w2ynR4viChecBO764</a></td><td><a href="https://app.betterbugs.io/login">https://app.betterbugs.io/login</a></td></tr><tr><td><strong>Enterprise</strong></td><td>Custom workflows, premium support, and top-tier security for large teams.</td><td><ul><li><strong>Everything in Team, plus</strong></li><li>Custom workflows and premium support</li><li>Unlimited AI repro steps</li><li>SAML SSO</li><li>Workspace analytics</li><li>Custom data retention policy</li><li>On-premise data storage</li><li>Priority support</li><li>Audit Trail</li><li>Unlimited Recording Links</li></ul></td><td><a href="/files/57eAqb1eQndYRHADqOCU">/files/57eAqb1eQndYRHADqOCU</a></td><td><a href="https://calendly.com/nishil-betterbugs/30min?back=1&#x26;month=2024-07">https://calendly.com/nishil-betterbugs/30min?back=1&#x26;month=2024-07</a></td></tr></tbody></table>


# Deleted Sessions

Manage your deleted sessions from here: Login > Settings > My Account > Deleted Sessions

From here, you can:

* View all deleted sessions
* View deleted sessions based on your project
* Delete all sessions in one go.
* Delete sessions based on your project
* Restore deleted sessions.

{% hint style="info" icon="lightbulb" %}
**NOTE**: Deleted sessions that are older than 30 days are auto-deleted and cannot be restored.
{% endhint %}


# AI Debugger

The AI Debugger enables you to run crazy fast debugging sessions for the bug reports that you create using BetterBugs.

### What is BetterBugs AI Debugger?

AI-Debugger is an integrated AI tool within the BetterBugs app that runs auto-analysis and diagnosis of the bug reports you create using the BetterBugs tool. This allows you to run AI-assisted debugging sessions for your bug reports and fix issues way faster than just debugging using manual methods.

Based on the visual evidence (screenshot, screen recording, or two-minute Rewind video session) + auto-captured technical details of the issue (console logs, network requests, device info, env details, and others) + the complete context of the issue that comes *bundled as a context-rich and data-filled bug report,* **the AI-Debugger analyzes the report for you within seconds and provides**:

* **Root cause analysis**
* **Possible solutions**
* **Test cases for the issue**
* **And more.**

{% hint style="info" %}
**NOTE**: The BetterBugs AI debugger is powered by [**Anthropic**](https://www.anthropic.com/). Using the AI-Debugger is completely optional, and it only analyzes your bug reports upon your consent. We respect your data privacy. Also, no models are trained using your data in any form or format.
{% endhint %}

### What are the Key Benefits of Using the BetterBugs AI Debugger?

Using the AI Debugger, you can:

* Get an intelligent analysis of the bug report within seconds&#x20;
* Get auto-analysis of the clicks and page navigation steps that triggered the error + issue reproduction steps
* Get a potential root cause analysis of the issue
* Analyze errors and technical details auto-captured by BetterBugs from the browser devtools — device info, environment info, console logs, network requests (failed API calls and others), warnings, page navigation steps, device info, and others.
* Get analysis of frontend errors — CSS, design issues, and layout issues &#x20;

### How Does the BetterBugs AI Debugger Work?

Once you create a bug report and upload it to your BetterBugs project, you’ll find an **AI Debugger tab in the devtools console of the bug report**.&#x20;

Here, you can interact with the AI Debugger agent in a chat format for analysis or get more information about the issue.

Upon your consent to analyze the bug report, the AI-Debugger gives you a detailed and step-by-step breakdown of the:

* **Errors**
* **Reproducibility**
* **Root Cause**
* **Suggested Solutions**
* **Test Cases**
* **Conclusion**

Along with the visual proof of the issue + auto-captured technical details of the issue (console logs, network requests, and others) packed within the bug report, **you can leverage AI as a sidekick** to analyze the details in the bug report to find the root cause of the issue much faster and debug way better.&#x20;

### How to Use the BetterBugs AI Debugger?

Using the AI debugger is super easy. Here’re the steps:

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FErPSy1xU4xzB1sKwMAvf%2F02-AI-Debugger.mp4?alt=media&token=990611ca-2dcc-4cdd-a056-313d238e2b39>" %}
BetterBugs AI Debugger | Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Create a Bug Report Using BetterBugs.io

Create a bug report using the extension.

[Get Started](/getting-started/quickstart)
{% endstep %}

{% step %}

#### Open the “AI Debugger” tab

Now, within the report, press the “**AI Debugger**” tab from the devtools console.
{% endstep %}

{% step %}

#### Allow the AI Debugger to Start Analysis

You’ll be prompted to allow the AI-Debugger to analyze the issue and provide a diagnosis based on the visual evidence, context, and technical info available in the report (console logs, network requests, environment info, and others).

Within seconds, it gives you the root cause analysis, possible solutions, and other information about the error.
{% endstep %}

{% step %}

#### Continue Analysis in the Chat

You can continue with the analysis in the interactive chat and ask follow-up questions to aid you with the debugging process.
{% endstep %}
{% endstepper %}

### Key Features of the BetterBugs AI Debugger

* **Interactive chat** *for using the debugger*.
* **Cut back on manual research for fixing errors** — *the AI-Debugger does this for you*.&#x20;
* **Event capture and translation** into *human-readable steps*.
* **Smart error analysis** and **AI-driven bug diagnosis** *within seconds*.
* **Auto debugger** *that uses the captured technical details and visual proof of the issue (screenshot or screen recording, or Rewind session video) for context-driven and data-backed analysis*.

### AI Privacy Policy

* [Anthropic's privacy policy](https://www.anthropic.com/legal/privacy) strictly [prohibits using user data and input/outputs for training their models](https://privacy.anthropic.com/en/articles/7996868-is-my-data-used-for-model-training).
* BetterBugs.io does not allow auto-sharing or analyzing your data by third-party AI providers.&#x20;
* You’ll need to provide consent to use the AI-Debugger each time you want to analyze a report. That way, you’re in full control of which bug reports get analyzed and which ones don’t.

Also, check out our [Privacy Policy ](https://www.betterbugs.io/privacy-policy)and [Security and Compliance](/product-features/security-and-compliance) page for more info on the safeguards in place.&#x20;

### Frequently asked questions (FAQs)

<details>

<summary>What data does the AI Debugger analyze?</summary>

The AI-Debugger analyzes the complete information available in a bug report, including the visual evidence (screenshot, screen recording, or Rewind session video), text details added to the report, and the technical info captured by BetterBugs about the issue (console logs, network requests, errors, environment info, and others). Also, **using the AI Debugger is an opt-in feature and we do not analyze the bug report without your explicit consent**.

</details>

<details>

<summary>How accurate are the solutions provided by the AI-Debugger?</summary>

The AI-Debugger suggests the root cause analysis, possible solutions, test cases, and conclusion by analyzing the complete info available in the bug report. Simply put, it acts as your sidekick that helps you get a head start on your debugging sessions to get issues fixed much faster.

</details>

<details>

<summary>Is my data used to train AI models?</summary>

No. We do not share your data for training AI models and your debugging data remains private at all times. Anthropic’s privacy policy strictly [does not allow user input/output data sent through their API for model training](https://privacy.anthropic.com/en/articles/7996868-is-my-data-used-for-model-training).

</details>


# MCP

BetterBugs MCP (Model Context Protocol) enables you to put your BetterBugs report links directly in AI Agents for AI-assisted RCA and super fast debugging sessions.

### BetterBugs MCP: Quick Overview

The BetterBugs MCP (Model Context Protocol) enables you to load BetterBugs bug reports (via report links) directly to your preferred AI Agents and developer environments with MCP Client capabilities (such as Cursor, VS Code, and Windsurf).&#x20;

Once you configure BetterBugs with your MCP Client, all you need is to paste the BetterBugs bug report link(s) along with your prompt and context to debug it.&#x20;

The AI Agent then accesses the complete bug report (that comes bundled with the details and technical info, including screenshot, console logs, network requests, events, summary, steps to reproduce, and other info).&#x20;

**The result?** You get instant root cause analysis of the issue, possible solutions, and other debugging info and steps.&#x20;

As a developer, you can use the BetterBugs MCP server AI-debugging combined with your manual skills to resolve software issues significantly faster and better.

### Prerequisites: What do you need to start using BetterBugs MCP

To start using it, create a bug report using BetterBugs extension and include the report link in your prompt.&#x20;

Here’re the steps:

<figure><img src="/files/C7z48gTUtpac6SrUjvfZ" alt=""><figcaption><p>Steps to Create a Bug Report Using BetterBugs</p></figcaption></figure>

1. Install the [BetterBugs Chrome extension](https://chrome.google.com/webstore/detail/betterbugs-a-fresh-approa/mdljmlgokccncglfobogbfjgcijldnaj).
2. Open extension and capture the bug using the “**Capture Screenshot**” option.
3. Annotate the screenshot to highlight the bug (optional)
4. In the Summary area at the right, select the **BetterBugs Workspace** and **Project**. This is the location within BetterBugs where your report would save once you finish creating the report.
5. Add bug title and description. Or, just enable the “**AI**” toggle (as in the demo) to add **AI-generated title, summary**, and **steps to reproduce**. The technical details (console logs, env info, network, and others) would auto-attach to the bug report.
6. Hit “**Create Session**” button from the top right to create a report.

Okay! Your report is ready to be consumed by the AI Agent through the MCP Client.

### How to setup BetterBugs MCP it for your preferred MCP Client

Here, we've provided practical steps to integrate BetterBugs MCP with the following Clients:

* Visual Studio Code
* Cursor
* Windsurf
* Google Antigravity
* Claude App
* Claude Code
* Trae IDE
* Other MCP Clients

{% tabs %}
{% tab title="VS Code" %}

### Visual Studio Code

<figure><img src="/files/BhbTeQYdJarTNMjrk9I2" alt=""><figcaption><p>Steps to Integrate BetterBugs MCP with VS Code</p></figcaption></figure>

1. Open VS Code and press **CTRL/CMD + P**&#x20;
2. Search **>MCP: Add Server**
3. Select **HTTP (HTTP or Server-Sent Events)**
4. Add the following URL: **<https://mcp.betterbugs.io/mcp>**
5. Give the MCP Server a name, such as **BetterBugs**
6. The **`mcp.json`** file opens instantly with the following code snippet:

```javascript
{
  "servers": {
    "BetterBugs": {
      "url": "https://mcp.betterbugs.io/mcp",
      "type": "http"
    }
  },
  "inputs": []
}
```

{% hint style="warning" %}
For first time users, you’d be prompted to authenticate to **mcp.betterbugs.io**.&#x20;

* From the dialog box, click “**Allow**” or "**Open**" to start authentication.  Click “**Authorize**” (from the BetterBugs web page) and you’re good to go!
* If the dialog box isn’t auto-displayed, you can click the “**Start**” text available within your MCP code snippet to start the authentication process.

Or, if it's authenticated instantly (as in the demo), you'd find it "**Running**" state within your code snippet.
{% endhint %}
{% endtab %}

{% tab title="Cursor" %}

### Cursor

#### **OPTION 1: Integrate BetterBugs MCP with Cursor automatically**

Use the following link to instantly configure Cursor with BetterBugs MCP: -> [**Add to Cursor**](cursor://anysphere.cursor-deeplink/mcp/install?name=BetterBugs\&config=eyJ1cmwiOiJodHRwczovL21jcC5iZXR0ZXJidWdzLmlvL21jcCIsImhlYWRlcnMiOnt9fQ%3D%3D)

#### **OPTION 2: Manual Integration Steps**

Alternatively, you can configure it manually. Here’re the steps:

<figure><img src="/files/dErqX9QSuhMFKufcyi6v" alt=""><figcaption><p>Steps to Integrate BetterBugs MCP with Cursor</p></figcaption></figure>

1. Open Cursor and enter **CTRL/CMD + P**
2. Search: **>View: Open MCP Settings**
3. In the “**Tools and MCP**” option from the left navigation panel and click “**Add Custom MCP**”
4. Paste the following code in the **`mcp.json`** file:

```javascript
{
    "mcpServers": {
      "BetterBugs": {
        "url": "https://mcp.betterbugs.io/mcp"
      }
    }
}
```

5. Save the file and open the “**Cursor Settings**” tab.
6. From the “**BetterBugs**” option (should be available under “**Installed MCP Servers**”), hit “**Connect**”.
7. In the Cursor dialog box, hit “**Open**”.
8. Finally, hit “**Authorize**” for successful authorization.

Okay! You’re all set with the MCP config on Cursor. It's as easy as that!&#x20;

To confirm the BetterBugs MCP config for Cursor, in **Cursor Settings** > **Tools & MCP** > **Installed MCP Servers**, you should see BetterBugs successfully installed with 7 tools enabled
{% endtab %}

{% tab title="Windsurf" %}

### Windsurf

Here're the steps for it:

<figure><img src="/files/nh75OCzAx0o6xougyDOI" alt=""><figcaption><p>Integrate BetterBugs MCP with Windsurf</p></figcaption></figure>

1. Open Windsurf, press **CTRL /CMD + P**
2. Enter:  **>Windsurf: MCP Marketplace**
3. In the MCP Marketplace window, click the gear icon on the right. This opens the **`mcp_config.json`** file right away.
4. In the JSON file, add the following code snippet:&#x20;

```javascript
{"mcpServers": {"BetterBugs": {"url": "https://mcp.betterbugs.io/mcp"}} }
```

5. Save the file. This opens a Windsurf dialog box for authenticating it with BetterBugs. Click “**Open**”.&#x20;
6. Finally, click “**Authorize**” and you’re good to go!.

The authorization screen opens with the message that it’s successful! Make sure to exit and then reload Windsurf to ensure that changes are implemented correctly.
{% endtab %}

{% tab title="Antigravity" %}

### Google Antigravity

1. Open Antigravity and press **CTRL/CMD + P**&#x20;
2. Search **>Antigravity: Manage MCP Servers**
3. Click **View raw config** to open **`mcp_config.json`** file.
4. Add the following code snippet in the JSON file and save:

```javascript
{
  "mcpServers": {
    "betterbugs": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.betterbugs.io/mcp",
        "--transport",
        "http-first"
      ]
    }
  }
}
```

5. Open **Manage MCP servers** tab and click "**Refresh**".

After authentication, you'd find "**betterbugs**" as an MCP server, with 7 tools enabled for Antigravity, ready for usage.

<figure><img src="/files/mtlnvWriXrmXrwuiQrpq" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Claude App" %}

### Claude Desktop App

{% hint style="info" %}
NOTE: Make sure you have Node.js (v20 or above) installed on your system.
{% endhint %}

Steps to integrate BetterBugs MCP with Claude:

<figure><img src="/files/ep4Rc7sIHDRDzDpnhR9l" alt=""><figcaption><p>Steps to Integrate BetterBugs MCP with Claude</p></figcaption></figure>

1. Open Claude app and open “**Settings**” from the left pane.
2. Next, click “**Developer**” under Desktop app. Here, you’d find the “**Local MCP servers**” window to add and manage your MCP servers.&#x20;
3. Click “**Edit Config**”. This’d open your system location with the `claude_desktop_config.json` file.
4. Open the JSON file in your text editor, add the following code snippet, and save:

```javascript
{
  "mcpServers": {
    "betterbugs": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.betterbugs.io/mcp",
        "--transport",
        "http-first"
      ]
    }
  }
}
```

To apply changes to the `claude_desktop_config.json`, quit the Claude Desktop app (via the System Tray/Menu Bar) and then re-launch it.

To confirm for successful installation. Go to **Settings** > **Developer** > **Local MCP servers**. You should see “**betterbugs**” running in the Local MCP servers window.

To double check its available to use, take following steps:

<figure><img src="/files/1DlRpOqSUCcxkhI4Gt66" alt=""><figcaption><p>Confirm BetterBugs MCP connection with Claude</p></figcaption></figure>

1. Open a new chat on Claude app.
2. Hit the “**+**” icon at the bottom left of the chat area.
3. Click “**Connectors**”. You should see **betterbugs** in the **enabled** state.&#x20;

You’re good to go with the integration.
{% endtab %}

{% tab title="Claude Code" %}

### Claude Code

1. In your terminal, run:

```javascript
claude mcp add BetterBugs https://mcp.betterbugs.io/mcp -t http -s user
```

2. Open Claude

```javascript
claude
```

<figure><img src="/files/g9vCw9MPODCbj0ADyILQ" alt=""><figcaption><p>BetterBugs MCP Installation for Claude Code </p></figcaption></figure>

3. Enter: `/mcp` . Here, you'd find **BetterBugs** in disabled state under  "**Manage MCP servers**".

<figure><img src="/files/Gbjioat5L2AXHv3W7o0u" alt=""><figcaption><p>Locate BetterBugs using /mcp command under "Manage MCP Servers"</p></figcaption></figure>

4. Next, select **BetterBugs** and enable it for Claude Code.

<figure><img src="/files/1GYOUCWRYjTNJAPW85mA" alt=""><figcaption><p>Enable BetterBugs for Claude Code</p></figcaption></figure>

You're good to go! You should see **BetterBugs** MCP "**connected**" to Claude.

<figure><img src="/files/hNDztmcvd4gsevLMaTan" alt=""><figcaption><p>Check for Successful Installation of Betterbugs MCP for Claude Code</p></figcaption></figure>
{% endtab %}

{% tab title="Trae IDE" %}

### Trae IDE

1. Open the **Trae** app.&#x20;
2. Open the “**AI Side Bar**” from the top right and click the gear icon for the “**AI Management**” option
3. Click the “**MCP**” tab.
4. Open the “**+ Add**” drop down and select “**Add Manually**”.
5. Paste the following code snippet in the JSON file and hit “**Confirm**”.

```javascript
{
  "mcpServers": {
    "betterbugs": {
      "command": "npx",
      "args": [
        "mcp-remote",
        "https://mcp.betterbugs.io/mcp",
        "--transport",
        "http-first"
      ]
    }
  }
}
```

6. Finally, authorize BetterBugs MCP for Trae.

You’re good to go with the BetterBugs MCP config with Trae IDE.
{% endtab %}

{% tab title="For Other MCP Clients" %}

### For Other MCP Clients

If you’re using any other MCP clients other than those listed, just add the following code snippet into the **mcp JSON** file of that client to start using BetterBugs MCP:

```javascript
{"mcpServers": {"BetterBugs": {"url": "https://mcp.betterbugs.io/mcp"}} }
```

{% endtab %}
{% endtabs %}

### How to use BetterBugs MCP for AI debugging: Windsurf Example

Once you’re good with the config steps, here’s how to use it:

<figure><img src="/files/hgOq4Sg5aN5UXweknQAp" alt=""><figcaption><p>Example: BetterBugs MCP + Windsurf in Action to Fix Code</p></figcaption></figure>

1. Create a bug report using BetterBugs and copy the report link.
2. Paste the BetterBugs report link in your MCP client chat space along with the prompt and context for it.
3. If required, approve any requests that the AI agent makes to provide more info and context. Continue your debugging session in the chat interface.&#x20;

### BetterBugs MCP: Available tools/properties

<table><thead><tr><th width="250.7777099609375">Tools/Property Names</th><th>Description</th></tr></thead><tbody><tr><td><code>getUserDetails</code></td><td>Get authenticated user profile, available workspaces, and account information.</td></tr><tr><td><code>listWorkspaces</code></td><td>Retrieve all workspaces the user has access to, including workspace metadata, permissions, and project counts.</td></tr><tr><td><code>listProjects</code></td><td><ul><li>List all projects within a specific workspace, including project status, creation dates, and metadata. </li><li>Requires a <code>workspace_id</code> parameter.</li><li>Pagination support using <code>skip</code> and <code>limit</code>.</li><li>Supports up to 50 results per request.</li><li>Responses now include total project count and <code>has_more</code> status.</li></ul></td></tr><tr><td><code>getBugDetails</code></td><td><ul><li>Fetch comprehensive bug information including title, description, status, priority, reporter, timestamps, and visual evidence (screenshots, screen recordings). </li><li>Returns structured bug data with metadata.</li><li>Support for retrieving comments and viewers.</li><li>Comment pagination controls.</li><li>Support for <code>workspace_id</code> and <code>project_id</code> when requesting additional data.</li></ul></td></tr><tr><td><code>listBugs</code></td><td><ul><li>Retrieve all bugs for a specific project, including bug summaries, status, priority, and basic metadata.</li><li>Pagination support using <code>skip</code> and <code>limit</code>.</li><li>Support for viewing archived bugs.</li><li><p>Advanced filtering options including:</p><ul><li>Priority</li><li>Status</li><li>Creator</li><li>Assignees</li><li>Tags</li><li>Integrations</li><li>Creation Source</li><li>Date Range</li></ul></li></ul></td></tr><tr><td><code>getScreenshot</code></td><td><ul><li>Use this to get a screenshot from the CDN. </li><li>Requires <code>screenshot_url</code>. </li><li>Must be called after <code>getBugDetails</code>. </li><li>Essential for enhanced visual analysis.</li></ul></td></tr><tr><td><code>getBugLogs</code></td><td>Get detailed technical logs for a specific bug including console logs, network requests, user interactions, and step-by-step reproduction data.</td></tr><tr><td><code>shareBug</code></td><td>Share bugs with teammates via email.</td></tr><tr><td><code>updateBugDetails</code></td><td>Update titles, status, priority, tags, assignees, comments, project assignment, and archive status.</td></tr><tr><td><code>recordingLink</code></td><td>Create, manage, and monitor recording links directly through MCP.</td></tr><tr><td><code>basecamp</code></td><td>Manage Basecamp projects, boards, assignees, and submit bugs.</td></tr><tr><td><code>jira</code></td><td>Access Jira projects, issue types, boards, sprints, labels, assignees, and create issues directly from BetterBugs.</td></tr><tr><td><code>managemembersinworkspace</code></td><td>Manage workspace members and roles.</td></tr></tbody></table>

### Prompt Example: Using BetterBugs MCP with Cursor

<figure><img src="/files/Mb7QByffFHi4cCYb9eRF" alt=""><figcaption><p>Prompt Example: Using BetterBugs MCP with Cursor</p></figcaption></figure>

#### Prompt

Analyze the following report **`<BetterBugs Report Link>`** and provide a RCA for it. Suggest fixes and test cases for the issue. Provide the steps to resolve the issue.

#### BetterBugs Tools and AI Agent&#x20;

* BetterBugs Report link (bundled with Screenshot and other technical details)
* BetterBugs MCP
* Cursor

### Frequently Asked Question (FAQs)

#### 1 - Can I use more than one BetterBugs report link in my prompt?

Yes. You can use more than one bug report link for analysis and troubleshooting the issue. However, we highly recommend using one report link at a time. This allows your AI agent to perform optimally and cohesively for better context analysis.

#### 2 - Can I use the MCP without BetterBugs Chrome Extension?

Yes. All you need is the BetterBugs report link from any of your team members or end-user who uses the extension for creating BetterBugs reports. Same way, to analyze your own BetterBugs report you’d need the extension to create your reports. Else, you can use report links from others.

#### 3 - Do BetterBugs MCP share the MCP data to third-party AI providers for training purposes?&#x20;

No. BetterBugs does not auto-share or analyze your MCP data for training purposes. You can check out our AI privacy policies [here](/debug-a-report/ai-debugger).

#### 4 - How do the BetterBugs admins control what MCP can access?&#x20;

BetterBugs MCP works with the exact permissions set for the BetterBugs report link. The MCP has no access to any data that the user (whom the BetterBugs report belongs to) can’t see already.&#x20;


# BetterBugs Web SDK

Integrate a custom bug reporting/feedback widget into your web apps using the BetterBugs Web SDK.

### What is the BetterBugs Web SDK Widget?

The BetterBugs Web SDK enables you to add a lightweight bug reporting/feedback widget to your web application. It’s got a simple and intuitive button that allows users to click, create, and submit a bug report or feedback instantly!

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2F0OOifwiBNJZkPV4wpBdu%2F01-Web-SDK-Quickstart-Video.mp4?alt=media&token=d5a777fd-d68d-4c4d-9519-729cb67a97dc>" %}
BetterBugs.io Web SDK Feedback Widget | Video Demo
{% endembed %}

Once you install the Widget on your web app,

* Your customers or end-users can click the widget to create and directly share bit-perfect bug reports or send direct feedback back to you.&#x20;
* No downloads or setup is required from the end users.&#x20;
* End-users do not have to set up an account or anything else to use it.

### How it Works

When end users face any difficulty or an issue while using your app, they can click the widget button to take a screenshot or record their screen and instantly send it to you as a complete bug report.&#x20;

The submitted bug report comes bundled with:

<div data-with-frame="true"><figure><img src="/files/TzkliiIy36kUFeCQ2ql5" alt=""><figcaption></figcaption></figure></div>

1. **The visual evidence (screenshot or screen recording)**&#x20;
2. **Auto-attached technical details (console logs, network requests, errors, warnings, and others).**

Developers can then use these technically sound, context-rich, and data-filled bug reports for debugging purposes.&#x20;

In a nutshell, using the widget button, your end-users and customers can easily:

* **Report a bug or an issue while using your app**
* **Submit feedback effortlessly**

### What are the Top Use Cases of the BetterBugs Web SDK Feedback Widget?

You can use the feedback widget to:

* Get instant bug reports/feedback from external users and customers
* Get visual evidence of an issue + auto-attached technical details (console logs, errors, and others)
* Report app issues to other team members (in “development” mode)
* Add a bug reporting widget to your app with a custom UI (using customization options)
* Equip apps with quick bug reporting capabilities in bug bash events
* Run testing activities and QA overall&#x20;

### What is the Difference between the BetterBugs.io Extension and the BetterBugs Web SDK widget?

The BetterBugs extension is a fully fledged web application that provides advanced bug reporting and debugging features. The Web SDK is a part of the BetterBugs extension that works in sync with the BetterBugs application and allows users to submit bug reports with minimal effort, zero setup, and a simple-to-use interface.

### When to Use: Extension vs. Web SDK Feedback Widget

With the BetterBugs extension, you can:

* Create and share context-rich and technically sound bug reports
* Do bug tracking, reporting, debugging, and testing activities
* Manage project bug reports
* Share reports with your issue trackers and project tools&#x20;
* Do QA, testing, and debugging activities overall
* And many others.

The Web SDK serves as the extension’s sidekick to collect fully-fledged bug reports from customers and internal team members. You can use the Web SDK widget to:

* Get the visual evidence of the issue + error logs from the console
* Get bug reports from end users without any setup
* Serve as a built-in and automated bug reporting software
* Getting quick feedback from users if something goes wrong
* Get the exact steps of user action in case of an issue


# Quick overview

Simplify bug reporting within your web apps with the BetterBugs Web SDK.

### About BetterBugs Web SDK

The BetterBugs Web SDK allows you to include bug reporting and instant feedback capabilities in your application with minimal settings and effort.

Now, you can equip your apps with a user-friendly and easy-to-implement widget for issue reporting capabilities, such as media capturing, log tracking, getting the two-minute Rewind session video, and real-time hooks to help you and your team report, diagnose, and fix issues effectively.

### Breaking it down

Using the BetterBugs Web SDK, you can enhance your web apps with bug reporting features that allow you to capture useful data about the issues.&#x20;

Here's more on it.

### Key features of the SDK

* **Seamless integration** — Quick installation and easy to use with a few lines of code.
* **Easily customizable** — Tweak the SDK behavior with configurable options for properties, such as metaData, recordType, enableAnnotation, and many others.
* **Use Methods** — Control the SDK with programmatic methods, such as show(), hide(), startRecording(), and many others.
* **Event hooks** — For deeper integration, listen for specific lifecycle events with hooks, such as after a screenshot is captured (screenshot), a bug is submitted (bugSubmit), or a recording starts (recordingStop), and many others.
* **Session Rewind** (coming soon) – Automatically records the last 2 minutes of a session to capture all user interactions. It's perfect for auto-capturing issues that just happened and helps trace actions that lead to the bug.
* **Floating widget customization** – Control the widget's look and placement.

### Floating widget customization options

The floating widget can be customized in various ways:

* **Positioning** — Define widget position using { top, left, right, bottom }.
* **UI Customization** — Modify button styles, background, and primary colors.


# Installation

Check out the steps to install the BetterBugs Web SDK widget for your web apps.

{% hint style="info" %}
**PREREQUISITES**

Here’s what you need to set up the SDK widget:

1. API key from the BetterBugs project.
2. JavaScript application basic setup
3. BetterBugs Web SDK installation (using CDN script OR npm/yarn OR JavaScript frameworks).
   {% endhint %}

### How to Generate an API key for Integrating the BetterBugs Web SDK Widget to Your Web App?

<details>

<summary>What do you need the API key for?</summary>

The API key authenticates the SDK with your web app. Note that the API key is specific to a BetterBugs project.&#x20;

So, When a user sends a bug report using the SDK widget, the API/secret key would make sure the report goes to the right project (the one you set up in BetterBugs).&#x20;

</details>

{% hint style="warning" icon="lightbulb" %}
**IMPORTANT NOTE**

* The generated key would belong to a specific project in your BetterBugs Workspace (**and not your whole workspace**). So, after installation, all the bug reports created through the the feedback widget saves automatically to the same project.&#x20;
* If you've multiple web apps that you need the SDK widgets on, you'd have to set them up separately for each web app (using a new API key + a BetterBugs Project).
  {% endhint %}

Here’s how to generate an API key for your BetterBugs project:

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FnCshDfhXbDp92v4Qu9lz%2F01-Generate-API-KEY-for-Installing-Web-SDK.mp4?alt=media&token=ea8fa842-7c0e-40e3-824d-d1adffd40e24>" %}
How to Generate API Key for Integrating Web SDK Widget to Your Web App | Video Demo&#x20;
{% endembed %}

{% stepper %}
{% step %}

#### Open Workspace Settings

Log in to BetterBugs and click on Workspace name at the top left side. Now, click the **gear icon** to open "**Workspace Settings".**
{% endstep %}

{% step %}

#### Open the Web SDK tab

Next, click the “**Web SDK**” tab under "**Workspace Settings**".
{% endstep %}

{% step %}

#### Generate API key and Select a Project

Click "**Generate Key**" and select a BetterBugs Project to generate the API key for.
{% endstep %}

{% step %}

#### Continue and Confirm Action

Hit "**Continue**" and confirm the action.
{% endstep %}
{% endstepper %}

{% hint style="warning" %}
Before moving on to the installation part, make sure to copy the API key that you just created. Please keep it handy as you’ll need it to initialize the SDK widget in your JavaScript application.
{% endhint %}

Okay! You’re all set with your secret key.

### What are the Methods to Install the SDK Widget for Your Web Apps?

After getting your API key, you can install the SDK in your JavaScript apps using:

* **Method 1** — [Install the widget with CDN Script](/developer-guide-old/betterbugs-web-sdk/installation/start-widget-with-cdn-script)
* **Method 2** — [Install the widget with npm or yarn](/developer-guide-old/betterbugs-web-sdk/installation/start-widget-with-npm-or-yarn)

### Installing the Web SDK Widget for Popular JavaScript Frameworks/UI Libraries:  Practical Examples with Code&#x20;

You can also install the SDK widget for different JavaScript apps, libraries, and frameworks. We’ve included examples for the following setups:

* [React app](/developer-guide-old/betterbugs-web-sdk/installation/react-app-example)&#x20;
* [Vue app](/developer-guide-old/betterbugs-web-sdk/installation/vue-app-example)&#x20;
* [Svelte app](/developer-guide-old/betterbugs-web-sdk/installation/svelte-app-example)&#x20;
* [Electron app](/developer-guide-old/betterbugs-web-sdk/installation/electron-app-example)


# Start widget with CDN Script

Quick installation guide to start the BetterBugs Web SDK widget with a CDN script.

{% hint style="info" icon="lightbulb" %}
**PREREQUISITES**

Here’s what you need to set up the SDK widget:

* Basic web app setup (HTML/CSS + JavaScript)
* API key from the BetterBugs project to manage submitted bug reports.
  {% endhint %}

### How to install the BetterBugs Web SDK widget using a CDN Script&#x20;

Here are the steps for it:

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FibqORPi21vdwgJvaYylX%2F02-Web-SDK-CDN-Setup.mp4?alt=media&token=336c376c-9314-4b46-ac6b-1c2527066ab5>" %}
How to Install the BetterBugs Web SDK Widget using a CDN Script | Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Generate API key

Log in to your BetterBugs.io dashboard and generate an API key from Workspace Settings. You’ll need it to initialize the SDK in the following steps.

[Steps for generating API key](/developer-guide-old/betterbugs-web-sdk/installation)
{% endstep %}

{% step %}

#### Add CDN script to the HTML head tag in your app

Open your application’s HTML index file. In the head tag, add the following CDN script:

```html
<html>
  <head>
    <!-- Put this in the HTML head tag -->
    <script src="https://cdn.betterbugs.io/scripts/latest/index.js"></script>
  </head>
</html>

```

{% endstep %}

{% step %}

#### Initialize the SDK (with default UI)

In your JavaScript script file, add the following code snippet to initialize the SDK widget. **Make sure to add your project API key in the function**:

```javascript
const startBB = function () {
  if (window.Betterbugs) {
    new window.Betterbugs({
      // Replace with your BetterBugs Project API key
      apiKey: "YOUR-API-KEY-GOES-HERE",
    });
  }
};

startBB();
```

{% endstep %}

{% step %}

#### Customize the SDK widget UI (Optional)

You can customize the SDK with your brand colors and design from the initialization function:

```javascript
const startBB = function () {
  if (window.Betterbugs) {
    new window.Betterbugs({
      // Replace with your BetterBugs Project API key
      apiKey: "YOUR-API-KEY-GOES-HERE",
      position: { top: "20px", right: "20px" },
      styles: {
        primaryColor: "#e41c38",
        primaryTextColor: "#fff",
        theme: "light",
      },
    });
  }
};
startBB();
```

{% endstep %}

{% step %}

#### Test the setup

Now, try running the application on your local server. The Web SDK widget should be available at the bottom right side of your app screen (with the default styles).
{% endstep %}
{% endstepper %}

### Example Code in the Video Demo (Along with Customization)

Here’s the complete code to start the Web SDK widget in just one HTML file:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- CDN Loading Script: Put this in the HTML head tag -->
    <script src="https://cdn.betterbugs.io/scripts/latest/index.js"></script>

    <!-- Initialize the SDK -->
    <script>
      const startBB = function () {
        if (window.Betterbugs) {
          new window.Betterbugs({
            // Replace with your BetterBugs Project API key
            apiKey: "YOUR-API-KEY-GOES-HERE",
            position: { top: "20px", right: "20px" },
            styles: {
              primaryColor: "#e41c38",
              primaryTextColor: "#fff",
              theme: "light",
            },
          });
        }
      };
      startBB();
    </script>

    <title>BetterBugs Web SDK Widget | JavaScript + CDN</title>
  </head>
  <body>
    <h2>BetterBugs Web SDK Widget | JavaScript + CDN</h2>
    <p>The button 👇🏻 will throw a random error in console</p>
    <button class="btn">Click here</button>
    <p>BetterBugs catches the error</p>

    <script>
      document.querySelector(".btn").addEventListener("click", function () {
        throw new Error(`Random Error: ${Math.trunc(Math.random() * 10) + 1}`);
      });
    </script>
  </body>
</html>

```


# Start widget with npm or yarn

Quick installation guide to start the BetterBugs Web SDK widget with npm or yarn.

{% hint style="info" %}
**PREREQUISITES**

Here’s what you need to set up the SDK widget:

* Basic web app setup (HTML/CSS + JavaScript)
* API key from the BetterBugs project to manage submitted bug reports.
  {% endhint %}

### How to install the BetterBugs Web SDK widget using npm/yarn&#x20;

Here are the steps for it:

{% stepper %}
{% step %}

#### Generate API key

Log in to your BetterBugs dashboard and generate an API key from Workspace Settings. You’ll need it to initialize the SDK in the following steps.

[Steps for generating API key](/developer-guide-old/betterbugs-web-sdk/installation)
{% endstep %}

{% step %}

#### Install BetterBugs Web SDK using npm/yarn

In your terminal, run the following command to install the SDK files in your application using npm or yarn:

{% tabs %}
{% tab title="npm" %}
`npm install @betterbugs/web-sdk`
{% endtab %}

{% tab title="yarn" %}
`yarn add @betterbugs/web-sdk`
{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}

#### Initialize the SDK (with default UI)

In your script file, import the SDK, create a BetterBugs instance from the import class, and initialize. **Don’t forget to add your project API key in the function**:

```javascript
import { Betterbugs } from "@betterbugs/web-sdk";

const startBB = new Betterbugs({
  // Replace with your BetterBugs project API key
  apiKey: "YOUR-API-KEY-GOES-HERE",
});

startBB();
```

{% endstep %}

{% step %}

#### Customize the SDK widget UI (Optional)

You can customize the SDK with your brand colors and design from the initialization function:

```javascript
import { Betterbugs } from "@betterbugs/web-sdk";

const startBB = new Betterbugs({
  // Replace with your BetterBugs project API key
  apiKey: "YOUR-API-KEY-GOES-HERE",
  position: { top: "20px", right: "20px" },
  styles: {
    primaryColor: "#e41c38",
    primaryTextColor: "#fff",
    theme: "light",
  },
});

startBB();
```

{% endstep %}

{% step %}

#### Test the setup

Now, try running the application on your local server. The Web SDK widget should be available at the bottom right side of your app screen (with the default UI).
{% endstep %}
{% endstepper %}


# React app example

Quick installation guide to setup the BetterBugs Web SDK widget for your React applications.

### How to install BetterBugs Web SDK in React apps

{% hint style="success" %}
Check out the [**GitHub repo** for the React example app](https://github.com/betterbugs/web-sdk/tree/main/examples/01-React-app-example) covered here.
{% endhint %}

Here are the steps for it:

{% stepper %}
{% step %}

#### Generate API key

Log in to your BetterBugs dashboard and generate an API key from Workspace Settings. You’ll need it to initialize the SDK in the following steps.

[Steps for generating API key](/developer-guide-old/betterbugs-web-sdk/installation)
{% endstep %}

{% step %}

#### Install BetterBugs Web SDK using npm/yarn

In your React project’s root terminal, run the following command to install the SDK files in your application using npm or yarn. **We’ve used npm for this demo setup**.

{% tabs %}
{% tab title="npm" %}
`npm install @betterbugs/web-sdk`
{% endtab %}

{% tab title="yarn" %}
`yarn add @betterbugs/web-sdk`
{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}

#### Initialize the SDK (with default UI)

Use the following initialization code in your React app’s component. **Don’t forget to add your BetterBugs project API key to the code**.

```jsx
import { useEffect, useRef } from "react";

function App() {
  // Initialization Code
  const bbInstanceRef = useRef(null);
  useEffect(() => {
    let isMounted = true;
    const initBetterbugs = async () => {
      if (typeof window !== "undefined") {
        const { default: Betterbugs } = await import("@betterbugs/web-sdk");
        const instance = new Betterbugs({
          // Replace with your BetterBugs Project API Key
          apiKey: "YOUR-API-KEY-GOES-HERE",
        });
        if (isMounted) {
          bbInstanceRef.current = instance;
        }
      }
    };

    initBetterbugs();
    return () => {
      isMounted = false;
      bbInstanceRef.current?.destroy?.();
    };
  }, []);

  // Example Component
  return (
    <>
      <h1>BetterBugs Web SDK Widget | React</h1>
    </>
  );
}

export default App;
```

{% endstep %}

{% step %}

#### Customize the SDK widget UI (Optional)

You can customize the SDK with your brand colors and design from the initialization function:

```jsx
import { useEffect, useRef } from "react";

function App() {
  // Initialization Code
  const bbInstanceRef = useRef(null);

  useEffect(() => {
    let isMounted = true;
    const initBetterbugs = async () => {
      if (typeof window !== "undefined") {
        const { default: Betterbugs } = await import("@betterbugs/web-sdk");
        const instance = new Betterbugs({
          // Replace with your BetterBugs Project API Key
          apiKey: "YOUR-API-GOES-HERE",

          // UI Customization Examples
          position: { top: "20px", right: "20px" },
          styles: {
            primaryColor: "#e41c38",
            primaryTextColor: "#fff",
            theme: "light",
          },
        });
        if (isMounted) {
          bbInstanceRef.current = instance;
        }
      }
    };

    initBetterbugs();
    return () => {
      isMounted = false;
      bbInstanceRef.current?.destroy?.();
    };
  }, []);

  // Example Component
  return (
    <>
      <h1>BetterBugs Web SDK Widget | React</h1>
    </>
  );
}

export default App;
```

{% endstep %}

{% step %}

#### Test the setup

To test the setup, run your local dev server (**<http://localhost:5173/>**) with the following command (or with the one that you might be using):

```javascript
npm run dev
```

{% endstep %}
{% endstepper %}

The Web SDK widget should be available at the bottom right side of your app screen (**with the default UI**).

{% hint style="warning" %}
**NOTE**: If the widget is not visible,&#x20;

* Please check if you’ve correctly entered the API key.&#x20;
* Check for the console errors, if any.&#x20;
* If you’re still stuck, try running your dev server in the INCOGNITO mode of your web browser. &#x20;
* Some ad blockers or extensions may also prevent the Widget from running. Please turn them off and try running the application again. It should work fine.
  {% endhint %}

You're good to go.


# Vue app example

Quick installation guide to setup the BetterBugs Web SDK widget for your Vue applications.

### How to install BetterBugs Web SDK in Vue apps

{% hint style="success" %}
Check out the [**GitHub repo** for the Vue example app ](https://github.com/betterbugs/web-sdk/tree/main/examples/02-Vue-app-example)covered here.
{% endhint %}

Here are the steps for it:

{% stepper %}
{% step %}

#### Generate API key

Log in to your BetterBugs dashboard and generate an API key from Workspace Settings. You’ll need it to initialize the SDK in the following steps.

[Steps for generating API key](/developer-guide-old/betterbugs-web-sdk/installation)
{% endstep %}

{% step %}

#### Install BetterBugs Web SDK using npm/yarn

In your Vue project’s root terminal, run the following command to install the SDK files in your application using npm or yarn. **We’ve used npm for this demo setup**.

{% tabs %}
{% tab title="npm" %}
`npm install @betterbugs/web-sdk`
{% endtab %}

{% tab title="yarn" %}
`yarn add @betterbugs/web-sdk`
{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}

#### Initialize the SDK (with default UI)

Use the following initialization code in your Vue app’s component. **Add your BetterBugs project API key to the code**.

```javascript
<!-- Vue Template -->
<template>
  <h1>BetterBugs Web SDK Widget | Vue</h1>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref } from "vue";

const bbInstanceRef = ref(null);

onMounted(async () => {
  if (typeof window !== "undefined") {
    const { default: Betterbugs } = await import("@betterbugs/web-sdk");
    const instance = new Betterbugs({
      // Replace with your BetterBugs Project API Key
      apiKey: "YOUR-API-KEY-GOES-HERE",
    });
    bbInstanceRef.value = instance;
  }
});

onBeforeUnmount(() => {
  bbInstanceRef.value?.destroy?.();
});
</script>
```

{% endstep %}

{% step %}

#### Customize the SDK widget UI (Optional)

You can customize the SDK with your brand colors and design from the initialization function:

```javascript
<!-- Vue Template -->
<template>
  <h1>BetterBugs Web SDK Widget | Vue</h1>
</template>

<script setup>
// BetterBugs SDK Initialization Code
import { onMounted, onBeforeUnmount, ref } from "vue";

const bbInstanceRef = ref(null);

onMounted(async () => {
  if (typeof window !== "undefined") {
    const { default: Betterbugs } = await import("@betterbugs/web-sdk");
    const instance = new Betterbugs({
      // Replace with your BetterBugs Project API Key
      apiKey: "YOUR-API-KEY-GOES-HERE",

      // UI Customization Examples
      position: {
        top: "30px",
        right: "20px",
      },
      styles: {
        primaryColor: "#e41c38",
        primaryTextColor: "#fff",
        theme: "light",
      },
    });
    bbInstanceRef.value = instance;
  }
});

onBeforeUnmount(() => {
  bbInstanceRef.value?.destroy?.();
});
</script>
```

{% endstep %}

{% step %}

#### Test the setup

To test the setup, run your local dev server (**<http://localhost:5173/>**) with the following command (or with the one that you might be using):

```javascript
npm run dev
```

{% endstep %}
{% endstepper %}

The Web SDK widget should be available at the bottom right side of your app screen (**with the default UI**).

{% hint style="warning" %}
**NOTE**: If the widget is not visible,&#x20;

* Please check if you’ve correctly entered the API key.&#x20;
* Check for the console errors, if any.&#x20;
* If you’re still stuck, try running your dev server in the INCOGNITO mode of your web browser. &#x20;
* Some ad blockers or extensions may also prevent the Widget from running. Please turn them off and try running the application again. It should work fine.
  {% endhint %}

You're good to go.


# Svelte app example

Quick installation guide to setup the BetterBugs Web SDK widget for your Svelte applications.

### How to install BetterBugs Web SDK in Svelte apps

{% hint style="success" %}
Check out the [**GitHub repo** for the Svelte example app](https://github.com/betterbugs/web-sdk/tree/main/examples/03-Svelte-app-example) covered here.
{% endhint %}

Here are the steps for it:

{% stepper %}
{% step %}

#### Generate API key

Log in to your BetterBugs dashboard and generate an API key from Workspace Settings. You’ll need it to initialize the SDK in the following steps.

[Steps for generating API key](/developer-guide-old/betterbugs-web-sdk/installation)
{% endstep %}

{% step %}

#### Install BetterBugs Web SDK using npm/yarn

In your Svelte project’s root terminal, run the following command to install the SDK files in your application using npm or yarn.. **We’ve used npm for this demo setup**.

{% tabs %}
{% tab title="npm" %}
`npm install @betterbugs/web-sdk`
{% endtab %}

{% tab title="yarn" %}
`yarn add @betterbugs/web-sdk`
{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}

#### Initialize the SDK (with default UI)

Use the following initialization code in your Svelte app’s component. **Add your BetterBugs project API key to the code**.

```javascript
<script>
  // BetterBugs SDK Initialization Code
  import { onMount, onDestroy } from 'svelte';
  let bbInstance = null;

  onMount(async () => {
    if (typeof window !== 'undefined') {
      const { default: Betterbugs } = await import('@betterbugs/web-sdk');
      bbInstance = new Betterbugs({
        // Replace with your BetterBugs Project API Key
        apiKey: 'YOUR-API-KEY-GOES-HERE', 
      });
    }
  });

  onDestroy(() => {
    bbInstance?.destroy?.();
  });
</script>

<h1>BetterBugs Web SDK Widget | Svelte</h1>
```

{% endstep %}

{% step %}

#### Customize the SDK widget UI (Optional)

You can customize the SDK with your brand colors and design from the initialization function:

```javascript
<script>
  // BetterBugs SDK Initialization Code
  import { onMount, onDestroy } from 'svelte';
  let bbInstance = null;

  onMount(async () => {
    if (typeof window !== 'undefined') {
      const { default: Betterbugs } = await import('@betterbugs/web-sdk');
      bbInstance = new Betterbugs({
        // Replace with your BetterBugs Project API Key
        apiKey: 'YOUR-API-KEY-GOES-HERE', 

        // UI Customization Examples
      position: {
        top: "30px",
        right: "20px",
      },
      styles: {
        primaryColor: "#e41c38",
        primaryTextColor: "#fff",
        theme: "light",
      },
      });
    }
  });

  onDestroy(() => {
    bbInstance?.destroy?.();
  });
</script>

<h1>BetterBugs Web SDK Widget | Svelte</h1>
```

{% endstep %}

{% step %}

#### Test the setup

To test the setup, run your local dev server (**<http://localhost:5173/>**) with the following command (or with the one that you might be using):

```javascript
npm run dev
```

{% endstep %}
{% endstepper %}

The Web SDK widget should be available at the bottom right side of your app screen (**with the default UI**).

{% hint style="warning" %}
**NOTE**: If the widget is not visible,&#x20;

* Please check if you’ve correctly entered the API key.&#x20;
* Check for the console errors, if any.&#x20;
* If you’re still stuck, try running your dev server in the INCOGNITO mode of your web browser. &#x20;
* Some ad blockers or extensions may also prevent the Widget from running. Please turn them off and try running the application again. It should work fine.
  {% endhint %}

You're good to go.


# Electron app example

Quick installation guide to setup the BetterBugs Web SDK widget for your Electron applications.

### How to install BetterBugs Web SDK in Electron apps

{% hint style="success" %}
Check out the [**GitHub repo** for the **Electron** example app](https://github.com/betterbugs/web-sdk/tree/main/examples/04-Electron-app-example) covered here.
{% endhint %}

Here are the steps for it:

{% stepper %}
{% step %}

#### Generate API key

Log in to your BetterBugs dashboard and generate an API key from Workspace Settings. You’ll need it to initialize the SDK in the following steps.

[Steps for generating API key](/developer-guide-old/betterbugs-web-sdk/installation)
{% endstep %}

{% step %}

#### Install BetterBugs Web SDK: Add CDN script to the HTML head tag in your app

Add the following CDN script in the Electron app’s HTML head:

```html
<html>
  <head>
    <!-- Put this in the HTML head tag -->
    <script src="https://cdn.betterbugs.io/scripts/latest/index.js"></script>
  </head>
</html>

```

**We’ve used the CDN script here for the demo setup**. You can also install the SDK files in your application using npm or yarn and modify the JavaScript syntax accordingly.

{% tabs %}
{% tab title="npm" %}
`npm install @betterbugs/web-sdk`
{% endtab %}

{% tab title="yarn" %}
`yarn add @betterbugs/web-sdk`
{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}

#### Configure Electron app for BetterBugs SDK: Add the following code to TypeScript src/main.ts file

Add the following code inside `app.whenReady()` in your `main.ts` file, **before creating the application window**, to configure a custom screen capture handler using `session.defaultSession.setDisplayMediaRequestHandler`

You can replace the entire file code with the below code in the TypeScript file located at **src/main.ts**.

```javascript
import { app, BrowserWindow, session, desktopCapturer } from "electron";

// Wait for the app to be ready before creating the window
app.whenReady().then(() => {
  // Configure session before creating window
  session.defaultSession.setDisplayMediaRequestHandler(
    (request, callback) => {
      desktopCapturer.getSources({ types: ["screen"] }).then((sources) => {
        callback({ video: sources[0], audio: "loopback" });
      });
    },
    { useSystemPicker: false }
  );
  createWindow();
});

function createWindow() {
  const mainWindow = new BrowserWindow();

  // Load the index.html file
  mainWindow.loadFile("index.html");
  mainWindow.setFullScreen(true);
}
```

{% endstep %}

{% step %}

#### Initialize the SDK (with default UI)

Next, add the following JavaScript code snippet to your HTML file to initialize the SDK widget. **Make sure to add your project API key in the function**:

```html
<!-- BetterBugs SDK initialization -->
<script>
      document.addEventListener("DOMContentLoaded", () => {
        window.bb = new Betterbugs({
         // Replace with your BetterBugs Project API Key
          apiKey: "YOUR-API-KEY-GOES-HERE",
        });
      });
</script>
```

{% endstep %}

{% step %}

#### Customize the SDK widget UI (Optional)

You can customize the SDK with your brand colors and design from the initialization function:

```html
<!-- BetterBugs SDK initialization -->
<script>
      document.addEventListener("DOMContentLoaded", () => {
        window.bb = new Betterbugs({
          // Replace with your BetterBugs Project API Key
          apiKey: "YOUR-API-KEY-GOES-HERE",

          // UI Customization Examples
          position: { top: "20px", right: "20px" },
          styles: {
            primaryColor: "#e41c38",
            primaryTextColor: "#fff",
            theme: "light",
          },
        });
      });
</script>

```

{% endstep %}

{% step %}

#### Test the setup

To test the setup, run the desktop app locally with the following command (or with the one that you might be using):

```javascript
npm run dev
```

{% endstep %}
{% endstepper %}

The Web SDK widget should be available at the bottom right side of your app screen (**with the default UI**).

{% hint style="warning" %}
**NOTE**: If the widget is not visible,&#x20;

* Please check if you’ve correctly entered the API key.&#x20;
* Check for the console errors, if any.&#x20;
* If you’re still stuck, try running your dev server in the INCOGNITO mode of your web browser. &#x20;
* Some ad blockers or extensions may also prevent the Widget from running. Please turn them off and try running the application again. It should work fine.
  {% endhint %}

You're good to go.


# Troubleshooting issues

In case you’re stuck or face any issues with the SDK installation, please refer here.

### 1 - I’m unable to load the BetterBugs SDK Widget

If you are using the CDN, make sure to place the script tag within your HTML head tag. For npm/yarn installations, please ensure that the package is installed without errors and the import statement is correct. Finally, ensure the accuracy of your API key (apiKey) in the newly created instance.

If you're still stuck, open the devtools console of your browser and check for any errors or exceptions. For instance, if there's an error with the record type parameter in the SDK, you should see an error message: \[@betterbugs/web-sdk] Invalid record type. Please check your record type. Also, refer to the docs for the correct methods/options to resolve such issues.

### 2. The customization options for the Web SDK are not applied correctly

If you are facing issues with the customization options, please double-check the initialization code. Please refer to the official documentation for all customization options and how to use them correctly. If you're still facing errors, drop us a message at <support@betterbugs.io> and we'll get back to you at the earliest.


# Using Web SDK

Check out the steps for using the Web SDK widget in your apps.

Once you’re good with the installation part, you can start using the widget in your app to get bug reports or feedback from the end users.&#x20;

{% hint style="warning" icon="lightbulb" %}
Before you start using it, note that the widget comes with two modes:

* **Development mode**
* **Production mode**
  {% endhint %}

### What is the difference between the production and development modes in the Web SDK widget?

#### **1 - Development mode (set as default) — For internal teams (QA, Devs, Managers, Stakeholders)**

The development mode allows you to configure your SDK for bug reporting purposes for internal team usage. It’s perfect for sharing bug reports among the QA, developers, project managers, or stakeholders in the development or testing phases.&#x20;

You can easily configure the SDK to run in the “**development**” mode from the initialization snippet by setting the “**mode**” property to “**development**”.

{% hint style="success" %}
**NOTE**: This is an optional setting. Even if you skip adding this to your initialization code, it will run in the “**development**” mode by default. However, adding this makes your code easier to read and understand for your co-developers.
{% endhint %}

Here’s what the initialization code snippet looks like:

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FnsYrXIixDCRBLvrVuzxL%2F03-Setting-Development-Mode-in-Web-SDK.mp4?alt=media&token=cd6b6bb5-90a3-4c58-89bf-686ab3368ea3>" %}
Setting up **mode: "development"** in the BetterBugs Web SDK Widget | Video Demo
{% endembed %}

```javascript
const startBB = function () {
  if (window.Betterbugs) {
    new window.Betterbugs({
      apiKey: "YOUR-API-KEY-GOES-HERE", // Replace with your BetterBugs Project API key
      mode: "development", // Adding this key: value is optional
    });
  }
};
startBB();
```

<a href="/pages/rcFbqd2ZdRQJ6h2pft7P" class="button primary">Using the Web SDK Widget in Development Mode | Quick Guide</a>

#### 2 - Production mode — For end users and customers

The production mode works perfectly for a live app. Use this mode to collect feedback or bug reports in the production environment.&#x20;

You can set the SDK to run in the “**production**” mode from the initialization snippet by setting the “**mode**” property to “**production**”.

{% hint style="warning" %}
NOTE: You need to explicitly set this mode to run the widget in the “**production**” environment.
{% endhint %}

Here’s what the initialization code snippet looks like:

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FVRd2ng3P1n0nbsviGZXy%2F04-Setting-Production-Mode-in-Web-SDK.mp4?alt=media&token=f50fbb69-5508-4b91-aea9-99d62f7e0c9c>" %}
Setting up **mode: "production"** in the BetterBugs Web SDK Widget | Video Demo
{% endembed %}

```javascript
const startBB = function () {
  if (window.Betterbugs) {
    new window.Betterbugs({
      apiKey: "YOUR-API-KEY-GOES-HERE", // Replace with your BetterBugs Project API key
      mode: "production", 
    });
  }
};
startBB();
```

<a href="/pages/wyqBTiHzfAXlTUfOGt70" class="button primary">Using the Web SDK Widget in Production Mode | Quick Guide</a>


# Development mode

Check the complete flow for using the SDK widget in “development” mode.

### What are the Use Cases of Using the Development Mode in BetterBugs.io Web SDK Widget

* Allows you to use the widget in the development/ testing/staging environments.
* Use the widget during development, alpha testing, beta testing, bug bashes, and for QA overall.&#x20;
* Perfect for collecting feedback and bug reports for the app from within your internal team.

{% hint style="info" icon="lightbulb" %}
**PREREQUISITE**

* Make sure that the SDK is installed correctly and the widget is visible in your app screen.&#x20;
* The "**mode**" property in initialization code is [set to "**development**"](/developer-guide-old/using-web-sdk).
  {% endhint %}

### How to Report a Bug using BetterBugs.io Web SDK Widget in Development Mode: Step-by-Step

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2Fq1tfwCWHzJnrFn0GwE6F%2F05-Web-SDK-Bug_Reporting-Flow-in-Development%20Mode.mp4?alt=media&token=87633790-8cea-481c-8bf1-fcc6c2a7bc58>" %}
How to Report a Bug using BetterBugs.io Web SDK Widget in Development Mode | Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open the widget and select screen capturing mode

When you encounter an issue/bug/error on the web app, click the “**Report Bug**” widget and select the screen capture mode:&#x20;

* **Screenshot**
* **Screen record** (record screen up to 10 mins by default, can be configured for up to 15 mins)

For instance, click the “**Screenshot**” option
{% endstep %}

{% step %}

#### Grant permission to capture the screen instantly

Next, click “**Allow**” to grant permissions to instantly capture your screen.
{% endstep %}

{% step %}

#### Annotate the screenshot

You can add annotations to the screenshot to highlight the issue from the annotations toolbar. Then, hit the ✔️ button.
{% endstep %}

{% step %}

#### Add details

Next, add the details for the issue:

* **Title**  – Bug/Feedback title.
* **Description** — Quick summary, issue repro steps, and additional context.&#x20;
* **Add assignee** — Select an assignee from the Workspace members.
* **Add reporter\*** — Add a reporter name from the Workspace members. It's a required field.
  {% endstep %}

{% step %}

#### Submit

Finally, hit the “**Submit**” button to create and send the bug report
{% endstep %}
{% endstepper %}

You’re good to do.&#x20;

After you submit the report gets added to the BetterBugs.io account.&#x20;

You can access the complete report in the BetterBugs.io dashboard. It should be available in the BetterBugs.io project that’s integrated with the SDK widget.


# Production mode

Check the complete flow for using the SDK widget in “production” mode..

### What are the Use Cases of Using the Production Mode in BetterBugs.io Web SDK Widget

* Allows you to use the widget in a live environment.
* Perfect for collecting feedback from your app’s end users and customers.

{% hint style="info" icon="lightbulb" %}
**PREREQUISITE**

* Make sure that the SDK is installed correctly and the widget is visible in your app screen.&#x20;
* The "**mode**" property in initialization code is [set to "**production**"](/developer-guide-old/using-web-sdk).
  {% endhint %}

### How to Report a Bug using BetterBugs.io Web SDK Widget in Production Mode: Step-by-Step

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FBzBhuIUDDav7ztnadaoO%2Fuploads%2FXt8MRovIp0JoE1ZEi4W2%2F06-Web-SDK-Bug_Reporting-Flow-in-Production-Mode.mp4?alt=media&token=19de01c0-9ccb-46d3-ba56-077b1b0f3643>" %}
How to Report a Bug using BetterBugs.io Web SDK Widget in Production Mode | Video Demo
{% endembed %}

{% stepper %}
{% step %}

#### Open the widget and select screen capturing mode

When you encounter an issue/bug/error on the web app, click the “**Report Bug**” widget and select the screen capture mode:&#x20;

* **Screenshot**
* **Screen record** (record screen up to 10 mins by default, can be configured for up to 15 mins)

For instance, click the “**Screenshot**” option
{% endstep %}

{% step %}

#### Grant permission to capture the screen instantly

Next, click “**Allow**” to grant permissions to instantly capture your screen.
{% endstep %}

{% step %}

#### Annotate the screenshot

You can add annotations to the screenshot to highlight the issue from the annotations toolbar. Then, hit the ✔️ button.
{% endstep %}

{% step %}

#### Add details

Next, add the details for the issue:

* **Email\* (Required)** — Your email ID as a bug reporter.
* **Title**  – Bug/Feedback title.
* **Description** — Quick summary, issue repro steps, and additional context.
  {% endstep %}

{% step %}

#### Submit

Finally, hit the “**Submit**” button to create and send the bug report
{% endstep %}
{% endstepper %}

You’re good to do.&#x20;

After you submit the report gets added to the BetterBugs.io account.&#x20;

You can access the complete report in the BetterBugs.io dashboard. It should be available in the BetterBugs.io project that’s integrated with the SDK widget.


# Configuration options

Configure the Web SDK with customization options for UI and also tweak settings to control its behavior programmatically.

### Apply visual changes for the SDK widget + tweak settings to control SDK behavior

{% hint style="info" %}
You can directly add these to the SDK initialization code.
{% endhint %}

### Styling options for visual changes

Here are the styling options available for the SDK widget.

<table><thead><tr><th width="266.77777099609375">Option</th><th>Type</th><th>Description</th></tr></thead><tbody><tr><td><strong>position</strong></td><td>{ top? : string, left? : string, right? : string, bottom? : string }</td><td>Control the widget's position on screen</td></tr><tr><td><strong>styles</strong></td><td>{ theme?: 'light' | 'dark'; primaryColor?: string; primaryTextColor?: string; }</td><td>Set the styles of the widget</td></tr><tr><td><strong>actionButtonComponent</strong></td><td>React.ReactNode | string</td><td>Component for the action button (React component or HTML string accepted)</td></tr><tr><td><strong>successMessageHeaderText</strong></td><td>string</td><td>Main heading text when the feedback is successfully submitted</td></tr><tr><td><strong>successMessageSubHeaderText</strong></td><td>string</td><td>Sub-heading text when the feedback is successfully submitted</td></tr></tbody></table>

### Other settings for the SDK widget to tweak its behavior

Here are the settings available for the SDK widget to control its behavior programmatically:

| Option                          | Type                           | Description                                                                                                                                                                                                                                                                                                                                       |
| ------------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **apiKey**                      | string                         | <p>Project specific API secret. <strong>(Required\*)</strong></p><p>Allows you to connect the widget to a specific project within BetterBugs</p>                                                                                                                                                                                                  |
| **metaData**                    | Object literal as {key: value} | Custom metadata to attach to reports (e.g., { username: "obi wan", plan: "individual", userID: 1234, })                                                                                                                                                                                                                                           |
| **recordType**                  | "recordVideo" \| "domRecord"   | <p>The "recordVideo" type (recommended for SPAs) is the traditional media recording method for video and audio. It’s set by default.<br>The "domRecord" type (recommended for Multi Page Apps) is the DOM recording method and may not be as accurate as the "recordVideo" type.</p>                                                              |
| **disableScreenshot**           | boolean                        | Enable/disable screenshot capturing in the widget (by default, its enabled)                                                                                                                                                                                                                                                                       |
| **disableRecording**            | boolean                        | Enable/disable screen recording in the widget (by default, its enabled)                                                                                                                                                                                                                                                                           |
| **enableAnnotation**            | boolean                        | Enable/disable annotation tools for screenshots (by default, its enabled)                                                                                                                                                                                                                                                                         |
| **showActionButton**            | boolean                        | Display/hide the floating action button (widget button)                                                                                                                                                                                                                                                                                           |
| **mode**                        | "development" \| "production"  | <p>Set development or production mode. </p><p>The "development" mode can be set during development/ testing/staging, alpha testing, beta testing, bug bashes, and for QA overall. It’s set as default.</p><p>The "production" mode is for end-users, meaning the app's customers can report a bug or submit feedback in the live environment.</p> |
| **email**                       | string                         | <p>Set the user's email address who is reporting the bug. </p><p>Works only in "production" mode.</p>                                                                                                                                                                                                                                             |
| **maxRecordingMinutes**         | number                         | <p>Set the maximum screen recording length in minutes. </p><p>By default, it's set to 10 mins. Max mins allowed: 15 mins</p>                                                                                                                                                                                                                      |
| **emailFieldLabel**             | string                         | Set label of email field                                                                                                                                                                                                                                                                                                                          |
| **emailFieldPlaceholder**       | string                         | Set placeholder of email field                                                                                                                                                                                                                                                                                                                    |
| **titleFieldLabel**             | string                         | Set label of title field                                                                                                                                                                                                                                                                                                                          |
| **titleFieldPlaceholder**       | string                         | Set placeholder of title field                                                                                                                                                                                                                                                                                                                    |
| **descriptionFieldLabel**       | string                         | Set label of description field                                                                                                                                                                                                                                                                                                                    |
| **descriptionFieldPlaceholder** | string                         | Set placeholder of description field                                                                                                                                                                                                                                                                                                              |

### Example code snippet

Here’s the code with some examples to apply styling and other options for the SDK widget:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- CDN Loading Script: Put this in the HTML head tag -->
    <script src="https://cdn.betterbugs.io/scripts/latest/index.js"></script>

    <!-- Initialize the SDK -->
    <script>
      const startBB = function () {
        if (window.Betterbugs) {
          new window.Betterbugs({
            // Replace with your BetterBugs Project API key
            apiKey: "YOUR-API-KEY-GOES-HERE",
            mode: "production",
            position: { top: "20px", right: "20px" },
            styles: {
              primaryColor: "#e41c38",
              primaryTextColor: "#fff",
              theme: "light",
            },
            successMessageHeaderText: "Thank you! 🙏🏻",
            successMessageSubHeaderText: "Your feedback is submitted.",
            metaData: { username: "obi wan", plan: "individual", userID: 1234 },
            email: "obi@example.com",
          });
        }
      };
      startBB();
    </script>
    <title>BetterBugs Web SDK Widget | JavaScript + CDN</title>
  </head>
  <body>
    <h2>BetterBugs Web SDK Widget | JavaScript + CDN</h2>
    <p>The button 👇🏻 will throw a random error in console</p>
    <button class="btn">Click here</button>
    <p>BetterBugs catches the error</p>

    <script>
      document.querySelector(".btn").addEventListener("click", function () {
        throw new Error(`Random Error: ${Math.trunc(Math.random() * 10) + 1}`);
      });
    </script>
  </body>
</html>
```


# Methods and Event hooks

Use the Web SDK with several useful methods and listen to lifecycle event hooks for deeper integrations

### Use Methods for the SDK widget  + configure for deeper integrations with Lifecycle Event hooks

#### Available Methods

<table><thead><tr><th width="302.8887939453125">Option</th><th>Description</th></tr></thead><tbody><tr><td><strong>setEmail()</strong></td><td>Update the email of the bug reporter</td></tr><tr><td><strong>setStyles()</strong></td><td>Update the styles of the widget</td></tr><tr><td><strong>getStyles()</strong></td><td>Get the styles of the widget</td></tr><tr><td><strong>show()</strong></td><td>Show the floating widget</td></tr><tr><td><strong>hide()</strong></td><td>Hide the floating widget</td></tr><tr><td><strong>openWidget()</strong></td><td>Open the bug reporting widget</td></tr><tr><td><strong>closeWidget()</strong></td><td>Close the bug reporting widget</td></tr><tr><td><strong>setMetadata()</strong></td><td>Update the attached metadata</td></tr><tr><td><strong>captureScreenshot()</strong></td><td>Trigger screenshot capture</td></tr><tr><td><strong>startRecording()</strong></td><td>Start session recording</td></tr><tr><td><strong>stopRecording()</strong></td><td>Stop the ongoing recording</td></tr><tr><td><strong>on()</strong></td><td>Register an event listener</td></tr><tr><td><strong>off()</strong></td><td>Unregister an event listener</td></tr><tr><td><strong>destroy()</strong></td><td>Destroy the BetterBugs instance</td></tr></tbody></table>

#### Available Lifecycle Event hooks&#x20;

You can also listen to lifecycle events of the SDK widget and use it for deeper integrations in your apps:&#x20;

<table><thead><tr><th width="308.4444580078125">Lifecycle event</th><th>Trigger description</th></tr></thead><tbody><tr><td><strong>emailUpdate</strong></td><td>Triggered when the email is updated</td></tr><tr><td><strong>screenshot</strong></td><td>Triggered after the screenshot is captured</td></tr><tr><td><strong>recordingStart</strong></td><td>Triggered when the recording starts</td></tr><tr><td><strong>recordingStop</strong></td><td>Triggered when the recording stops</td></tr><tr><td><strong>bugSubmit</strong></td><td>Triggered after the bug report/feedback is submitted</td></tr><tr><td><strong>metaDataUpdate</strong></td><td>Triggered when the metadata is updated</td></tr><tr><td><strong>positionUpdate</strong></td><td>Triggered when the widget position changes</td></tr><tr><td><strong>widgetOpen</strong></td><td>Triggered when the widget opens</td></tr><tr><td><strong>widgetClose</strong></td><td>Triggered when the widget closes</td></tr><tr><td><strong>showActionButton</strong></td><td>Triggered when the action button gets displayed</td></tr><tr><td><strong>hideActionButton</strong></td><td>Triggered when the action button hides</td></tr><tr><td><strong>sessionCreated</strong></td><td>Triggered when a new session is created</td></tr></tbody></table>


# BetterBugs Feedback Widget

Integrate a custom bug reporting/feedback widget into your web apps using the BetterBugs Web SDK.

### What is the BetterBugs Feedback Widget?

> BetterBugs feedback widget is **a lightweight bug reporting/feedback widget that you can easily add to your web application**. Its has simple and intuitive interface that allows users to click, create, and submit a bug report or feedback instantly!

### What Your Customers Can Do Using the Feedback Widget?&#x20;

Once you install the feedback widget on your web app, your customers or end-users can click the widget:

* **Do General Enquiry (about the app or request feature)**
* **Give Feedback**
* **Report a Bug**

{% hint style="info" %}
No downloads or setup is required from the end users. End-users do not have to set up an account or anything else to use it.
{% endhint %}

### How it Works

When end users face any difficulty or an issue while using your app or they just want to do a general enquiry, they can click the feedback widget button to take a screenshot or record their screen and instantly send it to you as a complete bug report.&#x20;

**1# INFORMATION THAT YOU CAN GET FROM YOUR CUSTOMERS**

The submitted feedback report comes bundled with:

1. **Email\*** (reporter's email)
2. **Issue Type** (OPTIONAL) (General Enquiry | Give Feedback | Report a Bug)
3. **Title\***
4. **Description**
5. **The visual evidence** (screenshot or screen recording)&#x20;
6. **Attachments** (OPTIONAL) (Up to 3 | To be added by the customer)
7. **Auto-attached technical details** (console logs, network requests, errors, warnings, and others; This get auto-attached whenever the user takes a screenshot or video recording of the issue).

Developers can then use these technically sound, context-rich, and data-filled bug reports/feedback for debugging purposes.&#x20;

{% hint style="info" %}
Simply put, using the feedback widget, your end-users and customers can easily:

* **Report a bug, give feedback or an issue while using your app**
* **Submit feedback effortlessly!**
  {% endhint %}

**2# SENDING RESOLUTION EMAIL TO YOUR CUSTOMERS**

You can also send resolution email to your customers right from your BetterBugs project. This enables you to keep your customers informed once their issue has been resolved.

### What are the Top Use Cases of the BetterBugs Feedback Widget?

You can use the feedback widget to:

* Get instant bug reports/feedback from external users and customers
* Get visual evidence of an issue + auto-attached technical details (console logs, errors, and others)
* Report app issues to other team members.
* Add a bug reporting widget to your app with a custom UI (using customization options)
* Equip apps with quick bug reporting capabilities in bug bash events.
* Run testing activities and QA overall&#x20;
* Share resolution emails to customers/bug reporters.

### What is the Difference between the BetterBugs.io Extension and the BetterBugs Feedback widget?

The BetterBugs extension is a fully fledged web application that provides advanced bug reporting and debugging features.&#x20;

The feedback widget is a part of the BetterBugs extension that works in sync with the BetterBugs application and allows users to submit bug reports with minimal effort, zero setup, and a simple-to-use interface.

### When to Use: Extension vs. Feedback Widget

With the BetterBugs extension, you can:

* Create and share context-rich and technically sound bug reports
* Do bug tracking, reporting, debugging, and testing activities
* Manage project bug reports
* Share reports with your issue trackers and project tools&#x20;
* Do QA, testing, and debugging activities overall
* And many others.

The feedback widget serves as the extension’s sidekick to collect fully-fledged bug reports from customers and internal team members.&#x20;

You can use the feedback widget widget to:

* Get the visual evidence of the issue + error logs from the console
* Get bug reports from end users without any setup
* Serve as a built-in and automated bug reporting software
* Getting quick feedback from users if something goes wrong
* Get the exact steps of user action in case of an issue


# Quick overview

Simplify bug reporting within your web apps with the BetterBugs Web SDK.

### About BetterBugs Feedback Widget

The BetterBugs feedback widget enables you to include bug reporting and instant feedback capabilities in your application with minimal settings and effort.

Now, you can equip your apps with a user-friendly and easy-to-implement widget for issue reporting capabilities, such as media capturing, log tracking, getting the two-minute Rewind session video, and real-time hooks to help you and your team report, diagnose, and fix issues effectively.

### Breaking it Down

Using the BetterBugs feedback widget, you can enhance your web apps with bug reporting features that allow you to capture useful data about the issues.&#x20;

Here's more on it.

### Key Features of the Feedback Widget

* **Seamless integration** — Quick installation and easy to use with a few lines of code.
* **Easily customizable** — Tweak the SDK (feedback widget) behavior with configurable options for properties, such as metaData, recordType, enableAnnotation, and many others.
* **Use Methods** — Control the SDK (feedback widget) with programmatic methods, such as show(), hide(), startRecording(), and many others.
* **Event hooks** — For deeper integration, listen for specific lifecycle events with hooks, such as after a screenshot is captured (screenshot), a bug is submitted (bugSubmit), or a recording starts (recordingStop), and many others.
* **Session Rewind** (coming soon) – Automatically records the last 2 minutes of a session to capture all user interactions. It's perfect for auto-capturing issues that just happened and helps trace actions that lead to the bug.
* **Floating widget customization** – Control the widget's look and placement.

### Floating Widget Customization Options

The floating widget can be customized in various ways:

* **Positioning** — Define widget position using { top, left, right, bottom }.
* **UI Customization** — Modify button styles, background, and primary colors.


# Installation

Check out the steps to install the BetterBugs Feedback widget for your web apps.

{% hint style="info" %}
**PREREQUISITES**

Here’s what you need to set up the feedback widget:

1. Workspace-Wide API Key (`apiKey`)
2. BetterBugs Project ID (`projectId`)
3. JavaScript application basic setup.
4. BetterBugs Web SDK installation (using simple `pkg` script **OR** `npm/yarn` **OR** JavaScript frameworks).
   {% endhint %}

### How to Generate API key and Project ID for Adding the Feedback Widget to Your Web App?

{% hint style="warning" icon="lightbulb" %}
**What do you need the API Key and Project ID for?**

* **Workspace API Key** `apiKey` : Enables you to scope your workspace with the SDK widget rather than individual projects.
* **Project ID** `projectId`: Enables you to route bug reports to the correct project by simply adding a property in the SDK initialization script.
  {% endhint %}

#### How to Generate API key and Project ID for Installing the Feedback Widget?

Here're the steps for generating your:

* **Workspace-Wide API Key**
* **Project ID**

{% stepper %}
{% step %}

#### Open Workspace Settings

Login to BetterBugs and click on Workspace name at the top left side. Now, click the **gear icon** to open "**Workspace Settings".**
{% endstep %}

{% step %}

#### Open the API Keys tab

Next, click the “**API Keys**” tab under "**Workspace Settings**".
{% endstep %}

{% step %}

#### Generate Workspace-Wide API key

Click "**Generate Key**" at the top right to get the workspace API key. Use this key as a value for the `apiKey`  property in the initialization script.
{% endstep %}

{% step %}

#### Get BetterBugs Project ID

From the **Initialise the SDK** section, use the dropdown to get the `projectId` for a specific project within BetterBugs.&#x20;
{% endstep %}
{% endstepper %}

#### Example: Initialization Script

```javascript
import { Betterbugs } from "@betterbugs/web-sdk";

const bb = new Betterbugs({
  apiKey: "YOUR_API_KEY_HERE", // Workspace API key
  projectId: "YOUR_PROJECT_ID_KEY_HERE", // Project to report bugs to
});
```

{% hint style="warning" %}
Before moving on to the installation part, make sure to copy the API key and the Project ID that you just created. Please keep it handy as you’ll need it to initialize the feedback widget in your JavaScript application.
{% endhint %}

Okay! You’re all set.

### What are the Methods to Install the Feedback Widget for Your Web Apps?

After getting your API key and the Project ID, you can install the feedback in your JavaScript apps using:

* **Method 1** — [Install the widget using a simple CDN script in your HTML file](/developer-guide/betterbugs-web-sdk/installation/start-widget-with-cdn-script) (Easiest)
* **Method 2** — [Install the widget with `npm` or `yarn`](/developer-guide/betterbugs-web-sdk/installation/start-widget-with-npm-or-yarn)

### Installing the Feedback Widget for Popular JavaScript Frameworks/UI Libraries:  Practical Examples with Code&#x20;

You can also install the feedback widget for different JavaScript apps, libraries, and frameworks. We’ve included examples for the following setups:

* [React app](/developer-guide/betterbugs-web-sdk/installation/react-app-example)&#x20;
* [Vue app](/developer-guide/betterbugs-web-sdk/installation/vue-app-example)&#x20;
* [Svelte app](/developer-guide/betterbugs-web-sdk/installation/svelte-app-example)&#x20;
* [Electron app](/developer-guide/betterbugs-web-sdk/installation/electron-app-example)


# Start widget with CDN Script

Quick installation guide to start the BetterBugs feedback widget with a CDN script.

{% hint style="info" icon="lightbulb" %}
**PREREQUISITES**

Here’s what you need to set up the feedback widget:

* Basic web app setup (HTML/CSS + JavaScript)
* Workspace-Wide API Key.
* BetterBugs Project API key.
  {% endhint %}

### How to Install the BetterBugs Feedback Widget using a CDN Script&#x20;

Here are the steps for it:

{% stepper %}
{% step %}

#### Generate API key and Project ID

Log in to your BetterBugs.io dashboard and generate API key and project ID from Workspace Settings. You’ll need it them initialize the feedback widget in the following steps.

[**Steps for Generating API Key and Project ID**](/developer-guide/betterbugs-web-sdk/installation)
{% endstep %}

{% step %}

#### Add CDN Script to the HTML Head Tag in Your Web App

Open your application’s HTML index file. In the head tag, add the following script:

```html
<html>
  <head>
    <!-- CDN Script: Put this in the HTML head tag -->
    <script src="https://pkg.betterbugs.io/scripts/latest/index.js"></script>
  </head>
</html>

```

{% endstep %}

{% step %}

#### Initialize the Widget (with default UI)

In your JavaScript script file, add the following code snippet to initialize the feedback widget. **Make sure to add your workspace API key and project ID in the function**:

```javascript
const startBB = function () {
  if (window.Betterbugs) {
    new window.Betterbugs({
      apiKey: "YOUR_API_KEY_HERE", // Workspace API key
      projectId: "YOUR_PROJECT_ID_KEY_HERE", // Project to report bugs to
    });
  }
};

startBB();
```

{% endstep %}

{% step %}

#### Customize the Widget UI (Optional)

You can customize the widget with your brand colors and design from the initialization function:

```javascript
const startBB = function () {
  if (window.Betterbugs) {
    new window.Betterbugs({
      apiKey: "YOUR_API_KEY_HERE", // Workspace API key
      projectId: "YOUR_PROJECT_ID_KEY_HERE", // Project to report bugs to
      
      position: { top: "20px", right: "20px" },
      styles: {
        primaryColor: "#e41c38",
        primaryTextColor: "#fff",
        theme: "light",
      },
    });
  }
};
startBB();
```

{% endstep %}

{% step %}

#### Test the Setup

Now, try running the application on your local server. The feedback widget should be available at the bottom right side of your app screen (with the default styles).
{% endstep %}
{% endstepper %}

### Example Code in the Video Demo (Along with Customization)

Here’s the complete code to start the feedback widget in just one HTML file:

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- CDN Script: Put this in the HTML head tag -->
    <script src="https://pkg.betterbugs.io/scripts/latest/index.js"></script>

    <!-- Initialize the SDK -->
    <script>
      const startBB = function () {
        if (window.Betterbugs) {
          new window.Betterbugs({
            apiKey: "YOUR_API_KEY_HERE", // Workspace API key
            projectId: "YOUR_PROJECT_ID_KEY_HERE", // Project to report bugs to
            
            position: { top: "20px", right: "20px" },
            styles: {
              primaryColor: "#e41c38",
              primaryTextColor: "#fff",
              theme: "light",
            },
          });
        }
      };
      startBB();
    </script>

    <title>BetterBugs Web SDK Widget | JavaScript + CDN Script</title>
  </head>
  <body>
    <h2>BetterBugs Web SDK Widget | JavaScript + CDN Script</h2>
    <p>The button 👇🏻 will throw a random error in console</p>
    <button class="btn">Click here</button>
    <p>BetterBugs catches the error</p>

    <script>
      document.querySelector(".btn").addEventListener("click", function () {
        throw new Error(`Random Error: ${Math.trunc(Math.random() * 10) + 1}`);
      });
    </script>
  </body>
</html>

```


# Start widget with npm or yarn

Quick installation guide to start the BetterBugs feedback widget with npm or yarn.

{% hint style="info" icon="lightbulb" %}
**PREREQUISITES**

Here’s what you need to set up the feedback widget:

* Basic web app setup (HTML/CSS + JavaScript)
* Workspace-Wide API Key.
* BetterBugs Project API key.
  {% endhint %}

### How to Install the BetterBugs Feedback Widget using `npm/yarn` Package Managers?&#x20;

Here are the steps for it:

{% stepper %}
{% step %}

#### Generate API key and Project ID

Log in to your BetterBugs.io dashboard and generate API key and project ID from Workspace Settings. You’ll need it them initialize the feedback widget in the following steps.

[**Steps for Generating API Key and Project ID**](/developer-guide/betterbugs-web-sdk/installation)
{% endstep %}

{% step %}

#### Install BetterBugs Web SDK using `npm/yarn`

In your terminal, run the following command to install the SDK files in your application using `npm` or `yarn`:

{% tabs %}
{% tab title="npm" %}
`npm install @betterbugs/web-sdk@latest`
{% endtab %}

{% tab title="yarn" %}
`yarn add @betterbugs/web-sdk@latest`
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
Make sure to install `npm/yarn` package the latest **BetterBugs Web SDK version (0.0.44)**:
{% endhint %}
{% endstep %}

{% step %}

#### Initialize the Widget (with default UI)

In your script file, import the SDK, create a BetterBugs instance from the import class, and initialize.&#x20;

**Don’t forget to add your Workspace API Key and Project ID in the function**::

```javascript
import { Betterbugs } from "@betterbugs/web-sdk";

const startBB = new Betterbugs({
  apiKey: "YOUR_API_KEY_HERE", // Workspace API key
  projectId: "YOUR_PROJECT_ID_KEY_HERE", // Project to report bugs to
});

startBB();
```

{% endstep %}

{% step %}

#### Customize the Widget UI (Optional)

You can customize the SDK with your brand colors and design from the initialization function:

```javascript
import { Betterbugs } from "@betterbugs/web-sdk";

const startBB = new Betterbugs({
  apiKey: "YOUR_API_KEY_HERE", // Workspace API key
  projectId: "YOUR_PROJECT_ID_KEY_HERE", // Project to report bugs to
  
  position: { top: "20px", right: "20px" },
  styles: {
    primaryColor: "#e41c38",
    primaryTextColor: "#fff",
    theme: "light",
  },
});

startBB();
```

{% endstep %}

{% step %}

#### Test the Setup

Now, try running the application on your local server. The feedback widget should be available at the bottom right side of your app screen (with the default UI).
{% endstep %}
{% endstepper %}


# React app example

Quick installation guide to setup the BetterBugs feedback widget for your React applications.

### How to Install BetterBugs Feedback Widget in React apps

{% hint style="info" icon="lightbulb" %}
**PREREQUISITES**

Here’s what you need to set up the feedback widget:

* React app.
* Workspace-Wide API Key.
* BetterBugs Project API key.
  {% endhint %}

Here are the steps for it:

{% stepper %}
{% step %}

#### Generate API key and Project ID

Log in to your BetterBugs.io dashboard and generate API key and project ID from Workspace Settings. You’ll need it them initialize the feedback widget in the following steps.

[**Steps for Generating API Key and Project ID**](/developer-guide/betterbugs-web-sdk/installation)
{% endstep %}

{% step %}

#### Install BetterBugs Web SDK using npm/yarn

In your React project’s root terminal, run the following command to install the SDK files in your application using npm or yarn. **We’ve used npm for this demo setup**.

{% tabs %}
{% tab title="npm" %}
`npm install @betterbugs/web-sdk@latest`
{% endtab %}

{% tab title="yarn" %}
`yarn add @betterbugs/web-sdk@latest`
{% endtab %}
{% endtabs %}

{% hint style="info" %}
Make sure to install `npm/yarn` package the latest **BetterBugs Web SDK version (0.0.44)**:
{% endhint %}
{% endstep %}

{% step %}

#### Initialize the Widget (with default UI)

Use the following initialization code in your React app’s component. **Don’t forget to add your Workspace API Key and Project ID in the function**:

```jsx
import { useEffect, useRef } from "react";

function App() {
  // Initialization Code
  const bbInstanceRef = useRef(null);
  useEffect(() => {
    let isMounted = true;
    const initBetterbugs = async () => {
      if (typeof window !== "undefined") {
        const { default: Betterbugs } = await import("@betterbugs/web-sdk");
        const instance = new Betterbugs({
          apiKey: "YOUR_API_KEY_HERE", // Workspace API key
          projectId: "YOUR_PROJECT_ID_KEY_HERE", // Project to report bugs to
        });
        if (isMounted) {
          bbInstanceRef.current = instance;
        }
      }
    };

    initBetterbugs();
    return () => {
      isMounted = false;
      bbInstanceRef.current?.destroy?.();
    };
  }, []);

  // Example Component
  return (
    <>
      <h1>BetterBugs Web SDK Widget | React</h1>
    </>
  );
}

export default App;
```

{% endstep %}

{% step %}

#### Customize the Widget UI (Optional)

You can customize the SDK with your brand colors and design from the initialization function:

```jsx
import { useEffect, useRef } from "react";

function App() {
  // Initialization Code
  const bbInstanceRef = useRef(null);

  useEffect(() => {
    let isMounted = true;
    const initBetterbugs = async () => {
      if (typeof window !== "undefined") {
        const { default: Betterbugs } = await import("@betterbugs/web-sdk");
        const instance = new Betterbugs({
          apiKey: "YOUR_API_KEY_HERE", // Workspace API key
          projectId: "YOUR_PROJECT_ID_KEY_HERE", // Project to report bugs to

          // UI Customization Examples
          position: { top: "20px", right: "20px" },
          styles: {
            primaryColor: "#e41c38",
            primaryTextColor: "#fff",
            theme: "light",
          },
        });
        if (isMounted) {
          bbInstanceRef.current = instance;
        }
      }
    };

    initBetterbugs();
    return () => {
      isMounted = false;
      bbInstanceRef.current?.destroy?.();
    };
  }, []);

  // Example Component
  return (
    <>
      <h1>BetterBugs Web SDK Widget | React</h1>
    </>
  );
}

export default App;
```

{% endstep %}

{% step %}

#### Test the Setup

To test the setup, run your local dev server (**<http://localhost:5173/>**) with the following command (or with the one that you might be using):

```javascript
npm run dev
```

{% endstep %}
{% endstepper %}

The feedback widget should be available at the bottom right side of your app screen (**with the default UI**).

{% hint style="warning" %}
**NOTE**: If the widget is not visible,&#x20;

* Please check if you’ve correctly entered the API key and Project ID.&#x20;
* Check for the console errors, if any.&#x20;
* If you’re still stuck, try running your dev server in the INCOGNITO mode of your web browser. &#x20;
* Some ad blockers or extensions may also prevent the Widget from running. Please turn them off and try running the application again. It should work fine.
  {% endhint %}

You're good to go.




---

[Next Page](/llms-full.txt/1)