Screenshot annotation for bug reports

Your reporter circles the problem on the page they're looking at, and the marked-up image lands on your board with everything else you need.

Screenshot annotation in Flawsnap is the step where a reporter marks up an image of the page before sending a bug report. The widget captures the visible viewport, and the reporter adds boxes, arrows, freehand lines and text, blurs anything private, and crops to the part that matters. No browser permission prompt is needed.

What happens after someone clicks the button

  1. 1

    Click the report button

    The reporter clicks the widget's button (labelled 'Report a bug' unless you change it). Flawsnap takes a picture of the visible part of the page.

  2. 2

    Mark it up

    The annotation toolbar opens over the screenshot. The widget itself is left out of the picture, so its button never covers what they wanted to show.

  3. 3

    Describe it

    They add a title and a description, pick a priority (low, medium, high or critical) and answer 'Who should look at this?' by picking a category.

  4. 4

    Send it

    The report arrives in your project with the marked-up screenshot, the console, the network calls and the device details attached.

The tools in the toolbar, and when each one helps

ToolUse it for
BoxFraming a misaligned element, a broken card or a wrong price.
ArrowPointing at something small, such as a missing icon or a 1px gap.
DrawCircling a region freehand when a box is too rigid.
TextWriting the expected value right on the image: "should say 3 items".
BlurHiding an email address, an order number or a customer name.
Select areaCropping the image to the part that matters.

There is also a Move tool, five colour swatches, Undo, and zoom for detailed work.

Blur is applied before the image leaves the browser

When a reporter blurs an area, Flawsnap pixelates it in their browser before the upload. The unblurred version is never sent. That matters when reports come from customers or clients who can see each other's data, or when testers work in a production account.

Tell reporters to blur first and annotate second, so a text label never sits on top of something you meant to hide.

How the screenshot is taken

The widget re-renders the page from the DOM instead of asking the browser for a screen capture. That is why there is no "share your screen" prompt, which non-technical reporters often refuse or get stuck on. It captures the visible viewport, not the whole scrolling page, so ask reporters to scroll the problem into view before they click.

Screenshots can be up to 10 MB. Reports also need the site to be on the project's allowed domains, so a copied key will not work on someone else's website.

The same idea in the extension and the Flutter SDK

WhereHow the image is capturedMarks available
Website widgetRe-rendered from the pageBox, arrow, draw, text, blur, crop
Chrome extensionThe browser's tab captureBox, arrow, draw, text, blur
Flutter SDKA screenshot of the app screenBox and draw, five colours

The extension is for team members on Chrome, Edge and Brave, and works on sites without the widget. The Flutter SDK has no arrow, text or blur tools.

Who gets the most from it

Annotated screenshots are on both plans, Starter and Pro. Try it on the live demo shop.

  • Designers and reviewers pointing at spacing, colour and copy problems. See design review with Flawsnap.
  • Clients and customers who will never write "steps to reproduce" but can circle what looks wrong.
  • QA testers who want the expected value written on the image instead of in a separate note.

Questions

Does the reporter need to install anything to annotate a screenshot?
No. The annotation tools are part of the website widget, which loads from one script tag on your site. Reporters use them in their normal browser tab without an account or an extension.
Can I capture a full scrolling page instead of the viewport?
The widget captures what is visible in the browser window. To show something lower on the page, scroll to it first, or attach a screen recording on Pro to show the whole path.
Is the blurred part recoverable by my team?
No. Blur pixelates the area in the reporter's browser before upload, so the original pixels never reach Flawsnap.

Try it on your own site

7-day free trial, then $9 a month for Starter or $19 for Pro, per organization, with unlimited team members.

Updated