How to localize your content

Before we jump into localization itself, it's important to understand how we detect the current language.

Set up supported languages

First, go to the Workspace settings (click on the Workspace name in the bottom left dropdown and then General settings) and find the Supported languages section. Add all the languages you want supported in Product Fruits. This should match the languages supported by your application (unless for any reason you're wanting to support fewer languages in Product Fruits than in your application).

Once you've saved the settings, every Product Fruits tool should display a dropdown with these languages. When you switch the language in the dropdown, you can edit and localize the content for that language.

How do we detect the language of the user?

We don't detect the user's language; you will need to pass this information to us. In the Product Fruits code snippet, there is a language parameter, which is where you will need to pass us the current language of the user. This way, we will know which localized version to display. You can read more on this in the installation guide. Please ensure that the language code that you set matches the content that your onboarding content is written in, otherwise you will encounter blank content. Please note that in applications where the user has the ability to change the language, window.productFruits.services.destroy() should be called to destroy the initialized instance of Product Fruits before it's reinitialized in the new language.

Tours and hints

You can translate any cards to different languages by switching the language dropdown in the editor. Currently, we don't support fallbacks to a default language.

You may want to display different tours/hints for different languages or restrict the tours/hints to certain languages. You can use the Display for settings in the tour/hints detail for this. Select Rules -> add condition -> Language, and select the desired language.

Default button text

It's also possible to set the default text of buttons for different languages. You can do this by clicking the gear ⚙️ icon in the editor next to Preview, and navigating to Default texts. Select your language from the dropdown menu and input your translations.

Changing the language on a new tour card or hint will now account for these settings, but existing tour and hint cards will be unaffected. See here for a good way to edit preexisting content in bulk.

Right-to-left (RTL) support

We support RTL natively in our tools. By default, we will inherit RTL settings from your application. If your application sets dir="rtl" attribute on the <html> or <body> element, we will read this and display all Product Fruits content in RTL alignment.

We also support RTL in our knowledge base. If you edit your article in an RTL language, the editor will automatically switch to the RTL layout.

XLSX Import/Export

To translate many tour and hint cards at once, you can use the XLSX import/export feature. This is not enabled by default, so you will need to message or email us to activate this for you.


Once it's enabled, you can go to the administration page for a particular tour or hint group. You can then click the three dots in the top right corner of the page and select 'Import/export'.


This will open a menu to select which language to export the content in and then (assuming you've already made the translations) which language you're importing. Be sure that you've already added the languages you wish to add content to in the workspace settings menu or else they won't appear here on the dropdown (see the top of this article).