Brief Overview
The Auto-Toggle method is the recommended way to implement WalkMe Multi-Language on your website or platform. This method involves WalkMe detecting a language variable on your website to determine which language WalkMe text should appear in.
The steps below take you through implementing Auto-Toggle.
For any additional questions, or if you do not control the underlying code of your site but would like the language of your WalkMe content to change with your site language, please reach out to your Customer Success Manager or WalkMe contact to discuss possible options.
Steps to Enable Auto-Toggle
1. Find Your Language Variable
On external websites, you should implement the JavaScript function walkme_get_language on your website, and this function will return the Language Short Name(s) you specified in the insights.walkme.com ACCOUNT tab during the initial language setup.
Note: The Short Name can only contain alphanumeric characters (letters and numbers) and hyphens. (See this article for more details).
In order to implement the walkme_get_language function, you must first have a language variable at the window level that detects the end-user’s language. Ask your IT team for the following:
- Language Variable Name
- Language Variable Outputs
2. Create Your Multi-Language Code
- Copy the following code to a Text Editor. Text in bold should be replaced with your own values;
<script type="text/javascript"> window.walkme_get_language = function (){ if (window.langCode) { if (window.langCode == 'EN') { return ''; } else if (window.langCode == 'FR') { return 'FR'; } else { return '' } } } </script>
- Start by changing the language variable name (in the example above its
window.langCode
), to the language variable name your IT team created (we will usewindow.langvar
as our IT team’s variable name throughout this example). The result looks like this:
<script type="text/javascript">
window.walkme_get_language = function (){
if (window.langvar) - Define your default language:
Where the example above says this:if (window.langCode == 'EN') { return ''; }
change it to this:
if (window.langvar == 'EN') { return '';
- Change the variable output for default language. EN is our default language in this example;
- The return function should be left blank for the default language or be the Language Short Name found in the insights.walkme.com ACCOUNT tab.
- Add alternate languages:
- Repeat the process above (for EN in this case) with each alternative language you wish to translate to;
For our example, we’ll add ‘FR’ as our alternate language. This would appear as follows:else if (window.langvar == 'FR') { return 'FR'; } else { return '' }
- Repeat the process above (for EN in this case) with each alternative language you wish to translate to;
Your final result should look like this:
<script type="text/javascript">
window.walkme_get_language = function (){
if (window.langvar)
{
if (window.langvar == 'EN') {
return '';
}
else if (window.langvar == 'FR') {
return 'FR';
}
else {
return ''
}
}
}
</script>
3. Add The Multi-Language Code to Your Website
- Copy your completed code;
- Open the head tag for your site;
- Paste the Multi-Language code on every page.
In order to function correctly, Multi-Language code must be placed in the head tag of every page on which WalkMe will appear.