Everything you need to ship the widget

Quick start

Create a project in the dashboard, copy its key, and paste this before your closing </body> tag. The loader is async, renders inside a Shadow DOM so it can never clash with your CSS, and stays under 150 KB gzipped.

1<script
2  async
3  src="https://app.bugpot.io/embed/loader.js?p=your_project_key">
4</script>

Reload your site → the Feedback button appears bottom-right → send yourself a test report.

Configuration

The widget ships configured from your project settings in the dashboard: position, label, branding, forms and issue types all live there. To override per page, define window.BugpotConfig before the loader tag.

1<script>
2  window.BugpotConfig = {
3    buttonPosition: 'bottom-left',
4    buttonLabel: 'Report a bug',
5    brandColor: '#28d48a',
6    metadata: { build: '2026.07.1', tenant: 'acme' },
7  };
8</script>
9<script async src="https://app.bugpot.io/embed/loader.js?p=your_project_key"></script>

JavaScript API

Once loaded, the widget exposes window.Bugpot. Hide the built-in launcher and open the widget from any element of your own:

1<script>
2  window.BugpotConfig = { buttonPosition: 'hidden' };
3</script>
4<script async src="https://app.bugpot.io/embed/loader.js?p=your_project_key"></script>
5
6<button onclick="window.Bugpot?.open()">Give feedback</button>

• Bugpot.open()Open the widget; screenshot capture starts immediately.
• Bugpot.close()Close the widget and restore the launcher (unless hidden).
• Bugpot.destroy()Remove the widget from the page entirely.
• Bugpot.versionThe running widget version string.
• Bugpot.metadataMutable metadata bag, read at submission time (see below).

Custom metadata

Anything you put in the metadata bag rides along with every report and shows up in the triage inbox. Seed it in the config, or mutate it at runtime as your app state changes. It’s read at the moment a report is submitted.

1// Seeded before load…
2window.BugpotConfig = {
3  metadata: { build: '2026.07.1', plan: 'studio' },
4};
5
6// …and updated whenever you like after load
7window.Bugpot.metadata.userId = 'u_4821';
8window.Bugpot.metadata.cartId = 'c_812';

Values from custom form fields (severity pickers, dropdowns, checkboxes you add in the form builder) arrive as custom metadata on the report too.

Data masking

Anything matching your masking selectors is blurred in the browser, before the screenshot is created. Account numbers and customer data never reach Bugpot’s servers in the first place.

1window.BugpotConfig = {
2  maskingSelectors: ['.account-number', '[data-private]', '#billing-email'],
3};

More on the pipeline in Product → Data masking.

What gets captured

Alongside the annotated screenshot, every report carries the context your developer would otherwise have to ask for:

• +Page URL and title
• +Browser and OS (user agent)
• +Screen and viewport size
• +Device pixel ratio
• +Console output (log → error)
• +Failed network requests
• +Reporter name and email
• +Your custom metadata

Console and network capture are toggled per project in the dashboard.

Integrations & webhooks

From 1 October 2026you’ll connect Jira, GitHub, GitLab, Linear and eleven more trackers from workspace settings; each integration page has its own step-by-step setup. Prefer to build your own pipeline? Webhooks are live today: they deliver every event as JSON, signed with HMAC so you can verify the sender, with a replayable delivery log when your endpoint was down. See Security for the details.

Support

Stuck on anything? Write to hello@bugpot.io. A human answers. Live service health is on the status page.