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 closed 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
<body>
<!-- your site markup -->
<bugpot-widget>
#shadow-root (closed)
<style>/* scoped to the widget */</style>
<div class="bp-launcher">Feedback</div>
<div class="bp-panel" hidden>…</div>
</bugpot-widget>
<script async src=".../loader.js?p=…"></script>
</body>Screenshot capture
Pixel-accurate captures of the live DOM
The widget takes a snapshot straight from the rendered document — every element, every style, every image the reporter actually saw. A hybrid renderer picks the best strategy for the page, and falls back to a native screen-share for the pages that resist DOM capture.
- Full-page or visible-viewport capture, at native device pixel ratio
- Web fonts, CSS backgrounds, gradients and SVG rendered faithfully
- Automatic fallback when cross-origin images taint the canvas
- getDisplayMedia pixel-perfect mode for WebGL and protected media
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
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
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
North & Vale
Sunbeam Digital
Salt & Pixel
Install the widget in two minutes
One script tag, a project key, and clients can send you real bug reports today.