Screenshot Capture: Visual Context for Feedback

A report that says “it looks wrong” is easier to act on with a picture of the page. The widget can take one when the visitor sends feedback.

Turn screenshots on

Add one attribute to your snippet:

<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"
></script>

Or in JavaScript:

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

new QaidFeedback({
  endpoint: "https://qaid.dev/api/feedback",
  apiKey: "YOUR_PROJECT_KEY",
  captureScreenshot: true,
});

After the visitor points at an element, the widget takes the picture and opens the markup editor, where they can circle or blur parts of it (see Screenshot annotation). Then it sends the image with the thumb, before the message box opens.

If a capture is declined or fails, the feedback is still sent, without a picture. Customize has no screenshot switch, so add the attribute to the snippet it gives you.

Choose how the picture is taken

	"permission" (the default)	"dom"
How	The browser’s screen-share prompt; one frame is kept	The page is redrawn from its HTML and CSS
The visitor sees	A prompt asking to share the tab	Nothing
Accuracy	Exactly what was on screen	Close, not exact. Images from other sites show only if that site sends CORS headers
Extra download	None	html2canvas from https://qaid.dev/lib/, on first use
Used on	Desktop	Desktop, and always on touch screens

data-screenshot-method="dom"

On a phone or tablet the widget always uses "dom", whatever you set, because the share prompt there covers the screen and returns a rotated frame on iOS.

Keep "permission" when you need exact pictures, such as pages with charts or video. Switch to "dom" if visitors decline the prompt.

Set the size and quality

Option	Script attribute	Default	What it does
screenshotOptions.quality	data-screenshot-quality	0.8	WebP quality, from 0 to 1
screenshotOptions.maxWidth	data-screenshot-max-width	1280	Widest the image can be, in pixels
screenshotOptions.maxHeight	data-screenshot-max-height	800	Tallest the image can be, in pixels

The image is scaled down to fit both limits, keeping its shape. It is never scaled up. The markup editor saves at the same quality.

Let Qaid take the picture when the browser can’t

On Pro, Qaid takes a screenshot itself when all four of these are true:

1. The browser sent no image. Screenshots were off, or the visitor declined, or the capture failed.
2. The visitor pointed at an element. With skipTargeting, feedbackMode: "annotate" or a click that picked nothing, there is no element.
3. The page address is public. Not localhost, 127.0.0.1, a .local name or a private address such as 192.168.x.x.
4. The project owner is on Pro.

This works even if you never turned screenshots on in the snippet.

Qaid opens the page address in its own browser, at the visitor’s window size, scrolls to where they were, and draws a red box around the element. It is signed out, so it sees what a new visitor sees. If the page is a sign-in page, a bot check or a form with a password field, Qaid gives up and the item has no screenshot. There is no setting to give it a login.

See the screenshot on an item

Open a feedback item. The picture is under Screenshot. Click it to see it full size, and press Escape or click outside it to close. In the inbox, a row with a picture carries a small image badge.

Take one from the dashboard

An item with no picture shows “No screenshot available” and a Capture Screenshot button beside the heading. In the inbox, hover a row with no picture and click the camera, “Capture screenshot”.

Qaid then loads the item’s page the same way as above, today, not as it looked when the feedback came in. Anyone on the project can use the button. What you see next:

1. “Screenshot captured”: the picture is on the item.
2. “Screenshot pending”: Qaid is already taking one for this item, because it arrived without one. Wait a few seconds and click again.
3. “Only public web pages can be captured”: the page is on localhost, a .local name or a private address. The message names it, and Qaid does not try.
4. Any other failure gives the reason, most often a sign-in page.

Know who can see a screenshot

Where the picture goes	Who can see it
The item in the dashboard	Everyone on the project
Its address, https://qaid.dev/api/screenshots/ and the item ID	Signed-in members of the project. Anyone else gets an error
A GitHub, Linear or Jira issue made from the item	Anyone who can read the issue, for 365 days. The issue carries a signed link that stops working after that
New-feedback and escalation emails	Each recipient. The image is inside the email, and many mail apps hide images sent that way
Webhooks and Slack	No one. They only say whether a picture exists (hasScreenshot)
The Platform API	Code holding a key with the feedback:read scope
The project’s JSON export	Owners who download it

An image in an issue made before signed links existed now loads only for project members who are signed in to Qaid.

Tell your visitors

A screenshot can show anything that was on the visitor’s screen in that tab: names, emails, account numbers. Say in your privacy policy that feedback may include a picture of the page. The markup editor lets visitors blur private parts before sending, and Skip annotation sends the picture as it was taken.