Annotate & Redact Screenshots

A screenshot shows what the visitor saw. A marked-up one shows what they meant, and lets them hide what you should not see.

Try the editor

Click a thumb below. The widget redraws this page, opens the editor, and then the message box.

Turn the editor on or off

With captureScreenshot on, the editor opens after every capture. To send the picture without it, turn it off:

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

In JavaScript the option is annotate: false. Any value other than "false" in the attribute leaves the editor on. See Screenshot capture for how the picture is taken.

Let visitors draw instead of pointing

By default a visitor clicks a thumb, then points at an element on the page. In Annotate mode they skip the pointing: the widget takes a screenshot and opens the editor at once. It does this even when captureScreenshot is off.

1. Open Customize

   In your project, open Customize.

2. Switch on Annotate

   Find the Annotate switch among the feature toggles and turn it on.

3. Copy the snippet

   The snippet under THUMBS CODE now carries data-feedback-mode="annotate". Copy it into your site.

In code it is feedbackMode: "annotate". An Annotate-mode report names no element, so the dashboard shows no selector for it, and Qaid never takes a screenshot itself when the browser sends none.

Know the tools

Toolbar button	What it does
Rectangle	Draws a box
Arrow	Draws an arrow from where you press to where you let go
Pen	Draws freehand
Blur or redact	Covers a box with a solid checkerboard
Colour swatches	Set the colour of the next mark. Blur ignores them
Undo last	Removes the latest mark
Skip annotation	Sends the picture as it was taken
Done	Sends the picture with the marks on it

Escape does what Skip annotation does. Enter does what Done does, unless a toolbar button has focus. A click without a drag draws nothing. The editor takes mouse, touch and pen.

Pick the pen colours

The first swatch is picked when the editor opens. Set it with annotationColor (data-annotation-color), or with the Annotation colour on the Customize page. Left empty, it is your marker colour, #6365f1 by default.

The other swatches are red, amber, green, blue, black and white. A starting colour not in that list is added in front of it, so the default toolbar shows seven. To offer your own set, pass annotationPalette, a list of hex colours. It has no script attribute, so use JavaScript or the JSON config block (Every option).

new QaidFeedback({
  endpoint: "https://qaid.dev/api/feedback",
  apiKey: "YOUR_PROJECT_KEY",
  captureScreenshot: true,
  annotationColor: "#ff00aa",
  annotationPalette: ["#ff00aa", "#111827", "#ffffff"],
});

Know what blur hides

Blur or redact paints over the box, so the text under it is gone from the picture that is sent. Only Skip annotation sends the untouched picture. Tell visitors in your privacy policy that feedback can include a picture of the page, and that they can cover anything private first.

Find the marked-up picture

The marked-up picture replaces the original. Open the item in the dashboard and it is under Screenshot; see Triage the inbox. Qaid never receives the unmarked one.

Use the editor with a keyboard or screen reader

With a keyboard, Tab moves through the toolbar. Each tool and swatch is a button with a spoken name, such as “Rectangle tool” or “Draw in red”. Focus stays inside the editor while it is open, and the page behind it is inert. The editor announces the tool or colour picked, each new mark, and whether the picture was attached or skipped. Its labels are English and cannot be changed.