Text Customization & Internationalization

How the box behaves is on The feedback message box. Options other than words are in one table.

Every string

All sixteen sit inside text, as in text: { modalTitle: "…" }.

Key	Default	Where it shows	Script attribute
tooltip	“Feedback for us?”	Beside a button on hover	data-tooltip
modalTitle	“Thank you for your feedback!”	Heading of the message box	data-modal-title
modalSubtitle	“Would you like to add a message to help us understand your feedback better?”	Line under the heading, and the text field’s spoken name	data-modal-subtitle
placeholder	“Optional: Tell us more about your experience…”	Inside the empty text field	data-placeholder
skipButton	“Skip”	The box’s one button, while the field is empty	data-skip-button
submitButton	“Submit”	The same button, once something is typed	data-submit-button
confirmationTitle	“Thank you!”	Heading of the thank-you screen	data-confirmation-title
confirmationMessage	“Your feedback has been received.”	Line under it	data-confirmation-message
confirmationClose	“Close”	Its button, and the error screen’s	data-confirmation-close
errorTitle	“Message not sent”	Heading of the error screen, shown when the message is refused or lost	data-error-title
errorMessage	“Something went wrong, so we did not get your message. Please try again later.”	Line under it	data-error-message
positiveLabel	“Send positive feedback”	Spoken name of the thumbs-up button	none
negativeLabel	“Send negative feedback”	Spoken name of the thumbs-down button	none
recordLabel	“Record a screen recording”	Spoken name of the record button	none
dismissLabel	“Hide Feedback”	Spoken name of the ×, and its hover tip	none
feedbackLabel	“Send feedback”	Spoken name of the single button in singleButton mode	data-feedback-label

The two error strings need thumbs-embed 1.8.0 or later, as does the plain-text rule below.

An empty string is kept as it is: modalTitle: "" gives an empty heading. The one exception is tooltip, which falls back to “Feedback for us?”.

The Customize page’s Text Labels section sets the first six; see The Embed Customizer.

Change the words

<script
  src="https://unpkg.com/@qaiddev/thumbs-embed/dist/embed.js"
  defer
  data-api-key="YOUR_PROJECT_KEY"
  data-endpoint="https://qaid.dev/api/feedback"
  data-modal-title="Got a second?"
  data-placeholder="What would make this page better?"
  data-submit-button="Send"
></script>

In JavaScript, the same three go in text: { modalTitle, placeholder, submitButton }. Keys you leave out keep their defaults.

Translate the widget

Set all sixteen, so no English is left on the screen or in a screen reader:

The same sixteen, in French, on a shop page:

Set the spoken labels from a script tag

Screen readers read positiveLabel, negativeLabel, recordLabel and dismissLabel aloud. Set them on the tag like any other text (thumbs-embed 1.9.0 or later):

<script
  src="https://unpkg.com/@qaiddev/thumbs-embed/dist/embed.js"
  defer
  data-api-key="YOUR_PROJECT_KEY"
  data-endpoint="https://qaid.dev/api/feedback"
  data-positive-label="Enviar opinión positiva"
  data-negative-label="Enviar opinión negativa"
  data-record-label="Grabar la pantalla"
  data-dismiss-label="Ocultar opiniones"
></script>

Pick the language when the page loads

The words are read once, when the widget starts, and nothing changes them later. Choose the set first:

const strings = {
  es: { modalTitle: "¡Gracias por tu opinión!", skipButton: "Omitir", submitButton: "Enviar" },
  de: { modalTitle: "Danke für dein Feedback!", skipButton: "Überspringen", submitButton: "Senden" },
};
const lang = document.documentElement.lang.slice(0, 2);

const feedback = new QaidFeedback({
  endpoint: "https://qaid.dev/api/feedback",
  apiKey: "YOUR_PROJECT_KEY",
  text: strings[lang] ?? {},
});

To switch language while the page is open, call feedback.destroy() and create the widget again with the new strings.

Right-to-left pages

The widget has no direction setting of its own. It takes the direction of your page, so with dir="rtl" on <html> the button row and the box read right to left. Set it there rather than on an inner element.

Write strings as plain text

Every string shows exactly as written. A <, an & or a straight quote needs no escaping, and HTML tags show as text. Only the icon options take markup.

Know which text stays English

No option reaches this text. It is English on every site:

Where	Text
The vote badge in the message box	Its spoken name “Feedback type: positive” or “negative”, and its hover tip “Click to switch”
Spoken status messages	“Feedback sent”, “Failed to send feedback”, “Screenshot captured”, “Targeting …”
Video recording	“Click sensitive areas to blur”, “Start recording”, “Cancel”, “Stop”, “Review your recording”, “Send”, “Re-record”, “Sending…”, the upload errors such as “Your recording could not be sent.”, and the spoken countdown
The screenshot markup editor	“Annotate screenshot”, the tool names, “Undo last”, “Skip annotation”, “Done” and the colour names

If your site is not in English, turn off what you can: annotate: false skips the editor, and leaving captureVideo off removes the video flow.