Internationalization

The useLoyalty Widget supports 11 languages out of the box, with full translations for all UI elements.

Supported Languages

Code	Language
`en`	English (default)
`es`	Spanish
`fr`	French
`de`	German
`pt-BR`	Portuguese (Brazil)
`it`	Italian
`nl`	Dutch
`ja`	Japanese
`zh-CN`	Chinese (Simplified)
`ko`	Korean
`ar`	Arabic

Setting the Language

Pass the language code during initialization:

UseLoyaltyWidget.init({
  ...auth,
  language: 'es'  // Spanish
});

Auto-Detect User Language

Use the browser's language preference:

function getUserLanguage() {
  const browserLang = navigator.language.toLowerCase();

  const supportedLanguages = [
    'en', 'es', 'fr', 'de', 'pt-br',
    'it', 'nl', 'ja', 'zh-cn', 'ko', 'ar'
  ];

  // Exact match
  if (supportedLanguages.includes(browserLang)) {
    return browserLang;
  }

  // Match language without region (e.g., 'es-MX' -> 'es')
  const langCode = browserLang.split('-')[0];
  if (supportedLanguages.includes(langCode)) {
    return langCode;
  }

  return 'en'; // Fallback to English
}

UseLoyaltyWidget.init({
  ...auth,
  language: getUserLanguage()
});

Translation Categories

The widget has translations for these categories:

Common

{
  "common": {
    "loading": "Loading...",
    "error": "Something went wrong",
    "retry": "Retry",
    "close": "Close",
    "copy": "Copy",
    "copied": "Copied!",
    "share": "Share",
    "points": "points"
  }
}

Tabs

{
  "tabs": {
    "rewards": "Rewards",
    "quests": "Quests",
    "refer": "Refer"
  }
}

Profile

{
  "profile": {
    "points": "Points",
    "level": "Level",
    "streak": "Streak",
    "memberSince": "Member since"
  }
}

Rewards

{
  "rewards": {
    "claim": "Claim",
    "claimed": "Claimed",
    "cost": "{points} points",
    "outOfStock": "Out of stock",
    "requiresLevel": "Requires level {level}",
    "maxClaimed": "Maximum claimed",
    "claimSuccess": "Reward claimed!",
    "insufficientPoints": "Not enough points"
  }
}

Quests / Games

{
  "quests": {
    "play": "Play",
    "played": "Played",
    "spinTheWheel": "Spin the Wheel",
    "dailyCheckin": "Daily Check-in",
    "checkIn": "Check In",
    "checkedIn": "Checked In",
    "streak": "{days} day streak",
    "spinning": "Spinning...",
    "youWon": "You won {prize}!",
    "cooldown": "Available in {time}",
    "maxPlays": "Max plays reached"
  }
}

Referrals

{
  "referrals": {
    "inviteFriends": "Invite Friends",
    "yourCode": "Your referral code",
    "shareLink": "Share your link",
    "friendBonus": "Your friends get {points} points",
    "youEarn": "You earn {points} points",
    "referred": "Referred",
    "pending": "Pending",
    "converted": "Converted",
    "totalEarned": "Total earned"
  }
}

{
  "social": {
    "shareOn": "Share on {platform}",
    "earnPoints": "Earn {points} points",
    "cooldownActive": "Share again in {time}",
    "dailyLimitReached": "Daily limit reached",
    "shareSuccess": "Shared! +{points} points"
  }
}

Badges

{
  "badges": {
    "earned": "Earned",
    "available": "Available",
    "rarity": {
      "common": "Common",
      "uncommon": "Uncommon",
      "rare": "Rare",
      "epic": "Epic",
      "legendary": "Legendary"
    }
  }
}

Multipliers

{
  "multipliers": {
    "active": "Active Bonus",
    "multiplier": "{value}x points",
    "endsIn": "Ends in {time}"
  }
}

{
  "promo": {
    "placeholder": "Enter promo code",
    "apply": "Apply",
    "invalid": "Invalid code",
    "expired": "Code expired",
    "used": "Already used",
    "success": "Code applied! +{points} points"
  }
}

RTL Support

Arabic language automatically enables right-to-left text direction:

UseLoyaltyWidget.init({
  ...auth,
  language: 'ar'  // Enables RTL layout
});

The widget applies appropriate CSS for RTL:

[dir="rtl"] .gw-root {
  direction: rtl;
  text-align: right;
}

Translation Examples

English

"Claim reward" → "Claim"
"500 points" → "500 points"
"Level 5" → "Level 5"
"Daily Check-in" → "Daily Check-in"

Spanish

"Claim reward" → "Canjear"
"500 points" → "500 puntos"
"Level 5" → "Nivel 5"
"Daily Check-in" → "Registro Diario"

French

"Claim reward" → "Réclamer"
"500 points" → "500 points"
"Level 5" → "Niveau 5"
"Daily Check-in" → "Connexion Quotidienne"

German

"Claim reward" → "Einlösen"
"500 points" → "500 Punkte"
"Level 5" → "Stufe 5"
"Daily Check-in" → "Täglicher Check-in"

Japanese

"Claim reward" → "受け取る"
"500 points" → "500 ポイント"
"Level 5" → "レベル 5"
"Daily Check-in" → "デイリーチェックイン"

Chinese (Simplified)

"Claim reward" → "领取"
"500 points" → "500 积分"
"Level 5" → "等级 5"
"Daily Check-in" → "每日签到"

Arabic

"Claim reward" → "استلام"
"500 points" → "500 نقطة"
"Level 5" → "المستوى 5"
"Daily Check-in" → "تسجيل الدخول اليومي"

Dynamic Language Switching

Change the widget language without reinitializing:

// Initial setup
const widget = UseLoyaltyWidget.init({
  ...auth,
  language: 'en'
});

// Switch language
function changeLanguage(newLang) {
  UseLoyaltyWidget.destroy();
  UseLoyaltyWidget.init({
    ...auth,
    language: newLang
  });
}

// Usage
document.querySelector('#lang-es').onclick = () => changeLanguage('es');
document.querySelector('#lang-fr').onclick = () => changeLanguage('fr');

Syncing with App Language

Keep widget language in sync with your app:

// React example with context
function App() {
  const { language } = useLanguage();

  useEffect(() => {
    if (window.UseLoyaltyWidget) {
      // Reinitialize with new language
      UseLoyaltyWidget.destroy();
      UseLoyaltyWidget.init({
        ...auth,
        language: language
      });
    }
  }, [language]);

  return <YourApp />;
}

Fallback Behavior

If a translation key is missing, the widget falls back to English:

Translation found: Display translated text
Translation missing: Display English text

This ensures the widget always displays readable content even if translations are incomplete.

Internationalization

On this page