Localizing a Flow into Multiple Languages

There are several ways to localize a flow. What method you use depends on the number of languages you use, the level of customization required, and your comfort with HTML.

Method 1: Create a Separate Flow Per Language

To begin, create your flow in a base language, including all design elements and targeting necessary. 

Then, clone the flow to create a copy for each language you'd like to target. Rename each copied flow based on the language you'll be entering, then edit each flow to change it to the specified language.

Finally, before publishing, add a targeting rule to limit the flow to display only for the appropriate language.

To make organization easier, it might be a good idea to create a specific Category on your flow dashboard to contain the language variations of your flow. You can then use the ••• icon on the category itself to publish or unpublish the group at once.

In order to make changes to this set of flows, you'll have to alter each flow individually. This is why we recommend this method only for a few translations at once; if it becomes unwieldy, continue to Method 2 and decide if it will work better for your needs.

Including or Excluding Dialects

For added power, you can choose to target just specific variations or dialects of a particular language. In the example above, we've targeted just Hong Kong Chinese. By searching "Chinese", you'll see all of the options Appcues allows you to target:

If you select the first option, "Chinese (all)", your targeting will include all of the Chinese dialects. To be specific, select just the ones you want. This goes the same for all other languages we offer (English, German, Spanish, etc.).

To target more than one dialectic, just click Add Another and choose the next dialect. Be sure to specify if this is ALL or ANY targeting. You may need to add a group if you have other targeting rules, in order to organize your language rules in one place.

Method 2: Use HTML Blocks for Different Languages in One Flow

This method is more advanced, but may help make creating and managing flows in multiple languages significantly easier.

To translate within one flow, create your flow normally, but for any text blocks, use the HTML component ( Advanced > HTML) instead of the Text component whenever you need to add localized text.

Within each HTML component, enter the following HTML as a template:

<div class="lang en-US en-AU en-GB">
    Show in English.
</div>

<div class="lang fr-FR fr-CA">
    Afficher en français.
</div>

<style type="text/css">
    /* Don't edit this part */
    .lang { display: none; }
    .lang.{{_lastBrowserLanguage}} { display: block; }
</style>

Change the template for your own needs, adding <div> blocks, entering the translated content inside, and specifying the language using the class="lang [locale code]" format as shown above.

For each language, only the blocks with the "class" attribute of the given language will be displayed. The ones not matching the current user's language will be hidden completely.

Note that you can use any HTML you like, as long as you affix the class "lang" as well as a class for the language under which the element should show up, for example: <h1 class="lang de-DE">Willkommen auf meiner Seite</h1> In that way, you can localize titles, paragraphs, links, and more. You may also choose to nest many elements inside one DIV for the given language to group all content for that language in one place.

Fallbacks

One limitation of this method is that there's no way to easily specify a fallback "default" content for languages that you do not specify in a block. For example, if I wanted to specify French and English and have all other languages default to English, that would be difficult.

The way around this is to include classes for all unused locale codes on the block you'd like to be the default. Although there will be many locale code classes on one element, it will still work and display for the remainder of languages.

Using Your Own Language Profile Attribute

If you don't use the default browser language to determine the user's language preference, this method will still work. Just send us the language code or specifier as a Profile Attribute when calling Appcues.identify() ( more information here), and use that profile attribute identifier in place of {{_lastBrowserLanguage}} in the code above.

Bonus

This method can work to quickly personalize content for any profile attribute with text values. As long as the profile attribute has a limited number of values, then you can specify which HTML blocks to show or hide based on those values. This is unsupported, but you can modify the CSS above to achieve it.

Feedback

We're always considering improvements to all parts of Appcues. If you have feedback on localization or translation capabilities, we'd love to hear from you. Just click Contact Us below!

Still need help? Contact Us Contact Us