Buyer surfaces ship with English, Spanish, German, and French. Pass a locale when your application already knows the buyer’s language, or allow the SDK to resolve it from the buyer’s saved choice and browser.
const picker = new seatlayer.SeatPicker({
container: "#picker",
event: "ev_9f3a",
locale: "de-DE",
messages: {
"map.fromPrice": "ab {price}",
"picker.holdSeats": "Weiter zur Kasse",
},
});
await picker.render();Locale resolution
SeatLayer resolves language in this order:
- explicit
locale; - the buyer’s stored language preference;
navigator.language;- English.
Regional BCP 47 tags resolve by base language, so es-MX uses Spanish and
fr-CA uses French. Unsupported languages fall back to English.
English is included with the main SDK. Other built-in language bundles load on
demand, and render() resolves after the selected language is ready.
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.
const messages = {
"picker.completeBooking": "Confirm tickets",
"picker.holdExpired":
"Your reservation expired. Choose your seats again.",
"picker.seats.one": "{count} ticket",
"picker.seats.other": "{count} tickets",
};Placeholders such as {count}, {price}, and {label} are interpolated by the
SDK. Pluralized strings use .one and .other variants. If a key is absent,
SeatLayer falls back to the selected locale, then English, then the key itself.
Common keys
| Key | English purpose |
|---|---|
map.aria |
Seating-map screen-reader instructions |
map.seatsLeft |
Remaining inventory label |
map.fromPrice |
Starting-price label |
picker.holdSeats |
Main hold and checkout action |
picker.completeBooking |
Direct-booking action |
picker.seatsHeld |
Hold countdown state |
picker.holdExpired |
Expired-hold recovery |
picker.seatTaken |
Concurrent-selection conflict |
picker.language |
Language selector label |
picker.zoomToFit |
Map navigation control |
picker.categories |
Category filter heading |
picker.accessibility |
Accessibility filter heading |
picker.colorblind |
Colorblind-safe palette control |
picker.yourSeats |
Selection summary |
picker.total |
Buyer total |
picker.bookButton.one / .other |
Quantity-aware final action |
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.
new seatlayer.SeatingChart({
container: "#chart",
event: "ev_9f3a",
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.
- Long German and French labels fit on a narrow screen.
- 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.