Qaid AID.DEV
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, banners, 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 eight text properties:

PropertyDefaultWhere It Appears
tooltip(empty)Hover text on buttons
bannerText”Click on any element to target it with your feedback”Top banner during targeting mode
bannerHint”(Press Escape to cancel)“Secondary text in banner
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 FeedbackEmbed({
  endpoint: '/api/feedback',
  text: {
    tooltip: "Tell us what you think!",
    bannerText: "Tap anything on the page to share your thoughts",
    bannerHint: "(or press Esc to go back)",
    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 FeedbackEmbed({
  endpoint: '/api/feedback',
  text: {
    tooltip: "Provide feedback",
    bannerText: "Select an interface element to include in your feedback",
    bannerHint: "Press Escape to cancel selection",
    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. “Your feedback” becomes more specific: “interface element,” “product team,” “prioritize improvements.”

Playful Gaming Style

For gaming platforms and entertainment sites:

Gaming Voice

Fun, achievement-style copy

Loading embed...
 
new FeedbackEmbed({
  endpoint: '/api/feedback',
  colors: {
    positive: "#4ade80",
    negative: "#f87171"
  },
  text: {
    tooltip: "Rate this!",
    bannerText: "🎯 TARGET ACQUIRED: Select your objective",
    bannerHint: "[ESC] to abort mission",
    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,” “target,” “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 FeedbackEmbed({
  endpoint: '/api/feedback',
  text: {
    tooltip: "Danos tu opinión",
    bannerText: "Haz clic en cualquier elemento para incluirlo en tu comentario",
    bannerHint: "(Presiona Escape para cancelar)",
    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 FeedbackEmbed({
  endpoint: '/api/feedback',
  text: {
    tooltip: "フィードバックを送る",
    bannerText: "フィードバックに含める要素をクリックしてください",
    bannerHint: "（Escキーでキャンセル）",
    modalTitle: "ご意見ありがとうございます！",
    modalSubtitle: "詳細なメッセージを追加しますか？",
    placeholder: "任意：ご意見やご感想をお聞かせください...",
    submitButton: "送信",
    skipButton: "スキップ"
  }
});

German

Deutsch

German localization

Loading embed...
 
new FeedbackEmbed({
  endpoint: '/api/feedback',
  text: {
    tooltip: "Feedback geben",
    bannerText: "Klicken Sie auf ein Element, um es in Ihr Feedback einzubeziehen",
    bannerHint: "(Drücken Sie Escape zum Abbrechen)",
    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 FeedbackEmbed({
  endpoint: '/api/feedback',
  fontFamily: "pIqaD, sans-serif",
  colors: {
    positive: "#cc0000",
    negative: "#880000",
    marker: "#ff3333"
  },
  text: {
    tooltip: " ",        // QIn yIngeH (Send message)
    bannerText: " ",     // Dochvam yIwIv (Select this)
    bannerHint: " ",     // mevmeH yI'um (Press to stop)
    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",
    bannerText: "Click any element to target it",
    modalTitle: "Thank you for your feedback!",
    submitButton: "Submit",
    skipButton: "Skip"
  },
  es: {
    tooltip: "Enviar comentarios",
    bannerText: "Haz clic en cualquier elemento",
    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 FeedbackEmbed({
  endpoint: '/api/feedback',
  text: {
    tooltip: strings.tooltip,
    bannerText: strings.bannerText,
    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 FeedbackEmbed({
  endpoint: '/api/feedback',
  text: {
    tooltip: "Open feedback form for this page",
    bannerText: "Use Tab to navigate to elements. Press Enter to select an element for your feedback.",
    bannerHint: "Press Escape to cancel and return to normal browsing",
    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 FeedbackEmbed({
  endpoint: '/api/feedback',
  text: {
    tooltip: "أرسل ملاحظاتك",
    bannerText: "انقر على أي عنصر لإضافته إلى ملاحظاتك",
    bannerHint: "(اضغط Escape للإلغاء)",
    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/@bjsm/qaid"
  data-endpoint="/api/feedback"
  data-tooltip="Send feedback"
  data-banner-text="Click any element to target"
  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 { FeedbackEmbed } from '@bjsm/qaid';

new FeedbackEmbed({
  endpoint: '/api/feedback',
  text: {
    tooltip: 'Send feedback',
    bannerText: 'Click any element to target',
    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