Internationalization

This section explains how to translate the Mambo widgets into other languages and customize their appearance.

Adding custom translations

To add a new language to the SDK, you must define a language object before initializing the SDK. The example below shows how to add Polish (pl) as a supported language:

JavaScript

// Initialise the Mambo JavaScript SDK
var mamboCallbacks = window.mamboCallbacks || [];
mamboCallbacks.unshift(function() {

  Mambo.lang.langs.pl = {
    widgetError: "There was a problem loading the widget",
    loading: "Loading...",
    or: "or",
    and: "and",
    of: "of",
    yes: "Yes",
    no: "No",
    you: "You",
    your: "Your",
    top: "Top",
    howTo: "How do I earn points?",
    giftTo: "Give a gift",
    balance: "balance",
    totPts: "Total points",
    level: "Level",
    noLevel: "Earn more points to unlock a level",
    undef: "Nothing to see here...",
    dfltHint: "",
    tweet: "Tweet",
    share: "Share",
    close: "Close",
    profile: "My Profile",
    viewProfile: "View My Profile",
    trophy: "Your rewards",
    expand: "Click to expand",
    showMore: "Show more",
    less: "Show less",
    tags: "Tags",
    flip: "Flip card",
    defaultLevelGroup: "All other levels",
    behaviours: "Behaviours",
    filterBy: "Filter By",
    search: "Type to search",
    noResults: "No results found",
    thiis: "This",
    use: "Use",
    tabs: {
      kpis: "KPIs",
      missions: "Missions",
      levels: "Levels",
      achievements: "Achievements",
      gifts: "Gifts",
      coupons: "Coupons",
      activities: "Summary"
    },
    reward: {
      person: "person",
      people: "people",
      gifted: "recognized you",
      locked: "Locked",
      unlockedOn: "Unlocked",
      notUnlocked: "Not yet unlocked",
      status: "Status",
      expired: "Expired",
      expiresIn: "Expires in",
      times: "times",
      only: "Only",
      toUnlock: "to unlock",
      timeBound: "Time-Bound",
      validFrom: "Valid from",
      validTo: "Valid until",
      summary: "Summary",
      currValid: "Currently valid",
      prize: "Prizes",
      missions: "rewards unlocked",
      achievements: "behaviours complete",
      levels: "targets complete",
      limited: "Limited series",
      left: "remaining",
      top: "All levels unlocked, well done!",
      tags: "Unlockable tags",
      completeAny: "Complete"
    },
    leaderboard: {
      day: "Day",
      week: "Week",
      month: "Month",
      all: "Overall",
      empty: "Earn some points and be number 1!",
      pointAbbrev: "pt",
      pointsAbbrev: "pts",
      updated: "Updated",
      rank: "My Rank"
    },
    activities: {
      widgetTitle: "Activities",
      badge: "{user} unlocked the {item} badge",
      level: "{user} reached level {item}",
      mission: "{user} completed the {item} mission",
      gift: "{user} sent {targetUser} the {item} badge",
      giftPts: "{user} gave {targetUser} some points",
      prebehaviour: "performed the behaviour",
      how: "How",
      earned: "Points Earned",
      type: "Type",
      when: "When",
      onepoint: "{point} was ",
      points: "points were",
      updated: "updated",
      setTo: "changed to",
      redeem: "redeemed",
      refund: "refunded",
      bounty: "awarded a bounty to"
    },
    social: {
      prebadge: "I unlocked the",
      prelevel: "I reached level",
      badge: "badge",
      level: "",
      coupon: "and I won a coupon"
    },
    coupon: {
      coupon: "Coupon",
      expires: "Expires in",
      ship: "FREE SHIPPING",
      off: "DISCOUNT",
      currency: "$",
      buy: "Buyable",
      available: "Available",
      used: "Used",
      expired: "Expired",
      expiredOn: "Expired on",
      usedOn: "Used on",
      use: "Use the code below when you checkout to get your discount.",
      useMulti: "You can use this code multiple times",
      useExp: "until it expires",
      toGet: "until you get",
      twoStepBuy: "Buy the coupon with points to reveal the discount code to use at checkout."
    },
    notifications: {
      unlocked: "You've unlocked",
      tags: "new tags",
      coupon: "a coupon",
      point: "Your points changed!",
      bounty: "You received a bounty!",
      gift: "You received a gift!",
      what: {
        reward: "Reward",
        behaviour: "Behaviour",
        kpi: "KPI"
      }
    },
    kpi: {
      completed: "{user} achieved the {kpi} {period} target",
      exceeded: "{user} exceeded the {kpi} {period} target",
      changed: "{user} made progress on the {kpi} {period} target",
      uncompleted: "Your KPI progress has been rolled back"
    },
    period: {
      daily: "daily",
      weekly: "weekly",
      monthly: "monthly",
      quarterly: "quarterly",
      yearly: "yearly"
    },
    toast: {
      gift: "has given you a gift",
      bounty: "has awarded you a bounty",
      point: "Your points have been",
      reason: "Reason"
    },
    gift: {
      title: "Send a Thank You",
      toWho: "Who's it for",
      forWhat: "What to give",
      why: "Tell them why",
      send: "Send",
      noUser: "Mr. No One Selected",
      addPts: "Add points",
      back: "Back to badges",
      have: "You have",
      howMany: "How many points do you want to send?",
      invalid: "Invalid number!",
      noPts: "There are no points available :-(",
      pickGift: "Select an accomplishment",
      pickPt: "Select a point",
      thanks: "Thank you!"
    },
    humanize: {
      thisWeek: "This week",
      today: "today",
      quarter: "quarter",
      ago: "ago",
      now: "just now",
      second: "second",
      seconds: "seconds",
      minute: "minute",
      minutes: "minutes",
      hour: "hour",
      hours: "hours",
      day: "day",
      days: "days",
      week: "week",
      weeks: "weeks",
      month: "month",
      months: "months",
      year: "year",
      years: "years",
      century: "century"
    }
  };

  Mambo.init({
    apiRoot: 'YOUR_DOMAIN_URL',
    key: 'YOUR_JAVASCRIPT_KEY',
    site: 'YOUR_SITE_URL',
    userUuid: '0001',
    lang: 'pl'
  });
});

// Load the Mambo JavaScript SDK Asynchronously here...

In the example above, we add Mambo.lang.langs.pl as the first statement in the mamboCallbacks array. The 'pl' represents the language abbreviation, which is then referenced in the Mambo.init() method to activate the language.

Note

The language object must be configured before calling the Mambo.init() function.

Note

The language object structure may change between releases. If you maintain a translation, check the documentation with each release to ensure you have the latest properties.

Visual customization

Beyond language customization, you can also modify the appearance of widgets through:

1. Theme selection: Choose from predefined color schemes by setting the theme option in Mambo.init():

JavaScript

Mambo.init({
  // other options...
  theme: 'blue' // Options: grey, blue, orange, yellow, red, green
});

2. CSS overrides: You can also apply custom CSS to override widget styling. Each widget has specific CSS classes that can be targeted for customization.

3. Position configuration: For elements like notifications, you can control their position on screen:

JavaScript

Mambo.init({
  // other options...
  notifications: {
    position: 'bottomright' // Options: bottomright, bottomleft, topright, topleft
  }
});

4. Custom templates: you can fully customise the rendering of the widgets by changing their underlying templates. For detailed information please refer to the templates.

By combining language translation and visual customization, you can ensure the gamification elements integrate seamlessly with your site's look and feel while providing a localized experience for your users.