timum

Localization

Customize BookingJs texts and languages: override default texts, insert variables, and add your own languages to the booking widget.

PRO feature:

Customize all BookingJs texts and add your own languages beyond the five default languages. Available in the Professional plans – View plans.

Overview

BookingJs supports five languages by default: German, English, French, Spanish, and Italian. You can customize all texts and add your own languages.

Setting the language

Set language
timum.init({
  ref: 'ihre-ressourcen-referenz',
  culture: 'de' // de, en, fr, es, it
});

// Or as a URL parameter
// ?culture=de

Automatic detection:

If not explicitly specified, the browser language is used.

Customizing texts

You don't need to redefine the entire localization object. Only specify the texts you want to change:

Override texts
timum.init({
  ref: 'ihre-ressourcen-referenz',
  localization: {
    de: {
      booked_successfully_header: 'Vielen Dank für Ihre Buchung!',
      booked_successfully_message: 'Wir haben Ihnen eine Bestätigung an {{mail}} gesendet.',
      book_button: 'Jetzt Termin buchen',
      product_selection_headline: 'Wählen Sie Ihre Terminart'
    },
    en: {
      booked_successfully_header: 'Thank you for your booking!',
      book_button: 'Book now'
    }
  }
});

Available localization keys

Resource selection

KeyDefault (DE)
resource_selection_headlineRessource wählen
product_selection_headlineTerminart wählen

Booking successful

KeyDefault (DE)
booked_successfully_headerTermin gebucht
booked_successfully_messageSie erhalten eine E-Mail mit den Termindetails an {{mail}}
requested_successfully_headerTermin angefragt
requested_successfully_messageSie erhalten eine E-Mail sobald der Termin bestätigt wurde.

Cancellation

KeyDefault (DE)
canceled_successfully_headerTermin storniert
cancel_buttonTermin stornieren
cancel_confirmation_questionMöchten Sie diesen Termin wirklich stornieren?

Form

KeyDefault (DE)
book_buttonTermin buchen
first_name_labelVorname
last_name_labelNachname
email_labelE-Mail
phone_labelTelefon
message_labelNachricht

Variables in texts

You can use variables with {{variableName}}:

Variables
localization: {
  de: {
    booked_successfully_message: 'Bestätigung an {{mail}} gesendet',
    appointment_for: 'Termin für {{productName}} am {{date}}',
    greeting: 'Hallo {{firstName}}'
  }
}

Adding a custom language

New language
timum.init({
  ref: 'ihre-ressourcen-referenz',
  culture: 'nl', // Dutch
  localization: {
    nl: {
      resource_selection_headline: 'Kies een resource',
      product_selection_headline: 'Kies een afspraaktype',
      booked_successfully_header: 'Afspraak geboekt',
      booked_successfully_message: 'U ontvangt een e-mail op {{mail}}',
      book_button: 'Boek nu',
      cancel_button: 'Annuleren',
      first_name_label: 'Voornaam',
      last_name_label: 'Achternaam',
      email_label: 'E-mail',
      phone_label: 'Telefoon',
      message_label: 'Bericht'
      // ... more keys
    }
  }
});

Custom Field Labels

Labels for custom form fields are also defined via localization:

Custom Field Labels
{
  fields: {
    companyName: {
      type: 'text',
      required: true
    }
  },
  localization: {
    de: {
      field_companyName_label: 'Firmenname',
      field_companyName_placeholder: 'Ihre Firma GmbH',
      field_companyName_error: 'Bitte geben Sie einen Firmennamen an'
    },
    en: {
      field_companyName_label: 'Company Name',
      field_companyName_placeholder: 'Your Company Inc.',
      field_companyName_error: 'Please enter a company name'
    }
  }
}

Related topics