Localisation

Localisation is the process of adapting a product or content to a specific locale or market. It is the process of translating software into different languages or adapting a product for a specific country or region.

Content vs Widget localisation

The widget supports 2 different kinds of localisation:

• Content localisation - These are the translations of the content of the inventory. This option is available only when the Content localisation module is active. This content is provided via api v4 and can be customised by the experience owner via the bookingkit administration interface.
• Widget localisation - These are the translations of the widget itself. This content is provided from the internal translation process and can be customised via the widget configuration

Available languages

• en-GB
• it-IT
• fr-FR
• es-ES
• de-DE
• cs-CZ
• nl-NL
• fi-FI
• da-DK
• nn-NO
• sv-SE
• el-GR
• ja-JP
• pl-PL
• pt-PT
• zh-CN

Widget language

The widget supports multiple languages. The language can be set via the widget configuration or will try to fallback the browser language settings. If a language is provided in the configuration, the widget will load the translations for the specified language. If translations are unavailable, the widget will default to the browser's language. If that is also not available, it will fallback to default (English). To provide a language to the widget, you can use the locale parameter in the widget configuration. The language parameter should be provided in the format language-COUNTRY (e.g. de-DE for german). The code for English (Great Britain) 'en-GB'. The prefix, 'en', is a language code following the ISO 639-1 standard. The suffix, 'GB', is a country code following the ISO 3166-1 Alpha-2 standard.

<bk-floating-widget
     data-locale="de-DE"
     ...

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

Overriding translations

The widget provides a way to override the default translations. This can be useful if you want to provide custom translations for the widget. The translations can be provided via the localisation parameter in the widget configuration. The translations should be provided as a key value pair where the key is the translation key and the value is the translation.

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

Available base translations and keys

🇬🇧 English (Great Britain) - en-GB

{
  "accessibility": {
    "checkout": {
      "loading": "loading please wait"
    }
  },
  "experienceBookNowWidget": {
    "trigger": {
      "label": "Book now",
      "testFlow": "This should be now translated in all languages"
    }
  },
  "floatingWidget": {
    "poweredBy": {
      "label": "Powered by"
    },
    "test": {
      "remove": "In this channel we receive webhooks when a translation gets updated. I will now try to trigger it from the ai translation, cross your fingers",
      "too": "Remove this too"
    },
    "trigger": {
      "label": "Book now"
    },
    "views": {
      "breadCrumb": {
        "back": "back"
      },
      "continue": {
        "label": "Continue"
      },
      "dateAndTimeSelection": {
        "afternoon": {
          "label": "Afternoon"
        },
        "date": {
          "label": "Date"
        },
        "days": {
          "label": "days"
        },
        "daysShortForm": {
          "label": "d"
        },
        "duration": {
          "label": "Duration"
        },
        "evening": {
          "label": "Evening"
        },
        "goBack": {
          "label": "back"
        },
        "hours": {
          "label": "hours"
        },
        "hoursShortForm": {
          "label": "h"
        },
        "messages": {
          "noSlots": "No slots available on the selected date"
        },
        "minuteShortForm": {
          "label": "min"
        },
        "morning": {
          "label": "Morning"
        },
        "noAppointmentsAvailable": {
          "label": "No appointments available at this date"
        },
        "noAvailability": {
          "label": "There is no availability for this experience on this date.",
          "upSell": {
            "otherExperience": {
              "label": "See other experiences"
            },
            "otherTimeSlots": {
              "label": "See other time slots:"
            }
          }
        },
        "noAvailabilityForDate": {
          "label": "No time slots available for {date}"
        },
        "noAvailabilityNever": {
          "label": "This experience has no availability in the near future. Please check back later."
        },
        "noSlotsAvailableTodayMessage": {
          "label": "This date is not available"
        },
        "noSlotsAvailableTomorrowMessage": {
          "label": "This date is not available"
        },
        "openingHours": {
          "label": "Opening Hours:",
          "lastEntry": "Last entry at {lastEntry}",
          "range": "Opens at {start} - Closes at {ends}"
        },
        "otherDate": {
          "label": "Other date"
        },
        "soldOutMessage": {
          "label": "This date is sold out"
        },
        "startingAt": {
          "label": "Starting at:"
        },
        "time": {
          "label": "Time"
        },
        "title": "Select Date and Time",
        "today": {
          "label": "Today"
        },
        "tomorrow": {
          "label": "Tomorrow"
        }
      },
      "modal": {
        "accessibility": {
          "close": "Close {pageTitle}",
          "label": "Ticket shop: {pageTitle}"
        }
      },
      "ticketShop": {
        "buy": "Buy",
        "buyTicket": "Buy Ticket",
        "buyVoucher": "Buy Voucher",
        "name": "Good morning",
        "openARequest": "Open a request",
        "temp": "Good morning",
        "title": "Ticket Shop"
      }
    }
  }
}

🇩🇪 German - de-DE

{
  "accessibility": {
    "checkout": {
      "loading": "Lädt… Bitte warten"
    }
  },
  "experienceBookNowWidget": {
    "trigger": {
      "label": "Jetzt buchen",
      "testFlow": "Dies sollte nun in alle Sprachen übersetzt werden"
    }
  },
  "floatingWidget": {
    "poweredBy": {
      "label": "Powered by"
    },
    "test": {
      "remove": "entfernen",
      "too": "Entfernen Sie auch dies"
    },
    "trigger": {
      "label": "Jetzt buchen"
    },
    "views": {
      "breadCrumb": {
        "back": "Zurück"
      },
      "continue": {
        "label": "Weiter"
      },
      "dateAndTimeSelection": {
        "afternoon": {
          "label": "Nachmittag"
        },
        "date": {
          "label": "Datum"
        },
        "days": {
          "label": "Tage"
        },
        "daysShortForm": {
          "label": "d"
        },
        "duration": {
          "label": "Dauer"
        },
        "evening": {
          "label": "'Nabend"
        },
        "goBack": {
          "label": "Zurück"
        },
        "hours": {
          "label": "Stunden"
        },
        "hoursShortForm": {
          "label": "h"
        },
        "messages": {
          "noSlots": "An diesem Datum ist leider nichts verfügbar"
        },
        "minuteShortForm": {
          "label": "min"
        },
        "morning": {
          "label": "Morgen"
        },
        "noAppointmentsAvailable": {
          "label": "Zu diesem Zeitpunkt ist leider nichts verfügbar"
        },
        "noAvailability": {
          "label": "An diesem Datum ist leider nichts verfügbar",
          "upSell": {
            "otherExperience": {
              "label": "Finde Alternativen"
            },
            "otherTimeSlots": {
              "label": "Alternative Termine:"
            }
          }
        },
        "noAvailabilityForDate": {
          "label": "Für {date} sind keine Zeitfenster verfügbar"
        },
        "noAvailabilityNever": {
          "label": "Dieses Erlebnis ist in naher Zukunft nicht verfügbar. Bitte schauen Sie später noch einmal vorbei."
        },
        "noSlotsAvailableTodayMessage": {
          "label": "Heute ist leider nichts verfügbar"
        },
        "noSlotsAvailableTomorrowMessage": {
          "label": "Morgen ist leider nichts verfügbar"
        },
        "openingHours": {
          "label": "Öffnungszeiten:",
          "lastEntry": "Letzter Einlaß um {lastEntry}",
          "range": "Öffnet um {start} - Schließt um {ends}"
        },
        "otherDate": {
          "label": "Später"
        },
        "soldOutMessage": {
          "label": "Dieser Termin ist ausverkauft"
        },
        "startingAt": {
          "label": "Ab:"
        },
        "time": {
          "label": "Zeit"
        },
        "title": "Wählen Sie Datum und Uhrzeit",
        "today": {
          "label": "Heute"
        },
        "tomorrow": {
          "label": "Morgen"
        }
      },
      "modal": {
        "accessibility": {
          "close": "Schließen {pageTitle}",
          "label": "Ticketshop: {pageTitle}"
        }
      },
      "ticketShop": {
        "buy": "Kaufen",
        "buyTicket": "Ticket kaufen",
        "buyVoucher": "Gutschein kaufen",
        "name": "Guten Morgen",
        "openARequest": "Eine Anfrage öffnen",
        "temp": "Guten Morgen",
        "title": "Ticketshop"
      }
    }
  }
}

🇪🇸 Spanish - es-ES

{
  "accessibility": {
    "checkout": {
      "loading": "Cargando, Por FAVOR ESPERE"
    }
  },
  "experienceBookNowWidget": {
    "trigger": {
      "label": "Reserve ahora",
      "testFlow": "Ahora debería traducirse a todos los idiomas"
    }
  },
  "floatingWidget": {
    "poweredBy": {
      "label": "Funciona con"
    },
    "test": {
      "remove": "Eliminar",
      "too": "Quita esto también"
    },
    "trigger": {
      "label": "Reserve ahora"
    },
    "views": {
      "breadCrumb": {
        "back": "Atrás"
      },
      "continue": {
        "label": "Continuar"
      },
      "dateAndTimeSelection": {
        "afternoon": {
          "label": "Tarde"
        },
        "date": {
          "label": "Fecha"
        },
        "days": {
          "label": "Días"
        },
        "daysShortForm": {
          "label": "d"
        },
        "duration": {
          "label": "Duración"
        },
        "evening": {
          "label": "Tarde-Noche"
        },
        "goBack": {
          "label": "Atrás"
        },
        "hours": {
          "label": "Horas"
        },
        "hoursShortForm": {
          "label": "h"
        },
        "messages": {
          "noSlots": "No hay franjas horarias disponibles en la fecha seleccionada"
        },
        "minuteShortForm": {
          "label": "min"
        },
        "morning": {
          "label": "Mañana"
        },
        "noAppointmentsAvailable": {
          "label": "No hay citas disponibles en esta fecha"
        },
        "noAvailability": {
          "label": "No hay disponibilidad para esta experiencia en esta fecha.",
          "upSell": {
            "otherExperience": {
              "label": "Ver otras experiencias"
            },
            "otherTimeSlots": {
              "label": "Ver otras franjas horarias:"
            }
          }
        },
        "noAvailabilityForDate": {
          "label": "No hay franjas horarias disponibles para {date}"
        },
        "noAvailabilityNever": {
          "label": "Esta experiencia no tiene disponibilidad en un futuro próximo. Por favor, vuelva a consultar más tarde."
        },
        "noSlotsAvailableTodayMessage": {
          "label": "Esta fecha no está disponible"
        },
        "noSlotsAvailableTomorrowMessage": {
          "label": "Esta fecha no está disponible"
        },
        "openingHours": {
          "label": "Horario:",
          "lastEntry": "Última entrada en {lastEntry}",
          "range": "Se abre en {start} - Se cierra en {ends}"
        },
        "otherDate": {
          "label": "Otra fecha"
        },
        "soldOutMessage": {
          "label": "Esta fecha está agotada"
        },
        "startingAt": {
          "label": "A partir de:"
        },
        "time": {
          "label": "Hora"
        },
        "title": "Seleccione la fecha y la hora",
        "today": {
          "label": "Hoy"
        },
        "tomorrow": {
          "label": "Mañana"
        }
      },
      "modal": {
        "accessibility": {
          "close": "Cerrar {pageTitle}",
          "label": "Tienda de entradas: {pageTitle}"
        }
      },
      "ticketShop": {
        "buy": "Comprar",
        "buyTicket": "Comprar Entrada",
        "buyVoucher": "Comprar cupón",
        "name": "Buenos días",
        "openARequest": "Abrir una solicitud",
        "temp": "Buenos días",
        "title": "Taquilla"
      }
    }
  }
}

🇫🇷 French - fr-FR

{
  "accessibility": {
    "checkout": {
      "loading": "Chargement Veuillez patienter"
    }
  },
  "experienceBookNowWidget": {
    "trigger": {
      "label": "Réservez maintenant",
      "testFlow": "Cela devrait maintenant être traduit dans toutes les langues"
    }
  },
  "floatingWidget": {
    "poweredBy": {
      "label": "Alimenté par"
    },
    "test": {
      "remove": "Retirer",
      "too": "Supprimez également ceci"
    },
    "trigger": {
      "label": "Réservez maintenant"
    },
    "views": {
      "breadCrumb": {
        "back": "Précédent"
      },
      "continue": {
        "label": "Continuer"
      },
      "dateAndTimeSelection": {
        "afternoon": {
          "label": "Après-midi"
        },
        "date": {
          "label": "Date"
        },
        "days": {
          "label": "jours"
        },
        "daysShortForm": {
          "label": "j"
        },
        "duration": {
          "label": "Durée"
        },
        "evening": {
          "label": "Soir"
        },
        "goBack": {
          "label": "Précédent"
        },
        "hours": {
          "label": "Heures"
        },
        "hoursShortForm": {
          "label": "h"
        },
        "messages": {
          "noSlots": "Aucun créneau disponible à la date sélectionnée"
        },
        "minuteShortForm": {
          "label": "min"
        },
        "morning": {
          "label": "Matin"
        },
        "noAppointmentsAvailable": {
          "label": "Aucun rendez-vous disponible à cette date"
        },
        "noAvailability": {
          "label": "Il n’y a pas de disponibilité pour cette expérience à cette date.",
          "upSell": {
            "otherExperience": {
              "label": "Voir d’autres expériences"
            },
            "otherTimeSlots": {
              "label": "Voir d’autres créneaux horaires :"
            }
          }
        },
        "noAvailabilityForDate": {
          "label": "Aucun créneau horaire disponible pour {date}"
        },
        "noAvailabilityNever": {
          "label": "Cette expérience n’a pas de disponibilité dans un avenir proche. Veuillez revenir plus tard."
        },
        "noSlotsAvailableTodayMessage": {
          "label": "Cette date n’est pas disponible"
        },
        "noSlotsAvailableTomorrowMessage": {
          "label": "Cette date n’est pas disponible"
        },
        "openingHours": {
          "label": "Heures d’ouverture:",
          "lastEntry": "Dernière entrée à {lastEntry}",
          "range": "S’ouvre à {start} - Ferme à {ends}"
        },
        "otherDate": {
          "label": "Autre date"
        },
        "soldOutMessage": {
          "label": "Cette date est épuisée"
        },
        "startingAt": {
          "label": "À partir de :"
        },
        "time": {
          "label": "Time"
        },
        "title": "Sélectionnez la date et l’heure",
        "today": {
          "label": "aujourd'hui"
        },
        "tomorrow": {
          "label": "Demain"
        }
      },
      "modal": {
        "accessibility": {
          "close": "Fermer {pageTitle}",
          "label": "Billetterie : {pageTitle}"
        }
      },
      "ticketShop": {
        "buy": "Acheter",
        "buyTicket": "Acheter un billet",
        "buyVoucher": "Acheter un bon d’achat",
        "name": "Bonjour",
        "openARequest": "Ouvrir une demande",
        "temp": "Bonjour",
        "title": "Billetterie"
      }
    }
  }
}

🇮🇹 Italian - it-IT

{
  "accessibility": {
    "checkout": {
      "loading": "Caricamento in corso, si prega di attendere"
    }
  },
  "experienceBookNowWidget": {
    "trigger": {
      "label": "Prenota ora",
      "testFlow": "Questo dovrebbe essere ora tradotto in tutte le lingue"
    }
  },
  "floatingWidget": {
    "poweredBy": {
      "label": "Promosso da"
    },
    "test": {
      "remove": "Funziona bene?",
      "too": "Rimuovi anche questo"
    },
    "trigger": {
      "label": "Prenota ora "
    },
    "views": {
      "breadCrumb": {
        "back": "Indietro"
      },
      "continue": {
        "label": "Continuare"
      },
      "dateAndTimeSelection": {
        "afternoon": {
          "label": "Pomeriggio"
        },
        "date": {
          "label": "Data"
        },
        "days": {
          "label": "Giorni"
        },
        "daysShortForm": {
          "label": "g"
        },
        "duration": {
          "label": "Durata"
        },
        "evening": {
          "label": "sera"
        },
        "goBack": {
          "label": "Indietro"
        },
        "hours": {
          "label": "Ore"
        },
        "hoursShortForm": {
          "label": "h"
        },
        "messages": {
          "noSlots": "Nessun posto disponibile nella data selezionata"
        },
        "minuteShortForm": {
          "label": "min"
        },
        "morning": {
          "label": "Mattina"
        },
        "noAppointmentsAvailable": {
          "label": "Nessun appuntamento disponibile in questa data"
        },
        "noAvailability": {
          "label": "Non c'è disponibilità per questa esperienza in questa data.",
          "upSell": {
            "otherExperience": {
              "label": "Vedi altre esperienze"
            },
            "otherTimeSlots": {
              "label": "Vedi altre fasce orarie:"
            }
          }
        },
        "noAvailabilityForDate": {
          "label": "Nessuna fascia oraria disponibile per {date}"
        },
        "noAvailabilityNever": {
          "label": "Questa esperienza non è disponibile nel prossimo futuro. Si prega di ricontrollare più tardi."
        },
        "noSlotsAvailableTodayMessage": {
          "label": "Questa data non è disponibile"
        },
        "noSlotsAvailableTomorrowMessage": {
          "label": "Questa data non è disponibile"
        },
        "openingHours": {
          "label": "Apertura:",
          "lastEntry": "Ultima voce a {lastEntry}",
          "range": "Apre alle {start} - Chiude alle {ends}"
        },
        "otherDate": {
          "label": "Altra data"
        },
        "soldOutMessage": {
          "label": "Questa data è esaurita"
        },
        "startingAt": {
          "label": "A partire da:"
        },
        "time": {
          "label": "Tempo"
        },
        "title": "Seleziona la data e l'ora",
        "today": {
          "label": "Oggi"
        },
        "tomorrow": {
          "label": "Domani"
        }
      },
      "modal": {
        "accessibility": {
          "close": "Chiudi {pageTitle}",
          "label": "Biglietteria: {pageTitle}"
        }
      },
      "ticketShop": {
        "buy": "Acquista",
        "buyTicket": "Acquista il biglietto",
        "buyVoucher": "Acquista il voucher",
        "name": "Buongiorno",
        "openARequest": "Apri una richiesta",
        "temp": "Buongiorno",
        "title": "Biglietteria"
      }
    }
  }
}