Widget appearance

Position, accent colour, label, headline, feedback types, theme — everything you can change about how the button looks and reads.

Position and colour

The launcher sits vertically on the left or right edge of the viewport, centred. Set the accent colour to your brand colour as a six-digit hex value; it is applied to the launcher, the chips, the focus rings, and the submit button.

The widget renders inside a Shadow DOM, so your site's CSS cannot reach into it and its CSS cannot leak out. There is no reset to fight and no specificity war to lose.

Wording

Four strings are yours: the launcher label, the panel headline, the sub-headline, and the message shown after a successful send. Keep the launcher label short — it renders rotated, and long labels look cramped on small viewports.

Feedback types

Feedback is not only bugs. Eight types are available — bug, design, copy, content, performance, idea, question, other — and you choose which of them appear as chips at the top of the form. Select one and the chip row disappears entirely, which is useful when the widget is scoped to a single purpose like a beta bug hunt.

Choosing design reveals a second question: which aspect. Colour, layout, spacing, typography, imagery, animation, responsiveness, or other. It exists so someone can say the padding is wrong without needing your vocabulary for it.

The type prefixes the issue title, so a bug arrives in GitHub as "[Bug] Checkout button does nothing on Safari".

Severity

A five-point picker: 1 Cosmetic — looks off, blocks nothing — through to 5 Blocking, completely stuck. The glyphs run grey to amber to red, so the scale reads before the labels do.

It is optional by default, deliberately. A required field is a reason to abandon a form, and a report with no severity is worth far more than no report at all. When a reporter does choose one it prefixes the title as "[Bug · S4] …" and sorts your inbox.

Turn the picker off per project if severity is not how your team triages.

Screenshots and dictation

Two switches, both per project. Screenshots add an "Attach a screenshot" button to the form; the capture library is a separate file fetched only when someone presses it, so leaving the button on costs a visitor who never uses it nothing at all. Read Screenshots before you enable it — the masking attributes are markup you add to your own page.

Dictation adds a microphone button to the description field, using the browser's own speech API. It is off unless you turn it on, and it should stay off unless you have read what it does: in Chrome, SpeechRecognition streams the audio to Google for transcription. That is the one third-party request BugLoop can make. The widget discloses it the first time the button is pressed, and the button renders only where the browser actually supports it.

Theme

Auto follows the visitor's prefers-color-scheme. Force light or dark if your site does not offer a choice and you want the widget to match.

Accessibility

The panel is a labelled dialog, focus is trapped inside it while open, Escape closes it and returns focus to the launcher, every control has a visible focus ring, and the status line is a live region so screen readers announce errors and confirmations. Motion respects prefers-reduced-motion.