Skip to content

Localization

Choose a buyer locale, override product copy, and understand language fallback and money formatting.

Updated View as Markdown

Buyer surfaces ship in 37 languages. Pass a locale when your application already knows the buyer’s language, or leave it out and let the SDK resolve it from the buyer’s browser.

buyer/localization.jsjs
const picker = new seatlayer.SeatPicker({
  container: "#picker",
  event: "ev_9f3a",
  publicKey: "pk_test_…",
  locale: "de-DE",
  messages: {
    "map.fromPrice": "ab {price}",
    "picker.holdSeatsAndCheckout": "Weiter zur Kasse",
  },
});

await picker.render();

For a public Platform event, use a publishable key that matches the event mode (pk_test_… for test or pk_live_… for live) and register the page’s exact Embed origin. The SDK obtains Public-only access directly and keeps the grant in memory, so your server does not mint a buyer token when the chart loads. For a login, presale, partner, or channel audience, replace publicKey with an async buyerAccessTokenProvider backed by your authenticated server; an explicit provider or token takes precedence.

Locale resolution

SeatLayer resolves language in this order:

  1. explicit locale;
  2. navigator.languages, in the buyer’s own priority order;
  3. English.

Tags match most-specific-first. es-MX uses Spanish and fr-CA uses French, and script subtags survive: zh-Hant-TW gets Traditional Chinese, not Simplified. Unsupported languages fall back to English.

English is compiled into the SDK. The other 36 load on demand — one small file, only for the language actually used — and render() resolves after it is ready. Adding languages does not grow the bundle every buyer downloads.

Override individual messages

messages is a sparse map layered over the active locale. Use it for white-label product language, not for rendering untrusted user input.

buyer/copy.jsjs
const messages = {
  "picker.continueToCheckout": "Confirm tickets",
  "picker.holdExpired":
    "Your reservation expired. Choose your seats again.",
  "picker.seatCount.one": "{count} ticket",
  "picker.seatCount.other": "{count} tickets",
};

Placeholders such as {count}, {price}, and {label} are interpolated by the SDK. If a key is absent, SeatLayer falls back to the selected locale, then English, then the key itself.

Plural keys carry one entry per CLDR category for the language you are overriding, which is not always .one and .other. English and German need two; Polish needs .one, .few, .many, .other; Arabic and Welsh need all six. Intl.PluralRules(locale).resolvedOptions().pluralCategories gives the exact set. A category you leave out falls back to .other, which parses fine and reads wrong.

Common keys

Key English purpose
map.aria Seating-map screen-reader instructions
map.seatsLeft Remaining inventory label
map.fromPrice Starting-price label
picker.holdSeatsAndCheckout Main hold and checkout action
picker.continueToCheckout Direct-booking action
picker.addMinutes One-tap hold extension
picker.holdExpired Expired-hold recovery
picker.seatTaken Concurrent-selection conflict
picker.ticketPrices Ticket-type filter heading
picker.hideLimitedView Limited-view accessibility filter
picker.toggleColorblindColors Colorblind-safe palette control
picker.yourSeats Selection summary
picker.total Buyer total
picker.seatCount.one / .other Quantity-aware seat count

Use the exported SDK types and current dictionary as the exact reference when maintaining a comprehensive custom translation.

Locale and currency

Locale changes number formatting, separator placement, dates, and plural rules. It does not convert prices or choose the order currency. Currency resolves independently from event/org data, the SDK fallback, and USD.

buyer/french-euros.jsjs
new seatlayer.SeatingChart({
  container: "#chart",
  event: "ev_9f3a",
  publicKey: "pk_test_…",
  locale: "fr",
  currency: "EUR", // fallback only when the event carries no currency
});

Localization review

  • Every explicit locale has a supported fallback.
  • Overrides preserve required placeholders.
  • Singular and plural actions read naturally.
  • Every plural category the language requires is present, not just two.
  • Long German and Finnish labels fit on a narrow screen.
  • Arabic, Hebrew and Persian render right-to-left inside your page.
  • Screen-reader instructions match the actual controls.
  • Price formatting is tested separately from the price source.

Continue to currency and pricing or the SeatingChart reference.

Navigation

Type to search…

↑↓ navigate↵ selectEsc close