Skip to main content
All CollectionsIntegrating seats.io
Translating embedded floor plans (I18N)
Translating embedded floor plans (I18N)

About multi-language and Internationalisation (i18n) support, supported languages and how to make use of them

Ben Verbeken avatar
Written by Ben Verbeken
Updated over a week ago

Our users come from all over the globe, and so naturally English isn’t necessarily the language used by all of our users.

Seats gives you a flexible way to internationalise (i18n) your floor plan, making it easy to translate a seating chart, and display it to your users in their language.

Note: this article only applies to floor plans embedded using the seats.io renderer, i.e. typically the floor plans you present to your ticket buyers to select their seats.
For more information on how to translate Event Manager, our box office and admin tool, check this article.

Rendering in your language

Seats has built-in support for over 30 languages. To render a floor plan in your language, simply pass in a “language” config parameter, like so:

new seatsio.SeatingChart({
    ...,    
    "language": "fr"
}).render();


The currently supported languages are:

  • “ar”: Arabic

  • “be”: Belarusian

  • “bg”: Bulgarian

  • “ca”: Catalan

  • “cs”: Czech

  • "cy": Welsh

  • “da”: Danish

  • “de”: German

  • “el”: Greek

  • “en”: English

  • “es”: Spanish

  • “et”: Estonian

  • "fa": Persian (Farsi)

  • “fi”: Finnish

  • “fr”: French

  • “hr”: Croatian

  • “he”: Hebrew

  • “hu”: Hungarian

  • “it”: Italian

  • "ja": Japanese

  • "ku": Kurdish

  • “li”: Lithuanian

  • “lv”: Latvian

  • “no”: Norwegian

  • “nl”: Dutch

  • “pl”: Polish

  • “pt”: Portuguese

  • “ro”: Romanian

  • “ru”: Russian

  • “sk”: Slovak

  • “sl”: Slovenian

  • “sr”: Serbian

  • “sv”: Swedish

  • “tr”: Turkish

  • “uk”: Ukrainian

  • “zh-Hans”: Simplified Chinese

  • “zh-Hant”: Traditional Chinese

If your language is not in this list, please feel free to send us translations for the built-in texts mentioned above, we’ll be happy to add them for you.

Built-in texts

Built-in texts are texts that Seats provides by itself. For example texts like the ones in the tooltips that get shown when a ticket buyer hovers over a seat or a section.

You can override individual built-in texts, using the key (e.g. unavailableSeat) with the messages config parameter.

These are the built-in texts, with their translation in English:

'notAvailable': 'Not available',
'notEnoughPlacesAvailable': 'Not enough places available',
'sectionAvailability.none': 'No seats available',
'selected': 'selected',
'noOrphanSeats': 'Please leave no empty seats',
'noSocialDistancingOrphanSeats': 'Please start picking seats from the sides',
'maxSelectionReached': "You can't choose any more places",
'maxSelectionReachedWithNumber': "You can't choose more than %a places",
'notEnoughPlacesToSelectLeft': 'You can only choose %a more places',
'singlePlaceToSelectLeft': 'You can only choose 1 more place',
'deselectOthersFirst': 'Deselect other places first',
'available.places': 'available places',
'x.places': '%a places',
'x.to.y.places': '%a-%b places',
'available.seats': 'available seats',
'choosePriceLevel': 'Please choose',
'choosePriceLevels': 'Please choose a ticket type for your %a places',
'singleTicketAvailableInSection': '1 ticket at [b]%a[/b]',
'multipleTicketsAvailableInSection': '%a tickets from [b]%b[/b]',
'ticketsAvailableFrom': 'Tickets from [b]%a[/b]',
'selectQuantity': 'Select quantity',
'close': 'Close',
'done': 'Done',
'renderingFailed': 'The seating chart could not be loaded',
'clickToSelect': 'Click to select',
'clickToSelectPlaces': 'Click to select %a places',
'clickToDeselect': 'Click to deselect',
'clickToDeselectPlaces': 'Click to deselect %a places',
'row': 'Row',
'seat': 'Seat',
'seats': 'Seats',
'chair': 'Chair',
'bench': 'Bench',
'table': 'Table',
'section': 'Section',
'restrictedView': 'Restricted view',
'accessible': 'Accessible',
'companionSeat': 'Companion seat',
'disabledBySocialDistancing': 'Empty for social distancing',
'willBeDisabledBySocialDistancing': 'Will stay empty for social distancing',
'sessionExpired': 'Your session has expired',
'sessionExpiredAllPlacesReleased': 'All selected places have been released',
'sessionExpiredStartOver': 'Start over',
'useMetaKeyToZoom': 'Use %a + scroll to zoom in',
'couch': 'Couch',
'bar': 'Bar',
'select': 'Select',
'deselect': 'Deselect',
'noLongerAvailable': 'No longer available',
'pickCategory': 'Choose a category',
'and': 'and',
'selectMorePlaces': 'Select %a more',
'confirm': 'Confirm',
'cancel': 'Cancel',
'chooseTickets': 'Please choose your tickets',
'openFullScreen': 'Open full screen',
'closeFullScreen': 'Close full screen',
'stool': 'Stool',
'unavailablePlace': 'This place is no longer available',
'selectionToolsHintDeselect': 'Hold %a to deselect.',
'select-rectangle': 'Rectangular selection',
'select-lasso': 'Lasso selection',
'holdFailedModalBodyBecauseNetworkIssue': 'Your selection could not be reserved because of network issues. Please try again later.',
'holdFailedModalBodyBecauseBadRequest': 'Your selection could not be reserved. Please refresh the page and try again.',
'holdFailedModalBodyBecauseOther': 'Your selection could not be reserved. Please try again.',
'holdReleaseFailedModalBodyBecauseNetworkIssue': 'Could not cancel your reservation because of network issues. Please try again later.',
'holdReleaseFailedModalBodyBecauseBadRequest': 'Your reservation could not be cancelled. Please refresh the page and try again.',
'holdReleaseFailedModalBodyBecauseOther': 'Your reservation could not be cancelled. Please try again.',
'clickToFilterCategories': 'Click to filter categories',
'tapToFilterCategories': 'Tap to filter categories',
'moreExtraCategories': 'and %a more'

Translating dynamic labels and texts

Besides the built-in texts, other texts can be translated as well: 

  • static text you add on your floor plan while you're designing it

  • category labels

  • ... 

To translate these dynamic, you need to pass in a messages config variable, like so:

new seatsio.SeatingChart({
    ...,
    "messages": {
        "STAGE": "Podium",
        "ORGAN": "Orgue"
    }
}).render();


Please note: the keys in the messages object are cAsE sEnSiTivE!

Recap

  1. set the language  config param to translate built-in texts.

  2. use a messages  array to translate your own labels and texts.

Did this answer your question?