Bugfix · feature

Bug report widget (screenshot, context, voice and screen recording)

A bug report widget is the button a visitor presses when something on your site breaks. Bugfix, a service by ASI Bots, places that button in the corner of any page with one script tag. The visitor describes the problem, the widget attaches a screenshot of the visible screen together with technical context, and your team gets a report it can act on instead of a message that says only “it does not work”.

Bug report widget on a website: floating button, form with screenshot, marking tools and technical context

What a bug report widget changes for a site owner

A short note from a visitor rarely says which page was open, which browser was used or what was clicked before the failure. The developer then has to write back with questions. The bug report widget in Bugfix removes that round trip: it collects those details at the moment the person reports the problem.

The floating button opens a form with four message types: bug, idea, “unclear” and review. The message becomes a task for the owner of the site, and the visitor receives a reply. The same center also serves other widgets of the Bugfix family, such as reviews and web chat, so a site has one place where visitor messages arrive.

How a report travels from the button to your developers

The visitor clicks the floating button and picks a message type.
The widget takes a screenshot of the visible screen with the html2canvas library. If the browser cannot finish within 7 seconds, the form carries on without a picture, and the buttons for marking, selecting an element and recording stay available.
The visitor adds detail with the tools in the form: ✏️ draws on the screenshot, 📍 points at an element of the page (its CSS selector and frame are remembered), 🎬 records the screen with rrweb, 🎤 records a voice message, 📎 attaches a file. A screenshot can also be pasted from the clipboard with Cmd/Ctrl+V.
The widget adds the technical context on its own.
The visitor sends the message. It turns into a task, and the answer goes back to the visitor.

Esc closes the window, and closing it switches the microphone off. An attached image is converted to JPEG of up to 2000 pixels.

Context that arrives with every report

Nobody has to ask the visitor for technical details, because every report from the bug report widget already carries them:

page address and window size;
console errors and network requests;
the last steps of the visitor, up to 20;
page language and a language conflict, if there is one;
device and browser, time zone and network type;
session time and the element the visitor marked;
the visitor's contact, which the browser remembers for the next time.

The look of the button and the window is set by one of ten ready-made skins: terminal, steel, blue, red, glass, ink, neon, keycap, soft and brand. Texts follow the language of the site, and on narrow screens the window wraps its row of buttons.

Where a bug report widget is used

Broken layout on a phone. The report shows the window size, the device and the browser, and the screenshot shows the result.
A form that fails on submit. Console errors and network requests sit in the report next to the screenshot, so the developer starts from evidence instead of a guess.
A visitor who cannot explain the problem in words. The person draws on the screenshot, points at an element or leaves a voice message.
Ideas and impressions. The same button accepts ideas and reviews, not only breakages.

Installing the widget with one tag

The bug report widget goes live with one tag. Add it to the pages where the button should appear and put the key of your site into data-project:

<script src="https://bugfix.asibots.pro/loader.js" data-project="<site-key>" defer></script>

The loader fetches the current widget from the Bugfix center, so improvements reach every site without edits on the owner's side. For sites that are opened from Russia without a VPN, the assets are proxied through the domain of the site itself.

Limits and site settings worth checking

Microphone. If the site sends the header Permissions-Policy: microphone=(), the browser blocks the microphone without asking. The widget detects this and tells the visitor that voice is switched off by the site settings and to describe the problem in text. To allow voice, the header needs microphone=(self).
Previews. For the screenshot preview and the screen recording, the content security policy of the site has to allow blob: in img-src and media-src.
Screenshot. The browser takes it, and if it cannot within 7 seconds the report goes without it.
Storage. Reports are received and stored on the Bugfix infrastructure: a Supabase database and private storages for screenshots, screen recordings and voice. Private attachments open only through a protected function, never by a direct link.

Frequently asked questions

Does the bug report widget fail when a screenshot cannot be taken?

No. If the browser cannot take the screenshot within 7 seconds, the form keeps working without the picture. The buttons for marking, selecting an element and recording stay in place, and the visitor can still paste a screenshot with Cmd/Ctrl+V or attach a file.

Why does the form say that voice is switched off?

The site sends the header Permissions-Policy: microphone=(), and the browser then forbids the microphone without a prompt. Changing the value to microphone=(self) allows it.

How is the inbox protected from spam?

A hidden trap field catches bots. One device can send no more than 10 messages per hour and no more than one message every 15 seconds.

Add Bugfix to your site