Qaid
ARTICLE

Text Customization & Internationalization

Customize every text label in the Qaid feedback flow. Learn to support multiple languages and create locale-specific experiences.

Qaid Team

The Qaid feedback embed speaks to your users at multiple touchpoints: tooltips, modal titles, buttons, and more. Every piece of text can be customized to match your brand voice, support multiple languages, or improve accessibility. Let’s explore how to make the embed feel native to any audience.

Text Labels You Can Customize

Qaid exposes six text properties:

PropertyDefaultWhere 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

Brand Voice Examples

Casual & Friendly

For consumer apps that want a conversational tone:

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"
  }
});

Emojis, contractions, and exclamation points create warmth. Notice how “Submit” becomes “Send it!” and “Skip” becomes “Maybe later”—more human, less robotic.

Professional & Corporate

For B2B software and enterprise applications:

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"
  }
});

More formal language, full sentences, and no emojis convey professionalism. Specific terminology like “product team” and “prioritize improvements” conveys professionalism.

Playful Gaming Style

For gaming platforms and entertainment sites:

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"
  }
});

Gaming vernacular (“mission,” “transmit”) combined with caps and emojis creates an immersive experience that matches gaming UI conventions.

International Examples

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)

For the true sci-fi experience, here’s Klingon using 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)
  }
});

The pIqaD script uses Unicode Private Use Area characters (U+F8D0-F8FF) and requires the pIqaD font to display correctly. The font is available under the SIL Open Font License.

Implementing Multi-Language Support

Here’s a pattern for dynamic language switching:

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
  }
});

Accessibility-First Copy

Good localization also means good accessibility. Consider these principles:

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"
  }
});

Key accessibility improvements:

  • Explicit action descriptions: “Open feedback form” vs just “Feedback”
  • Keyboard navigation hints: Mention Tab, Enter, Escape
  • Clear button purposes: “Close without submitting” vs just “Skip”
  • Field descriptions: “This field is optional” removes ambiguity

Right-to-Left Languages

For Arabic, Hebrew, and other RTL languages, Qaid automatically handles text direction. Just provide your translated strings:

العربية

Arabic localization (RTL)

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

Code Generation

When using the Customizer, all text customizations are included in the generated code:

<script
  src="https://unpkg.com/@qaiddev/thumbs-embed"
  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 using the ES Module approach:

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'
  }
});

Best Practices Summary

  1. Match your brand voice across all touchpoints
  2. Keep it concise—users skim, especially modal text
  3. Use action verbs for buttons (Submit, Send, Skip)
  4. Test with real users in each target language
  5. Consider accessibility from the start
  6. Be consistent with terminology throughout your app

Text customization transforms the Qaid embed from a generic tool into a seamless extension of your product. Every word is an opportunity to reinforce your brand and guide users toward providing valuable feedback.

Back to all articles