The Feedback Message Box: What It Holds and How It Behaves

This page is about how the message box works. Its words are on Text customization and its looks on Styling the embed.

Know what is in it

Part	What it does
Badge	Shows the vote as a thumb on a green or red circle. Click it to flip the vote between up and down
Title and line under it	“Thank you for your feedback!” and a short ask for more
Text field	Takes the message. Focus lands here when the box opens
One button	Reads Skip while the field is empty and Submit once something is typed
Arrow	On a wide screen, points at the element the visitor picked

With singleButton on, the badge is a fixed speech icon, since there is no vote to flip. With buttonClass set, the badge wears your class too. The box has no other fields and no option to add them. To ask more than one question, link the button to a quest; see Link thumbs buttons to quests.

Know when the vote is saved

1. The vote, the page, the picked element and any screenshot are sent before the box opens.
2. Flipping the badge sends the new vote straight away.
3. Skip or Submit sends the message, or none, and shows the thank-you screen.
4. Escape, or a click on the dimmed page, closes the box. The vote stays, with no message.

So a vote counts even when the visitor closes the box. If a button is linked to a quest, the quest opens in place of the box.

If the first send fails, the box still opens, but Submit then closes it without a thank-you. The widget shows no error. A screen reader hears “Failed to send feedback” only when the network itself failed, not when the server refused the vote.

Know where it opens

On a wide screen the box opens under the picked element, or over it when there is no room below, with its arrow pointing at it. With targeting off it opens by the button. It keeps 16 pixels inside the window, and it is placed as if it were 280 pixels tall, so a very tall box can run past the edge and scroll inside itself.

In a window under 640 pixels wide it opens as a sheet across the bottom instead. See What changes on a phone.

With captureScreenshot on, the screenshot markup editor opens first, and the box after it. See Screenshot annotation.

Change its width

modalWidth (data-modal-width) sets the width in pixels. The default is 400. It never grows wider than the window less 32 pixels, and the phone sheet ignores it. backdropOpacity (data-backdrop-opacity, default 0.3) sets how dark the page behind it goes.

new QaidFeedback({
  endpoint: "https://qaid.dev/api/feedback",
  apiKey: "YOUR_PROJECT_KEY",
  modalWidth: 480,
  backdropOpacity: 0.5,
});

Everything else about its look, from corners to fonts, is done with CSS; the class names are on Styling the embed.

Show or skip the thank-you screen

After Skip or Submit, the box shows a check mark, “Thank you!”, “Your feedback has been received.” and a Close button. Focus moves to the title and a screen reader reads both lines.

It shows only when the server takes the message. If the server refuses it, or the network fails, “Message not sent” shows instead, even with hideConfirmation on. This needs thumbs-embed 1.8.0 or later.

new QaidFeedback({
  endpoint: "https://qaid.dev/api/feedback",
  apiKey: "YOUR_PROJECT_KEY",
  hideConfirmation: true, // close at once on success
  text: { errorTitle: "Not sent", errorMessage: "Please try again in a minute." },
});

Change the words

Every word in the box is a text option:

text: {
  modalTitle: "Found a problem?",
  modalSubtitle: "What were you trying to do?",
  placeholder: "I clicked Save and nothing happened",
  skipButton: "Just the vote",
  submitButton: "Send report",
},

The full list, with each default and script attribute, is on Text customization.