Multilingual

The Smart Agent can be displayed in several languages. This section explains how to declare the available languages and how to change the displayed language from your own interface.

info

Multilingual behaviour only applies to multilingual bots. The list of languages your bot actually supports is configured in Smart Dashboard by your Account Manager.

Configuration

Two init options control the languages of the Smart Agent:

• locale — the language displayed when the Smart Agent starts.
• availableLocales — the list of languages you allow the Smart Agent to switch to.

<script type="text/javascript">
  window.addEventListener('STSmartBotLoaded', function (e) {
    e.detail.init({
      botId: 'xxx',
      locale: 'fr',
      availableLocales: ['fr', 'en'],
    });
  });
</script>
<script
  type="text/javascript"
  async
  src="https://assets.app.smart-tribune.com/smart-tribune/SmartBot/smartbot.main.js"
></script>

Variables list

Variable	Type	Condition	Example	Description
locale	string	required	locale: "fr"	Language displayed when the Smart Agent starts. It must be one of the values listed in availableLocales.
availableLocales	string[]	optional	availableLocales: ["fr","en"]	List of languages you allow the Smart Agent to switch to. If omitted, it defaults to [locale]. The active locale must be part of this list.

caution

The match between locale and availableLocales is exact — no normalization is performed. "fr" and "fr_FR" are considered two different languages, so make sure both options use the same notation.

Changing the language

Trigger the language change from your own interface (for example a language selector that already exists on your website) by calling the setLocale() function exposed on the Smart Agent API object.

From a...	Description
button	Just call the setLocale() function with the target language code.

<button onclick="window.stSmartBot.setLocale('en')">English</button>
<button onclick="window.stSmartBot.setLocale('fr')">Français</button>

To make setLocale() reachable from outside the loading script (on a button, for example), store the API object on window as a global variable:

<script type="text/javascript">
  window.addEventListener('STSmartBotLoaded', function (e) {
    window.stSmartBot = e.detail;
    window.stSmartBot.init({
      botId: 'xxx',
      locale: 'fr',
      availableLocales: ['fr', 'en'],
    });
  });
</script>
<script
  type="text/javascript"
  async
  src="https://assets.app.smart-tribune.com/smart-tribune/SmartBot/smartbot.main.js"
></script>

note

setLocale() is ignored (and a warning is logged in the console) when:

• the requested language is not part of availableLocales, or
• the requested language is already the active one.

Behaviour on language switch

Calling setLocale() resets the current conversation. The dialogue restarts from the beginning in the newly selected language, so messages from two different languages are never mixed in the same conversation.

caution

Inform your visitors that changing the language restarts the conversation, so they do not lose track of an ongoing exchange unexpectedly.

Events

STSmartBotLocaleChanged

Dispatched on window every time the language is successfully changed via setLocale(). Its detail contains the new language code.

<script type="text/javascript">
  window.addEventListener('STSmartBotLocaleChanged', function (e) {
    console.log('Smart Agent language changed to:', e.detail.locale);
  });
</script>

Property	Type	Description
detail.locale	string	The newly selected language.