Get the user's browser language

Providing a multi-lingual experience in conversational AI projects is a very common use case nowadays. However, there are various approaches of how one could implement this:

1. In the webchat, for instance, the Realtime Translation Transformer could be used for translating all messages automatically.
2. On the other hand, the Localization features could be used in order to provide different language versions of the virtual agent. In this case, the quality of the translation would be the highest since native speakers would provide the translated texts in, for example, Say Nodes.

In both scenarios, Cognigy.AI needs to be aware of the user's preferred language. Where the virtual agent could provide a first welcome message with language select quick replies, such as displayed below, this information could be sent to the virtual agent directly:

Send the preferred language to Cognigy.AI

Such as described in the Webchat Embedding documentation, the initWebchat() function provides a callback method. This callback consists of the so-called webchat object which can be used in order to send a message to the virtual agent. This means a so-called DATA_ONLY message can be sent which is not displayed in the chat window. Finally, this invisible message could notify the virtual agent about the preferred user language in the current web browser and switch the locale internally:

English: "Hello! I see that you would like to speak Spanish. Fine."

The only code that needs to be added to the initWebchat() callback method is the following:

 initWebchat(
 "https://endpoint-trial...").then((webchat) => {
   // Get browser language and send to Cognigy.AI
   const browserLanguage = navigator.language || navigator.userLanguage;

   webchat.sendMessage("", {
     language: browserLanguage
   });
});

As soon as the webchat is loaded, the user's browser language is stored as a constant:

const browserLanguage = navigator.language || navigator.userLanguage;

Afterward, this information is sent to Cognigy.AI via the webchat.sendMessage() method:

webchat.sendMessage("", {
  language: browserLanguage
});

In Cognigy.AI, this data information can be checked by using CognigyScript in order to switch the locale:

The language information is stored in

input.data.language

and will look such as

• de-DE
• en-US
• es-ES
• nl-NL
• and more ...