Localization

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

Note: Localization is currently in early-access-only mode. Ask us to join!

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 . Localization settings
  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). Create locale
  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. Localization settings

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:

Localization disabled

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.

Localization enabled

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 CSV 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:

Text translated

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.

Text formatting translation

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:

Text placeholder translation

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:

Image translation

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:

Video translation

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:

Element text

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:

Text changed

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.

Got questions? We're here for you!

The best way to get help is to
We usually reply within 5 minutes
You can also send an email to support@userflow.com
We usually reply within a few hours