Annotate screenshots before sending a bug report

A screenshot tells you what the screen looked like; an annotated screenshot tells you exactly where the visitor was looking. Yaplet's built-in drawing tools let visitors mark up their screenshot before the report is sent — no extra app and no browser extension.

How the annotation tool works

When the visitor presses 📸 Add Screenshot on the last step of the report form, Yaplet captures the current page and shows it with a small toolbar overlaid on top. The visitor draws directly on the image before continuing:

• Rectangle — drag a box around the problem area. This is the tool selected when the toolbar opens, so most visitors use it without thinking about it.
• Pen — freehand scribbles, circles and underlines.
• Blackout — drag over anything that should not be visible in the screenshot you receive; it paints a thick black stroke over it. Worth pointing out to your users: it is the polite way to cover a customer name or an account number. Note that it covers rather than deletes — the marked area is painted out of the image your team sees, but it is not stripped out before the page is sent to Yaplet, so for anything that must never leave the browser at all, use the gl-mask class on that field instead.
• Colour — seven colours to choose from, so marks stand out against the page behind them.
• Undo — removes the last mark.

Once they are happy with it, the visitor continues to the description step and submits.

What you receive

The ticket carries the screenshot with the marks on it. Open it with View screenshot in the ticket's Actions list — it opens in a new tab at full size.

Tips for better bug reports from your users

• Keep the description field short and focused — the annotation and the replay carry the technical context.
• If you see a pattern of visitors not annotating, add a nudge in the bug form's subtitle: "Box the broken area in the screenshot before submitting."
• If your product shows customer data on screen, mention the blackout tool in that subtitle too. It keeps personal data out of the screenshots your team reads — though for fields that must never be sent at all, tag them with gl-mask in your own code.