What Changes on a Phone

The widget adapts to a phone without any settings. This page lists what changes, then the few things worth setting yourself.

Know what changes by itself

When	What changes
The window is under 640 pixels wide	The message box opens as a sheet across the bottom, full width, with no arrow. It ignores modalWidth and pads itself clear of the home bar. The width is checked again when the window is resized
The main pointer is a finger	Screenshots are drawn from the page itself, so there is no screen-sharing prompt. The drawing code loads from qaid.dev the first time
The main pointer is a finger	Targeting is tap to pick. A finger that moves more than 12 pixels scrolls the page instead
The browser cannot record the screen	The record button is not drawn. Phone browsers generally cannot, so expect no record button there

The size of the buttons and their place stay as they were set when the widget started.

To restyle the sheet, see Styling the embed.

Pick a button size for thumbs

buttonSize (data-button-size) is small, medium or large, for 36, 48 or 64 pixel buttons. A finger needs about 44 pixels, so small is too small for a phone. medium is the default.

With buttonClass set, the size is yours to set in CSS; see Custom button styles.

Clear the bottom nav or home bar

The buttons sit 16 pixels above the bottom edge and do not allow for a bottom navigation bar. Lift them with offset.y, chosen when the widget starts:

const phone = window.matchMedia("(max-width: 640px)").matches;

new QaidFeedback({
  endpoint: "https://qaid.dev/api/feedback",
  apiKey: "YOUR_PROJECT_KEY",
  offset: { x: 16, y: phone ? 88 : 16 },
});

Or put them in a top corner on phones. Position and placement has every placement option.

Hide the widget on small screens

Start it only when the screen is wide enough:

if (window.matchMedia("(min-width: 640px)").matches) {
  new QaidFeedback({
    endpoint: "https://qaid.dev/api/feedback",
    apiKey: "YOUR_PROJECT_KEY",
  });
}

Conditional display shows how to start the widget in code. Don’t use incognito for this: on a touch screen the buttons stay invisible and still catch taps in their corner.

Keep recordings short

Where recording works, a phone connection is slower to send it. videoOptions.maxDuration (data-video-max-duration) caps a recording in seconds; the default is 15. See Video feedback.

Test on a real phone

1. Open the page on the phone

   On the same network, open your computer’s address, such as http://192.168.…. Plain http:// works with thumbs-embed 1.8.0 or later. A tunnel or a preview deploy works too.

2. Check the project's domain

   If the project’s settings have a Domain Restriction, only that host and its subdomains can send feedback. localhost is always allowed, but a network address or a tunnel’s address is not. Clear the restriction while you test, or test on your real host. See Project settings.

3. Walk through it

   Tap a thumb, tap an element, and send a message from the sheet. With screenshots on, check the picture in the dashboard.