Localization

Userflow supports content in multiple languages. With Localization, you can build your content once, and then translate just the bits that vary from language to language or region to region.

As you are the one providing the translations, we support translating content into all languages. Thus if you see a locale (language) missing from the list, then reach out to our support.

• About locales
• Add your locales
• Set users’ locale code
• Enabling users to see translated content
• Right-to-left (RTL) languages
• Translating content
• Translating text with formatting
• Translating text with placeholders
• Translating images
• Translating videos
• Translating element text
• Editing existing translations
• Editing the original content
• Export and import

About locales

A locale (pronounced “low·kal”) is a combination of a user’s language and region. English is a language. English (US) is a locale.

Your Userflow account contains a list of locales. These are the locales that you’ll be able to translate your content into. Notice that your subscription plan may have a limit on how many locales your account supports. If you need more, simply upgrade.

One of these locales will be your company’s default locale. If your company is primarily English-speaking, this could be English (US).

Each piece of content (e.g. a flow) has a base locale, which indicates the language the content is built in. New content defaults to using the default locale. To keep things simple, we recommend building all content in the same base locale.

A piece of content can be translated by providing translations from the base locale to each of the other locales.

Add your locales

Let’s set up Localization for your account! We’ll start by creating all the locales you’re going to use.

1. Go to Settings → Localization
2. Click New locale.
3. Select the locale you want to add. Optionally adjust the Name and Code. The name is only used internally for your own purpose. The code is the value your Userflow.js installation must use (we’ll get to that below).
4. Repeat Steps 2-3 for each additional locale you want.
5. The list will now show all your locales. You can optionally pick another default locale using the three-dot buttons in the list.

Set users’ locale code

Next, make sure your Userflow.js installation informs Userflow of the current user’s locale.

By default this involves sending a locale_code attribute in your userflow.identify() call.

Where you get the user’s locale from is up to you. Some apps may have it stored in the database. Other apps may rely on the user’s browser language. Make sure to use the same logic for getting the locale as the rest of your app does. It’s important that Userflow content shows up in the same locale as your own app uses.

Example:

userflow.identify(user.id, {
  name: user.name,
  email: user.email,
  // MUST match one of your Userflow locales' code EXACTLY!
  locale_code: user.localeCode
})

If a user’s locale is not set or points to an unknown locale code, the user will be regarded as having no locale and will see content in the base locale only.

Enabling users to see translated content

Once you’ve added your locales, a new Localization tab will appear next to the Builder.

Until you enable it, content (e.g. a flow) may only show for users of the base locale. If a user is registered with a different locale, the content will not show up at all.

Switch on the Enabled toggle to allow users to see the content in this locale:

The flow is now enabled for this locale. Just like with regular content changes, nothing goes live to real users until you publish the changes. You’ll also want to make sure to translate the content before publishing.

Right-to-left (RTL) languages

Userflow supports right-to-left languages, such as Arabic and Hebrew, out-of-the-box.

Translating content

Next, you’ll want to translate all the text. In this guide, we’ll do it directly in the Userflow UI. You can also export and import translation files and share them with translators who don’t have access to your Userflow account.

The red warning triangles next to each input field indicates that the translation is missing. If a translation is missing for an enabled locale, Userflow will fall back to using the base locale text.

Once you fill in a translation, it will be auto-saved, and the icon turns into a green checkmark:

Go through and translate all the texts. Remember to publish changes before real users can see the translations.

Some types of content, such as images, have more advanced options. In the following sections, we’ll go over each kind.

Translating text with formatting

When your text contains formatting (e.g. bold text), Userflow intelligently extracts the text and wraps up the formatting in simple HTML-like tags.

This makes it easy for translators to understand the whole sentence, without having to translate each individual segment out of context.

Note that the HTML tags don’t necessarily correspond to real HTML. They refer to the actual formatting used in the paragraph, and Userflow will merge the translation into the same formatting when it’s displayed to users. This means, you can’t use any tag names (e.g. <b>) other than the exact ones you see in the original text.

Translating text with placeholders

When your text contains rich content elements such as a user attribute, Userflow replaces them in the translation text wrapped in curly braces:

Make sure to use the exact same word between the curly braces. You can’t use any words between the curly braces other than the exact ones you see in the original text.

Translating images

Images may or may not need to be translated. When Userflow encounters an image in your content, it’ll look like this on the Localization page:

If the image is a pure graphic with no text, you can simply click Use original.

If the image contains text in the base locale, you’ll probably want to pick another image for the locale you’re translating to. Click Upload image to upload an image from your computer, or click Enter URL to point to an image you have hosted somewhere on the Internet.

Translating videos

When you insert videos in your content, you enter e.g. a YouTube URL. Under Localization, it’ll show up like a regular text field containing the video URL:

You can either enter another video URL to use a localized version of the video or just use the same value.

Translating element text

When you select elements (e.g. for a tooltip to point to), Userflow may use the text of the element to target it.

If Userflow chooses to use the text, and you don’t check the Dynamic text checkbox in the builder, the text of the element will need to be translated:

Important: The translated text you enter must match the text in your UI exactly! In the screenshot above, a “Projects” menu item has been selected in the English version of our app. If that same menu item is called “Projekter” in the Danish version of our app, we must write “Projekter” exactly for Userflow to be able to find the element.

Alternatively, you can click Use dynamic text, which makes Userflow find the element without relying on the text. This has the same effect as when you check Dynamic text in the builder.

In any case, we highly recommend testing the complete flow in the given locale before publishing it, to make sure that all elements are found correctly.

Editing existing translations

You can edit existing translations at any point. Simply change whatever you’d like and re-publish.

Editing the original content

You are free to edit the original content whenever and however you want.

If you change any text in the original content, Userflow will detect this change and reflect it on the Localization page with a yellow warning triangle:

In this screenshot, notice how an extra sentence has been added to the first text. Simply adjust the translation to fix it, and the icon will turn back into a green checkmark.

If you were to publish the changed original content without fixing the outdated translation, the old translation will keep being shown to users.

Export and import

You can export translation files from Userflow to let translators without Userflow access translate for you.

To export, click the Export button on the Localization tab under a flow. Once you receive the translation files back from your translators, you can import them through the Import button on the same page.

We support the following formats:

• CSV: Great if your translators do not use a translation platform. Your translators can simply open the CSV file in a spreadsheet editor and fill in the translations.
• XLIFF: A well-supported XML standard that is supported by almost every translation platform. If you use such a translation platform, this is probably the easiest format to use.

The exported files contain the original texts in the base locale. This way, we can track if the original text changes in Userflow between exporting and importing.