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:
json
1{
2 'en': {
3 message: {
4 launchbutton_aria_label: 'Open Chat',
5 launchbutton_aria_roledescription: 'Chat with a digital assistant',
6 chat_window_group_aria_label: 'Chat window',
7 header_minimize_button_aria_label: 'Minimize chat window',
8 header_minimize_button_title: 'Minimize chat window',
9 header_close_button_aria_label: 'Close chat window',
10 header_close_button_title: 'Close chat window',
11 chat_window_spinner_aria_valuetext: 'Waiting for response',
12 input_area_userinput_field_aria_label: 'Message input field',
13 input_area_userinput_field_placeholder: 'Please type here...',
14 input_area_send_button_aria_label: 'Send message',
15 input_area_send_button_title: 'Send message',
16 input_area_upload_button_aria_label: 'Upload File',
17 input_area_upload_button_title: 'Upload File',
18 input_area_asr_button_aria_label: "Automatic Speech Recognition",
19 input_area_asr_button_title: "ASR",
20 first_use_asr_system_message: "Listening in process, it will stop automatically. Click on the mic icon again to cancel.",
21 input_area_tts_button_aria_label: "Text-to-Speech",
22 input_area_tts_button_title: "TTS",
23 message_typing_indicator: 'Typing...',
24 preview_title_not_available: "Untitled",
25 preview_description_not_available: "No Description Available",
26 connection_error_retry_message: "There is a problem communicating with the server. Please wait.",
27 connection_error_final_message: "Could not establish connection to server. Please try again later."
28 }
29 }
30}
31The 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. |
| input_area_upload_button_aria_label | Text that is spoken by screen readers when the upload file button gets focus. |
| input_area_upload_button_title | Text that is shown when the mouse pointer hovers over the upload file button. |
| input_area_asr_button_aria_label | Text that is spoken by screen readers when the ASR button gets focus. |
| input_area_asr_button_title | Text that is shown when the mouse pointer hovers over the ASR button. |
| first_use_asr_system_message | System message that is displayed the first time a user clicks on the ASR button to warn that recording is in progress, that it will stop automatically when the user finishes speaking and that clicking on the ASR icon again will cancel the recording. |
| input_area_tts_button_aria_label | Text that is spoken by screen readers when the TTS button gets focus. |
| input_area_tts_button_title | Text that is shown when the mouse pointer hovers over the TTS button. |
| connection_error_retry_message | System message that will be displayed the first two times the front end attempts to connect to the server and fails, at a 5 second interval. |
| connection_error_final_message | System message that will be displayed after a third attempt to connect to the server has failed, right before it closes and eliminates the launcher button. |
| 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. |
| preview_title_not_available | This is the text that will be used in Link Preview messages if no title is available. |
| preview_description_not_available | This is the text that will be used in Link Preview messages if no description is available. |
Update template
To create a translation for Esperanto for example, you would update the template as follows (not all translations are included for brevity):
json
1{
2 : {
3 message: {
4 launchbutton_aria_label: 'Malfermu Babilejon',
5 launchbutton_aria_roledescription: 'Babili kun cifereca asistanto',
6 }
7 }
8}
9- 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 for__ru-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 language 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.
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):
groovy
1<!-- Teneo Web Chat start -->
2<div id="teneo-web-chat"></div>
3<script src="/path/to/teneo-web-chat.js"></script>
4<script>
5 window.onload = function () {
6 if (
7 window.TeneoWebChat &&
8 typeof window.TeneoWebChat.initialize === 'function'
9 ) {
10 var element = document.getElementById('teneo-web-chat');
11 const teneoProps = {
12 'teneoEngineUrl': 'https://some.teneo/engine-instance/',
13 ['customLocalizations' : { 'eo': { message: { launchbutton_aria_label: 'Malfermu Babilejon', launchbutton_aria_roledescription: 'Babili kun cifereca asistanto', } } },
14 'locale' : 'eo'
15 }
16 window.TeneoWebChat.initialize(element,teneoProps);
17 }
18 }
19</script>
20<!-- Teneo Web Chat end -->
21