bugpot

The widget

One script tag. No collisions with your site.

The Bugpot widget was built to live on other people’s websites. It loads asynchronously, renders inside a Shadow DOM so it can never fight with your CSS, and stays under 150 KB gzipped — small enough to forget it’s there.

Install

Paste one line before </body>

The loader is async and deferred by default, so your site’s LCP and INP are never in the widget’s critical path. The full bundle only fetches after your page has finished rendering.

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

  • Async & deferred

    Never blocks page render

  • Project-scoped

    Each site gets its own key

  • Cache-friendly

    CDN-served, versioned URLs

Isolation

Shadow DOM so nothing on the host page can leak in

The widget renders inside a closed Shadow DOM. Your site’s CSS resets, global selectors, framework runtimes and third-party scripts can’t reach it — and the widget can’t reach out to affect your page. It looks the same on a Bootstrap site, a Tailwind site or a jQuery site built in 2014.

  • No global CSS bleed either direction
  • Fonts and icons scoped inside the shadow root
  • No z-index war with sticky headers or chat bubbles
  • Host site errors don’t crash the widget
How the widget mounts
<body>
  <!-- your site markup -->

  <ff-widget>
    #shadow-root (closed)
      <style>/* scoped to the widget */</style>
      <div class="ff-launcher">Feedback</div>
      <div class="ff-panel" hidden>…</div>
  </ff-widget>

  <script async src=".../loader.js?p=…"></script>
</body>

Performance

Under 150 KB gzipped — and loads last

The widget has one job, so it stays small. The loader is a few kilobytes; the main bundle only fetches after your page has finished rendering. Nothing runs on the main thread until the reporter opens the widget.

<150 KB

gzipped bundle

0 ms

blocking time on load

1 request

CDN-cached, versioned

No web fonts

system stack inside the widget

Custom forms

Different forms for different reports

Ask guests for a name and email, ask team members for nothing. Bug reports and feature suggestions can carry different fields. Add severity pickers, dropdowns, checkboxes and free-text notes, reorder them with drag and drop, and mark any field required.

  • Guest form vs member form, controlled independently
  • Text, textarea, select and checkbox field types
  • Per-issue-type forms — bugs, comments, suggestions
  • Required, optional and pre-filled defaults
clientsite.co.uk — Feedback
Bug report
LowMediumHigh
Contact me when this is fixed
Send report

Sensitive data

Mask what should never end up in a screenshot

Give the widget a list of CSS selectors and it blanks the matching elements before capture. Card numbers, personal details, half-typed passwords — all blocked out at source, before the screenshot ever leaves the reporter’s browser.

Widget settings → Privacy
mask_selectors:
  - "[data-private]"
  - ".card-number"
  - "input[type=password]"
  - "#customer-address"

# Masked elements are replaced with a
# solid block before screenshot capture.

Branding

Your workspace’s branding on the widget

For agencies, the widget should feel like part of the client’s site — not a third-party tool bolted on. Set the logo, the primary colour, the launcher label and its position per project. Clients see something polished; they never see the Bugpot name unless you want them to.

  • Upload a workspace logo shown in the widget header
  • Set the launcher colour to match the site’s primary
  • Custom launcher label — “Feedback”, “Report a bug”, anything
  • Corner position: bottom-right, bottom-left, top-right, top-left

Studio Kea

Feedback

North & Vale

Report a bug

Sunbeam Digital

Send a note

Salt & Pixel

Tell us

Install the widget in two minutes

One script tag, a project key, and clients can send you real bug reports today.

Start freeSee pricing