Video Feedback: Screen Recording for Bug Reports

A screenshot shows the broken state. A recording shows the clicks that led to it.

Turn recording on

1. Switch on Video

   In your project, open Customize and turn on Video. A record button appears in the preview.

2. Add Redaction if you want it

   Turn on Redaction to let visitors pick parts of the page to blur first. It does nothing while Video is off.

3. Copy the snippet

   Copy the snippet under THUMBS CODE into your site.

Or add it by hand. The key is required: a recording sent without data-api-key is refused.

<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-video="true"
></script>

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

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

This demo shows where the button sits. It is not tied to a project, so recordings made here are not saved.

Know what the visitor does

1. They click the record button. With Redaction on, they first click the parts of the page to blur, then Start recording.
2. The browser asks to share the screen. They share this tab.
3. A bar counts down the time left, with Stop. Escape stops too, and so does the browser’s own stop-sharing button.
4. Review your recording plays the clip back. They can type a description, then click Send, Re-record or Cancel.

The thumbs are greyed out while the recording runs. After Send the dialog closes, with no thank-you screen.

If the upload is refused or the network fails, the review stays open with a red line above the buttons: “This recording is too large to send. Try a shorter one.” for a file over 50 MB, and “Your recording could not be sent.” for anything else. A Free project (403) gets the second. The clip is kept, so Send tries again. This needs thumbs-embed 1.8.0 or later.

Record only this tab

The widget records the tab it runs in and nothing else. In Chrome and Edge the share prompt offers just this tab. If a browser lets the visitor pick a window or the whole screen anyway, the widget stops and asks them to share this tab instead. No sound is recorded.

Blur private parts before recording

With Redaction on (videoOptions.redaction, data-video-redaction="true"), the record button opens a picker first. The bar at the bottom says “Click sensitive areas to blur”. Each click outlines an element, a second click removes it, and the bar counts the picks. Start recording begins; Cancel or Escape backs out.

The blur follows each element as the page scrolls, on any device that can record. If a browser cannot blur, the recording does not start, and a screen reader hears why. Picked parts are never recorded in the clear. On iPhone and iPad this needs 1.8.0 or later too.

Set the length and the look

Option	Script attribute	Default	What it does
captureVideo	data-capture-video	false	Shows the record button
videoOptions.maxDuration	data-video-max-duration	15	Seconds until recording stops by itself
videoOptions.redaction	data-video-redaction	false	Opens the blur picker first
hideThumbs	data-hide-thumbs	false	Hides the thumbs, leaving only the record button
recordIcon	none	a video camera	An SVG or emoji for the record button
buttonClass	data-button-class	none	Your class on every button, the record button included

Customize has no length control, so add data-video-max-duration to the snippet yourself. The widget records at 15 frames a second and about 800 kbit/s: 15 seconds comes to roughly 1.5 MB, and a minute to about 6 MB. For recordIcon with a script tag, use the JSON config block; see Custom button icons.

Watch the recording on the item

In the inbox, a recording is its own type, Video, and its row carries a purple camera badge. Open it and the clip plays under Video Recording, with the visitor’s description above it. Console Errors lists what the page logged, and Network Errors lists requests that failed while the recording ran. See Triage the inbox.

A recording arrives in one request, description included. It fires the feedback.created webhook with feedbackType set to video (Webhooks and Slack), escalation rules check it once (Escalation rules), and it counts toward the monthly feedback limit. To open a quest after a recording, see Link buttons to quests.

Know where it works

The record button appears only in a browser that can record the screen, which in practice means a desktop browser on an https:// page. Phone browsers generally cannot, so they show no record button. The browser picks WebM or MP4, and Qaid refuses a file over 50 MB.

Keep recordings private

Qaid stores each recording at a long, random web address. That address is not signed: anyone who has it can play the clip. It is shown in the dashboard and returned by the Platform API. A GitHub issue made from the item links to the item in Qaid, not to the video. Say in your privacy policy that feedback can include a recording of the page.