Web Messenger Internationalization & Translation

The web messenger supports multiple languages so you can serve visitors around the world. You can translate key text elements — the title, subtitle, welcome message, welcome choices, attention getter, and composer placeholder — into any of the supported languages.

Widget Language Setting

The messenger has a Language setting on the Configure tab that controls the language for the widget's built-in UI text. The default is Auto, which detects the visitor's browser language and uses the closest available match.

You can also select a specific language to use for all visitors regardless of their browser settings. This is separate from translating your own custom text (title, welcome message, etc.), which is covered below.

How Translations Work

Each translatable field has a default value (what everyone sees by default) and optional translations for specific languages. When a visitor's browser language matches a translation you've provided, the messenger automatically displays the translated version.

For example, if your title is "Let's Chat!" and you add a Spanish translation of "Hablemos!", Spanish-speaking visitors will see "Hablemos!" while everyone else sees "Let's Chat!".

Translatable Fields

The following fields support translations:

Adding Translations

For Title, Subtitle, Attention Getter, and Composer Prompt

These fields all use the same translation interface:

1. Find the field in your bot settings.
2. Click the Edit translations link next to the field label.
3. In the translations modal, click Add Translation.
4. Select a language from the dropdown.
5. Enter the translated text.
6. Repeat for additional languages.
7. Click Done.

The link shows a count of existing translations (e.g., "Edit translations (3)") so you can see at a glance which fields have been translated.

For Welcome Message

1. On the main Configure tab, find the Welcome Message section.
2. Enter the default welcome text in the textarea.
3. Click Edit translations in the top-right of the section.
4. Add translations the same way — pick a language, enter text, click Done.

For Welcome Choice Labels

Each welcome choice button label can be independently translated:

1. Click on a welcome choice chip (or click Add Choice).
2. In the choice editor modal, click Label translations to expand the translations section.
3. Add a language and translated label for each language you support.
4. Click Save.

Example:

Supported Languages

The following languages are available in the translation dropdowns:

Setting Language Programmatically

If your website has its own language switcher, you can sync the messenger's language at runtime using the JavaScript API's setLocale() method:

// Set messenger to French
FlowXO.setLocale('fr');

This immediately switches all translated text to the French versions you've configured.

Example: Auto-detect from page language

document.addEventListener('flowxo:ready', function() {
  var pageLang = document.documentElement.lang;
  if (pageLang) {
    FlowXO.setLocale(pageLang);
  }
});

Example: Set language before the widget loads

<script>
  window.onFlowXOInit = function(connectionId) {
    return {
      config: {
        language: document.documentElement.lang || 'en'
      }
    };
  };
</script>
<script src="https://messenger.flowxo.com/loader.js"
        data-connection="YOUR_CONNECTION_TOKEN"
        async></script>

See Going Deeper with the JavaScript API for more details on setLocale() and other methods.

Tips

• You don't need to translate everything. The messenger will use the default value for any field that doesn't have a translation in the visitor's language. Start with the most visible text (title, welcome message) and add more over time.
• Welcome choice labels are independent. Each choice has its own set of translations, so you can translate some choices and leave others in the default language if they're universal (like brand names).
• Translation counts help you track coverage. The "(3)" next to "Edit translations" tells you how many languages are configured for that field, making it easy to spot gaps.
• Test your translations by running FlowXO.setLocale('es') in your browser console to switch between languages and verify everything looks right.

Next Steps

• Creating a Web Messenger — Getting started from scratch
• Customizing the Web Messenger — Colors, themes, and visual settings
• JavaScript API — setLocale() and other runtime controls
• Using Metadata — Identify users, pass custom data, and collect visitor information