Overview of the Bug Reporting Widget

This guide helps you set up the Bug Reporting Widget to let your users report bugs in just one click.

If you prefer to build your own widget, or looking to create a custom implementation, check out our Bugpilot SDK for JavaScript documentation (available in all Pricing tiers).

What's the Bug Reporting Widget

You can add a Bug Reporting label to your web app. When users click on it, they will be guided to create a screen recording, leave annotations, and provide a simple description of what happened.

Here's how the Widget looks like:

Once it's clicked, this is the typical flow:

A timer warns the user that a screen recording is about to happen.
Once the recording starts, the user has 2 minutes to show what happened, and can leave notes and highlights on the screens.
At the end of the recording, the user is asked to provide an optional description of what happened and what was expected - this step is optional and the report will be saved regardless of whether this information is provided or not.

That's it! 🎉

Once the report has been submitted, you can find it in the User Reports page of your Bugpilot Workspace.

How to enable the Bug Reporting Widget

Create a Bugpilot account if you haven't already
Make sure you completed the setup by adding the Bugpilot Tracking code.
Navigate to Integrations
Locate Bug reporting widget in the integrations list:
Check the "Enabled" option
[Optional] Click Settings to customize the widget appearance

Note: It can take up to 5 minutes for the Widget to appear on your website.

Advanced Widget styling

You can customize some CSS styles of the bug reporting widget to match your brand color, fonts, and behavior.

Add your own CSS code to the Settings dialog, under Integrations > Widget > Settings. You can preview the CSS settings by clicking on the Preview button, and you will see the widget on the Bugpilot page with your styles applied.

Use the following CSS IDs to apply styles:

#bugpilot-widget-container the element that contains the whole widget
#bugpilot-widget-button the clickable button that starts the bug reporting
#bugpilot-widget-text the paragraph containing the label text

Here's an example customization to position the widget bottom-right, make it squared, with a yellow background. You could also set the Widget Label to an emoji, like 🐞, instead of text.

Example CSS:

#bugpilot-widget-container {
  height: 60px;
  width: 60px;
  bottom: 0;
  top: unset;
}

#bugpilot-widget-button {
  background-color: yellow;
  width: 60px;
}

#bugpilot-widget-text {
  color: black;
  font-size: 2em;
  padding: 12px;
}

Please note that styling the widget by adding CSS styles to your page will not work (because the Widget is rendered in a DOM Shadow Root).

If you need more flexibility and want to implement your custom reporting flow, check out our Bugpilot SDK for JavaScript documentation (available in all Pricing tiers).