Text Customization & Internationalization

Every string the embed shows is yours to replace. The defaults are English and deliberately bland, which is fine until your product has a voice, or an audience that doesn't read English.

The fourteen text properties

Nine of them are copy your users read. Five are accessible names that only a screen reader speaks:

Property	Default	Where It Appears
`tooltip`	(empty)	Hover text on buttons
`modalTitle`	"Thank you for your feedback!"	Modal header
`modalSubtitle`	"Would you like to add a message..."	Modal description
`placeholder`	"Optional: Tell us more about your experience..."	Textarea placeholder
`submitButton`	"Submit"	Primary action button
`skipButton`	"Skip"	Secondary action button
`confirmationTitle`	"Thank you!"	Heading on the success screen
`confirmationMessage`	"Your feedback has been received."	Body copy on the success screen
`confirmationClose`	"Close"	Dismiss button on the success screen
`positiveLabel`	"Thumbs up"	Accessible name, thumbs-up button
`negativeLabel`	"Thumbs down"	Accessible name, thumbs-down button
`recordLabel`	"Record"	Accessible name, record button
`dismissLabel`	"Dismiss"	Accessible name, hide button
`feedbackLabel`	"Feedback"	Accessible name for the one button in `singleButton` mode

The three confirmation* properties belong to the success screen shown after a message goes through. Set hideConfirmation: true and that screen never appears, so those three stop mattering.

Four voices, same nine strings

Casual and friendly

Consumer apps, where the embed should sound like a person:

Casual Voice

Friendly, conversational copy

Loading embed...

new QaidFeedback({
  endpoint: '/api/feedback',
  text: {
    tooltip: "Tell us what you think!",
    modalTitle: "You rock! 🎸",
    modalSubtitle: "Want to tell us more? We're all ears.",
    placeholder: "Share your thoughts, ideas, complaints—anything goes!",
    submitButton: "Send it!",
    skipButton: "Maybe later"
  }
});

"Submit" became "Send it!" and "Skip" became "Maybe later". Nothing in the flow changed. The reader just stopped being talked to by a form.

Professional and corporate

B2B software, where the same tone would read as flippant:

Professional Voice

Formal, business-appropriate copy

Loading embed...

new QaidFeedback({
  endpoint: '/api/feedback',
  text: {
    tooltip: "Provide feedback",
    modalTitle: "Feedback Received",
    modalSubtitle: "Additional context helps our product team prioritize improvements.",
    placeholder: "Please describe the issue or suggestion in detail...",
    submitButton: "Submit Feedback",
    skipButton: "Skip"
  }
});

Full sentences, no emoji. Naming the "product team" tells the reader where their message actually goes, which reassures more than any adjective would.

Gaming

Platforms where the surrounding UI already talks like this:

Gaming Voice

Fun, achievement-style copy

Loading embed...

new QaidFeedback({
  endpoint: '/api/feedback',
  colors: {
    positive: "#4ade80",
    negative: "#f87171"
  },
  text: {
    tooltip: "Rate this!",
    modalTitle: "Mission Complete! 🏆",
    modalSubtitle: "Drop some intel for the dev squad?",
    placeholder: "Got bugs? Feature requests? Easter egg ideas? Spill it!",
    submitButton: "TRANSMIT",
    skipButton: "SKIP"
  }
});

"Mission" and "transmit" work here because everything around them already reads that way. Dropped into a banking app they would read as a bug.

The same nine strings in other languages

Spanish (Latin America)

Español (Latinoamérica)

Spanish localization

Loading embed...

new QaidFeedback({
  endpoint: '/api/feedback',
  text: {
    tooltip: "Danos tu opinión",
    modalTitle: "¡Gracias por tu opinión!",
    modalSubtitle: "¿Te gustaría agregar un mensaje para ayudarnos a entender mejor?",
    placeholder: "Opcional: Cuéntanos más sobre tu experiencia...",
    submitButton: "Enviar",
    skipButton: "Omitir"
  }
});

Japanese

日本語

Japanese localization

Loading embed...

new QaidFeedback({
  endpoint: '/api/feedback',
  text: {
    tooltip: "フィードバックを送る",
    modalTitle: "ご意見ありがとうございます！",
    modalSubtitle: "詳細なメッセージを追加しますか？",
    placeholder: "任意：ご意見やご感想をお聞かせください...",
    submitButton: "送信",
    skipButton: "スキップ"
  }
});

German

Deutsch

German localization

Loading embed...

new QaidFeedback({
  endpoint: '/api/feedback',
  text: {
    tooltip: "Feedback geben",
    modalTitle: "Vielen Dank für Ihr Feedback!",
    modalSubtitle: "Möchten Sie eine Nachricht hinzufügen, um uns zu helfen, Ihr Feedback besser zu verstehen?",
    placeholder: "Optional: Erzählen Sie uns mehr über Ihre Erfahrung...",
    submitButton: "Absenden",
    skipButton: "Überspringen"
  }
});

Klingon (tlhIngan Hol)

And because somebody was always going to ask, Klingon in the pIqaD script:

tlhIngan Hol

Klingon localization (pIqaD script)

Loading embed...

// First, add the @font-face to your CSS:
// @font-face {
//   font-family: 'pIqaD';
//   src: url('/fonts/pIqaD-qolqoS.ttf') format('truetype');
// }

new QaidFeedback({
  endpoint: '/api/feedback',
  fontFamily: "pIqaD, sans-serif",
  colors: {
    positive: "#cc0000",
    negative: "#880000",
    marker: "#ff3333"
  },
  text: {
    tooltip: " ",        // QIn yIngeH (Send message)
    modalTitle: "",            // qatlho' (Thank you)
    modalSubtitle: "  ", // QIn DangeH DaneH'a'
    placeholder: " ...",       // lut yIja' (Tell the story)
    submitButton: "",                // ngeH (Send)
    skipButton: ""                   // mev (Stop)
  }
});

pIqaD sits in the Unicode Private Use Area (U+F8D0 to U+F8FF), so without the font your reader gets empty boxes. It ships under the SIL Open Font License.

Switching language at runtime

Keep each language in an object and hand the embed the one you want:

const translations = {
  en: {
    tooltip: "Send feedback",
    modalTitle: "Thank you for your feedback!",
    submitButton: "Submit",
    skipButton: "Skip"
  },
  es: {
    tooltip: "Enviar comentarios",
    modalTitle: "¡Gracias por tu opinión!",
    submitButton: "Enviar",
    skipButton: "Omitir"
  },
  // Add more languages...
};

// Get user's language
const userLang = navigator.language.split('-')[0];
const strings = translations[userLang] || translations.en;

// Initialize with localized text
new QaidFeedback({
  endpoint: '/api/feedback',
  text: {
    tooltip: strings.tooltip,
    modalTitle: strings.modalTitle,
    submitButton: strings.submitButton,
    skipButton: strings.skipButton
  }
});

Translating the visible copy and leaving the accessible names in English is the easy mistake. Do both.

Clear action labels

Accessibility-Optimized

Screen reader friendly labels

Loading embed...

new QaidFeedback({
  endpoint: '/api/feedback',
  text: {
    tooltip: "Open feedback form for this page",
    modalTitle: "Feedback form",
    modalSubtitle: "Optional: Add a written message to help us understand your feedback better",
    placeholder: "Type your message here. This field is optional.",
    submitButton: "Submit feedback",
    skipButton: "Close without submitting"
  }
});

"Open feedback form for this page" says where the button leads. "Feedback" only says what it is about. "Close without submitting" answers the question "Skip" leaves open, which is whether the message is about to be thrown away. And "This field is optional" in the placeholder saves somebody typing into a box they never had to fill.

The five *Label properties from the table are the ones nobody sees and everybody forgets. Set them in the same language as the rest.

Right-to-left languages

Arabic and Hebrew need no direction setting. Hand over the strings and the embed lays them out right to left:

العربية

Arabic localization (RTL)

Loading embed...

new QaidFeedback({
  endpoint: '/api/feedback',
  text: {
    tooltip: "أرسل ملاحظاتك",
    modalTitle: "!شكراً على ملاحظاتك",
    modalSubtitle: "هل تريد إضافة رسالة لمساعدتنا على فهم ملاحظاتك بشكل أفضل؟",
    placeholder: "اختياري: أخبرنا المزيد عن تجربتك...",
    submitButton: "إرسال",
    skipButton: "تخطي"
  }
});

What the Customizer gives you

Every string you set in the Customizer comes back in the generated snippet:

<script
  src="https://unpkg.com/@qaiddev/thumbs-embed/dist/embed.js"
  data-endpoint="/api/feedback"
  data-tooltip="Send feedback"
  data-modal-title="Thanks for your feedback!"
  data-placeholder="Tell us more..."
  data-submit-button="Submit"
  data-skip-button="Skip"
></script>

Or as an ES module:

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

new QaidFeedback({
  endpoint: '/api/feedback',
  text: {
    tooltip: 'Send feedback',
    modalTitle: 'Thanks for your feedback!',
    placeholder: 'Tell us more...',
    submitButton: 'Submit',
    skipButton: 'Skip'
  }
});

Writing the strings

Keep the modal text short, because nobody reads a modal they opened by accident. Start buttons with a verb. Use the same word for the same thing here as everywhere else in your product, so "feedback" doesn't turn into "comments" one screen later.

Then get a speaker of each language to read it back. Machine translation handles the modal subtitle fine and quietly ruins the button, which is the one string that has to be right.

Budget ten minutes per locale. Readers notice the result even when they could not tell you what changed.

The fourteen text properties

Four voices, same nine strings

Casual and friendly

Casual Voice

Professional and corporate

Professional Voice

Gaming

Gaming Voice

The same nine strings in other languages

Spanish (Latin America)

Español (Latinoamérica)

Japanese

日本語

German

Deutsch

Klingon (tlhIngan Hol)

tlhIngan Hol

Switching language at runtime

Copy a screen reader can use

Clear action labels

Accessibility-Optimized

Right-to-left languages

العربية

What the Customizer gives you

Writing the strings