Introducing Localization

Translate your workflows and make them accessible to a global audience.

Ondrej Pesicka • June 9, 2025 • 2 min read

Does your product support multiple languages? Then there's one more reason to use Flows.

Today we are launching localization support in Flows! You can now translate all user-facing content, whether it's a string, boolean, number, or select. Here's how it works:

1. Send language in Flows SDK

Both React and Javascript SDKs now support sending the language as a parameter when initializing Flows in your application. This lets Flows know which language to serve to your users.

For example, if you want to serve the French version of your workflow, you can initialize Flows like this:

1import { FlowsProvider } from "@flows/react";
2
3const App = () => {
4  return (
5    <FlowsProvider
6      organizationId="your-organization-id"
7      environment="production"
8      userId="your-user-id"
9      components={{}}
10      tourComponents={{}}
11      language="fr" // Specify the language code
12    >
13      {/* Your app code here */}
14    </FlowsProvider>
15  );
16};

1import { FlowsProvider } from "@flows/react";
2
3const App = () => {
4  return (
5    <FlowsProvider
6      organizationId="your-organization-id"
7      environment="production"
8      userId="your-user-id"
9      components={{}}
10      tourComponents={{}}
11      language="fr" // Specify the language code
12    >
13      {/* Your app code here */}
14    </FlowsProvider>
15  );
16};

In JavaScript SDK, you can do it as follows:

1import { init } from "@flows/js";
2
3init({
4  organizationId: "your-organization-id",
5  environment: "production",
6  userId: "your-user-id"
7  language: "fr", // Specify the language code
8})

1import { init } from "@flows/js";
2
3init({
4  organizationId: "your-organization-id",
5  environment: "production",
6  userId: "your-user-id"
7  language: "fr", // Specify the language code
8})

The SDKs also support automatic language detection based on the user's browser settings. Learn more about the SDK configuration in the React or JavaScript documentation.

2. Create language groups

In your organization settings, you then need to create language groups. Language groups allow you to manage translations for similar languages, such as en-US and en-GB, or fr-FR and fr-CA.

This lets you manage one shared translation across similar locales, reducing duplicate translations and making it easier to maintain your workflows.

3. Translate your workflows

Once language groups are set up, head over to the workflow editor. Each block now includes a language switcher that lets you toggle between languages and edit the content for each one.

Simply switch the language, update the content, and repeat for other language groups or blocks as needed.

Try it out today

Localization is available now for all Flows organizations, no payment or upgrade is required. Start translating your workflows today and let us know what you think!

For more details, check out our localization documentation.