Annotate & Redact Screenshots

A screenshot shows what someone was looking at. An annotated screenshot shows what they mean — the button that's broken, the number that's wrong, the region that should be hidden. When screenshot capture is enabled, the Qaid embed lets people draw right on their screenshot before it's sent, with no extra setup.

On by default

Annotation rides on top of screenshot capture. Any time the embed captures a screenshot, the editor appears automatically before the feedback is sent — there's nothing new to turn on:

<script
  src="https://unpkg.com/@qaiddev/thumbs-embed/dist/embed.js"
  data-endpoint="/api/feedback"
  data-capture-screenshot="true"
></script>

To turn annotation off and send the raw screenshot straight through, set annotate to false:

<script
  src="https://unpkg.com/@qaiddev/thumbs-embed/dist/embed.js"
  data-endpoint="/api/feedback"
  data-capture-screenshot="true"
  data-annotate="false"
></script>

Or in JavaScript:

import { QaidFeedback } from '@qaiddev/thumbs-embed';

new QaidFeedback({
  endpoint: '/api/feedback',
  captureScreenshot: true,
  annotate: true // default; set to false to skip the editor
});

If captureScreenshot is off, there's no screenshot to annotate and the editor never appears.

The tools

The editor opens full-screen over the page with the screenshot centered and a toolbar underneath:

Tool	What it does
Rectangle	Draw a box around the thing you're reporting
Arrow	Point at a specific element
Pen	Freehand highlight or circle
Blur	Cover a region with a solid, opaque block to hide sensitive details
Undo last	Remove the most recent mark
Done	Attach the marked-up screenshot and continue
Skip	Send the original screenshot, unmarked

Marks use your theme's accent color, so annotations match your brand automatically. Drawing over the same screenshot as many times as needed is fine — Undo last peels back one mark at a time.

Redaction & privacy

The Blur tool paints a solid, fully opaque block over whatever region you drag across. The pixels underneath are replaced in the image that gets sent — not dimmed or lightly blurred — so a covered email or card number is genuinely gone from the screenshot, not just faded. Only the marked-up image is submitted; the original is never sent. Encourage its use whenever your app shows personal data on screen.

Two things worth telling your users (a line in your privacy policy is ideal):

• Feedback may include a screenshot of the current page.
• They can redact anything sensitive with the blur tool, or choose Skip to send no screenshot at all.

Accessibility

The editor is held to the same WCAG 2.2 AA bar as the rest of the embed. Every tool is reachable and operable by keyboard, focus is trapped inside the editor while it's open, tool changes and new marks are announced to screen readers, and the surface behind it is made inert so nothing outside steals focus. Keyboard users can press Escape to skip (sending the original) or activate Done to attach their markup.

Configuration example

Annotation composes with the rest of the screenshot options — set the capture method and output size as usual, and the editor works the same either way:

import { QaidFeedback } from '@qaiddev/thumbs-embed';

new QaidFeedback({
  endpoint: '/api/feedback',
  apiKey: 'your-api-key',

  captureScreenshot: true,
  annotate: true,

  screenshotMethod: 'permission', // or 'dom'
  screenshotOptions: {
    quality: 0.85,
    maxWidth: 1600,
    maxHeight: 1000
  }
});

The marked-up image is re-encoded as WebP and travels in the same feedback submission as the original would have — nothing changes on the receiving end, so your inbox simply shows the annotated screenshot.

Best practices

Leave it on. Annotation adds zero configuration and turns vague reports ("the thing is broken") into precise ones ("this button, see the arrow"). Only disable it if your capture flow is fully automated with no human in the loop.

Prompt for redaction where it matters. On pages that show personal or account data, a short line of copy near your feedback buttons ("you can blur anything private") measurably increases how often people redact.

Test on touch. The editor works with touch and pen input as well as a mouse. If your audience is mobile-heavy, try the flow on a phone so the toolbar targets feel comfortable.

With annotation enabled, every screenshot that reaches your inbox can carry the reporter's own emphasis — and hide what shouldn't be there — before you ever see it.