Chameleon supports any text for any language available within modern browsers.
However, Chameleon does not offer automatic translations of content -- we find most teams that need multi-lingual support already have an established process for generating translations that they adhere to.
To engage users with language-specific content, you can use our Localization feature that you can use to upload different translations for your Experiences.
Availability & Usage
🔐 Localization available for Enterprise plans
📍 Ready to use in Tours, Tooltips, Embeddables, Microsurveys, Launchers
⚙️ Available for content & media
📩 Contact: to discuss your plan needs
Video Overview
📺 Check out the video below to learn how to use Localization in Chameleon.
Can I show Experience content in different languages?
As Experience content is ever-changing and personal to each app, most teams have in-house processes that enable them to use various content translations in their communication.
👉 Looking for a translation tool? Google Translate might be the best option out there.
There are three ways to show an Experience with different content for different groups of people:
Chameleon Localization / Internationalization (i18n)
🧑💼 Admins can configure Localization (if Roles are enabled).
Internationalization / Localization / Translation are often used interchangeably but refer to the same goal - displaying product Experiences in different languages, to fit those of your users. Users who speak different languages will be more engaged with content in their preferred language.
You can leverage Localization in Chameleon to show Experiences in your users' preferred language. Download the content for one or multiple Experiences and upload a translated file. Then based on a property you specify (or their browser language) Chameleon Experiences will show the right language content to the right user.
👉 Here's how you can leverage Localization with Chameleon in your own product.
1. Set the language property & preferred Languages
Head over to the Localization page and pick the user variable that defines the correct language for your users. Depending on how you label this, you can find a 'language' property in the dropdown.
To make sure everything displays correctly, regardless of the user seeing your Experience, Chameleon uses the browser_langauge as a fallback property, in case your set property is missing for some users.
Next, you can pick the languages you want to show Chameleon Experiences in. From the dropdown, select the base language, or variants you'll want to use.
Once you do, you'll find them in the table below to know where they're used and manage them easily.
📩 If you can't find a specific Language Variant let us know about your use case, and we'll be in touch!
2. Downloading Translation files
Now that you're set up to deliver Experiences in multiple languages, you'll have to upload a translation of your Experiences to Chameleon.
Pick the Experience you want to translate from the Dashboard (i.e. Tours), select one or several Experiences, and from the Actions menu Download the Content (YML). This will save a file with all your Experience content, that you can edit to match your preferred language. 😊
👉 If you add videos to an Experience, you'll find a dedicated section in your YAML file to add a different URL.
You can also download the Translation files via REST API. Please see the developer docs for this.
3. Translating the Content
Open the resulting .yaml file and follow the included instructions to translate your content. For context, each Experience includes a preview.url where you can see the 'thing' you're translating. When your translations are complete upload your file on the Localization page in the Dashboard.
👉 To upload Translation files via REST API, please see the developer docs.
You'll see all your uploads in a table view with some useful information attached: the translated language, how many Experiences have been updated in this language, and when the translation was uploaded.
You can also download any previously uploaded file, and update your translation before leveraging the same one. 😉
This way, you can keep a good sync between your product updates and your guidance, ensuring inclusion and personalization for all users.
🖼️ You can also show different visuals to users based on their preferred language. To leverage Media Localization, you'll have to upload the different media files to Chameleon, along with your translations.
Simply replace the filename in your .yaml file with the exact name of the image and upload them both to Chameleon.
Media Localization works with:
4. Preview and Publish
Each Localized Experience can be previewed in the various languages you have translated into. From the Builder, you can pick from a dropdown the different languages you have added for that Experience. And the content will update to match.
Analytics, Reporting, and Data Exports
All data will continue to be reported as the default language (the content added directly to the Experience).
Data and analytics regarding Experiences (Tour Started, Survey Completed, etc.) will include a language property that will take the value of the currently "translated into" language for any translated Experiences. It will only be sent when the Experience is actually translated for your end-user.
Feedback & Reporting Issues
We'd love to hear your feedback on the workflow, visibility, and functionality of Translating Chameleon Experiences. You can reply directly to us on the email thread or Slack channel we have set up. 😉
Best practices
With every guidance opportunity, look out to ensure a unique user experience. Localization is one option that you'll have to implement with your users in mind.
For certain languages, extra spaces can give your translators more control over the final output; in these cases, you can add (non-breaking space) directly into the translated content. The below example will show as "Extra space needed".
Fallbacks and Alternative languages
Let's imagine that you've translated only es-ES and es.
For a user, the browser reports a language preference of
es-ESwhich matches exactly and thees-ESversion is displayed.For a different user, the browser reports
es-AR(Argentina), Chameleon will check for exactlyes-ARand, when it does not find a match, will try next to find a match for "just"eswithout the country code; it will find and display the es translations.For a different user, the browser reports
nl-BEand you have not translatednl-BEnornl, the default version will be displayed.
Ensure your Translations cover all preferences to delight your users!
💡 Learn about other ways to personalize your Experiences with Chameleon.
Creating separate Experiences
You can create multiple Experiences with different content and set the targeting such that it shows to users of that particular language. To do this:
💡 You can target based on default user attributes that we collect, such as Browser Language, or send your own user data to indicate the language of the user, and show the relevant Tour to them.
Defining user variables
Alternatively, you can create a single Experience but show different content based on the user. For this, you will need to:
Create your basic Experience
Define user variables for each piece of content, e.g.
{{tour1.step1.title}}and store these on each page of your app (you can find an example below).Use these variables within the Experience to dynamically populate the content based on the user
Structuring and storing translations for later use:
window.chmlnI18n = { /* Example global variable name */
welcome_tour: { /* Example tour name */
step1: {
title: "Welcome to the App!",
body: "Let's import your contact and save you $$$",
cta: "Ok let's go!"
},
step2: {
...
}
...
}
Embedding these translations in the Experience:
### {{global 'chmlnI18n.welcome_tour.step1.title'}}
{{global 'chmlnI18n.welcome_tour.step1.body'}}
📩 If you want to use this method and you're facing blockers, please email us to help.