How to Enable Auto-Toggle for Multi-Language

Last Updated March 17, 2023

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. 

🎓 Digital Adoption Institute

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

  1. 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>
    
  2. 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 use window.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)
  3. 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.
  4. 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 ''
      }
      

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

  1. Copy your completed code;
  2. Open the head tag for your site;
  3. 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.

General best practices

  • For regular, non-single page applications
    • The language function should be declared prior to the WalkMe snippet on each page
    • Do not set walkme_get_language() on the login page
  • For Single Page Applications
    • Use the WalkMeAPI.changeLanguage() on the main window

Was this article helpful?

Thanks for your feedback!
×

Select account type

Close
< Back

Mobile account login

< Back