Custom localizations

The Teneo Web Chat UI is localized in over 15 languages (see the locale configuration setting for the list of supported locales). If you want to use Teneo Web Chat in a language that is not supported out of the box or if you want to override existing labels and texts, you can use the customLocalizations configuration setting.

Template

You can use the following template as a basis for your translation:

{
  'en': {
    message: {
      launchbutton_aria_label: 'Open Chat',
      launchbutton_aria_roledescription: 'Chat with a digital assistant',
      chat_window_group_aria_label: 'Chat window',
      header_minimize_button_aria_label: 'Minimize chat window',
      header_minimize_button_title: 'Minimize chat window',
      header_close_button_aria_label: 'Close chat window',
      header_close_button_title: 'Close chat window',
      chat_window_spinner_aria_valuetext: 'Waiting for response',
      input_area_userinput_field_aria_label: 'Message input field',
      input_area_userinput_field_placeholder: 'Please type here...',
      input_area_send_button_aria_label: 'Send message',
      input_area_send_button_title: 'Send message',
      message_typing_indicator: 'Typing...'
    }
  }
}

The texts are used in the following ways:

Key Description
launchbutton_aria_label Text that is spoken by screen readers when launch button gets focus.
launchbutton_aria_roledescription Additional text that is spoken by screen readers when launch button gets focus.
chat_window_group_aria_label Text that is spoken by screen readers the first time any element inside the chat window gets focus.
header_minimize_button_aria_label Text that is spoken by screen readers when minimize button in the chat window header gets focus.
header_minimize_button_title Text that is shown when the mouse pointer hovers over the minimize button. Note: if this value differs from the header_minimize_button_aria_label, screen readers will read both.
header_close_button_aria_label Text that is spoken by screen readers when close button in the chat window header gets focus.
header_close_button_title Tet that is shown when the mouse pointer hovers over the close button. Note: if this value differs from the header_close_button_aria_label, screen readers will read both.
chat_window_spinner_aria_valuetext Teneo Web Chat can show a 'spinner' to indicate it is waiting for a response from engine. This is the text that spoken by screen readers if the spinner gets keyboard focus.
input_area_userinput_field_aria_label Text that is spoken by screen readers when the user input field gets focus.
input_area_userinput_field_placeholder Placeholder text shown in the user input field. Text is also spoken by screen readers when user input field gets focus.
input_area_send_button_aria_label Text that is spoken by screen readers when the send button gets focus.
input_area_send_button_title Text that is shown when the mouse pointer hovers over the send button. Note: if this value differs from the input_area_send_button_aria_labell, screen readers will read both.
message_typing_indicator This is the text that is spoken by screen readers when a typing indicator message is added to the chat history or when a typing indicator message gets focus. See: typing indicators.

Update template

To create a translation for Esperanto for example, you would update the template as follows (not all translations are included for brevity):

{
  'eo': {
    message: {
      launchbutton_aria_label: 'Malfermu Babilejon',
      launchbutton_aria_roledescription: 'Babili kun cifereca asistanto',
    }
  }
}
  • Use the ISO 639-1 langauge code for the locale.
    • You can also provide country specific locales, like ru-MD. In that case Teneo Web Chat will first try to see if there are translations available forru-MD. If not found it will try to find a translation for ru and if that isn't found it will fall back to using English.
  • If you provide a language code for a new language for which no fallback language exists, you should translate all strings in the template. Values that are not translated will fall back to English.
  • If you provide a langauge code for an already existing language, your custom localized strings will override the existing ones. You then only need to provide the values you want to update.

Update the Teneo Web Chat configuration settings

Once you've created your translation, you will need to include them in the configuration settings in the Teneo Web Chat embed code using the customLocalizations property. In addition to that you need to tell Teneo Web Chat to use your language, by providing the locale property.

Using the above example, the changes would look like this (not all translations are included for brevity):

<!-- Teneo Web Chat start -->
<div id="teneo-web-chat"></div>
<script src="/path/to/teneo-web-chat.js"></script>
<script>
  window.onload = function () {
    if (
      window.TeneoWebChat &&
        typeof window.TeneoWebChat.initialize === 'function'
    ) {
      var element = document.getElementById('teneo-web-chat');
      const teneoProps = {
        'teneoEngineUrl': 'https://some.teneo/engine-instance/',
        'customLocalizations' : {
          'eo': {
            message: {
              launchbutton_aria_label: 'Malfermu Babilejon',
              launchbutton_aria_roledescription: 'Babili kun cifereca asistanto',
            }
          }
        },
        'locale' : 'eo'
      }
      window.TeneoWebChat.initialize(element,teneoProps);
    }
  }
</script>
<!-- Teneo Web Chat end -->

Was this page helpful?