Translate a product tour

Updated May 22, 2026

If your product serves users in more than one language, you can provide translated versions of each tour step. Yaplet detects the visitor's browser locale and shows the matching translation — or falls back to your default language if no match is found.

How tour translation works

Each step in a tour can carry content in multiple languages. The step title and body are the only translatable parts — CSS selectors, step type, and button behaviour are shared across all languages (the same element is pointed to regardless of locale).

If a visitor's locale has no translation for a step, the step displays in your default language. The default is whatever you wrote first.

1. Open a step for translation

In the tour builder, open any step. At the top of the step editor you'll see a language selector showing your current language. Click Add language and choose the target language from the dropdown.

2. Write the translated content

With the new language selected, write the translated title and body for that step. The CSS selector and step type are greyed out — they can't be changed per language.

Repeat for every step in the tour. You don't have to translate every step — untranslated steps fall back to the default.

3. Verify coverage

Switch through languages in the step editor to confirm every step that needs translation has one. The tour builder shows a warning badge on steps that are missing a translation for a language you've added to at least one other step.

4. Preview in each language

Use the Preview button with the language selector set to your target language to walk through the translated tour and check layout — translated text is often longer than English, which can cause text to overflow the tooltip card on shorter steps.

What's next?

Once the tour is translated, set the trigger so it reaches the right people at the right moment: Trigger a tour by URL or event.

Did this article answer your question?