This guide helps you set up the Bug Reporting Widget to let your users report bugs in just one click.
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-containerthe element that contains the whole widget
#bugpilot-widget-buttonthe clickable button that starts the bug reporting
#bugpilot-widget-textthe 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.
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).