Configuring Multi-Language

Objective

After completing this lesson, you will be able to explore the various methods of configuring Multi-Language.

Manual Toggle

The Manual Toggle is the default Multi-Language language-selection method for your users, allowing them to select a language from the drop-down menu in the top right of the Player Menu.

Once a user switches the language, WalkMe remembers this information using a cookie in the browser. Now, whenever the Player Menu is opened, text will appear in the language previously selected by the user.

Watch the video to know more. Note that the video doesn't support audio.

The Manual Toggle will automatically appear in the Player Menu once you have added translations and published each piece of content to the environment.

Note

Show in Player will need to be selected for the Language in the Admin Center in order to appear in the drop-down in the Player Menu. When adding a new language, this is setting is selected by default. However, if you are not seeing an existing language in the player, or the setting was turned off during set up, this can be edited by clicking the existing language and toggling on the setting that appears at the bottom of the window.

Watch the video to know more. Note that the video doesn't support audio.

Auto-Toggle

Auto-Toggle is the recommended and most widely used method of implementing Multi-Language. This method requires the implementation of a variable and a function in your site's code.

Once implemented, it will automatically change the language in the Player Menu based on the current language variable on your website. This method is best for performance optimization.

Note

Auto-Toggle is not available on pages where changing the language does not trigger a page refresh; this is the case with Single-Page Applications. If you have a Single-Page Application, use the default Manual Toggle or Language Push (API) method described in the next section.

If you are using WalkMe on a platform where you cannot implement a function in the site's code, such as Salesforce, contact your Account Manager or the WalkMe Support Team at support@walkme.com.

Enabling Auto-Toggle

In order to enable Auto-Toggle, you will need to have your development team implement a variable and JavaScript function on your website. This function will allow WalkMe to detect which language the content should load in.

See below for instructions on how to implement the variable and Auto-Toggle function on your site with assistance from your development team.

Language Variable

In order to implement the walkme_get_language function, you must first have a language variable at the window level in the browser that detects the end-user’s language. Ask your development team for the following:

  • Language Variable Name
  • Language Variable Outputs
Create the Multi-language Code

Scroll down to view and copy the JavaScript code for the Auto-Toggle function into a Text Editor and make the following changes as needed. This function will return the Language Short name (s) you specified in the AdminLanguage List during the initial language setup.

  • All instances of the template variable name, window.langCode, should be replaced with your actual variable name from your site.
  • Adjust your default language if the default is not English. The return value should be left blank for the default language. This is defined in the if statement:
Code Snippet
123
if (window.langCode == 'EN') {                

return '';

if (window.langCode == 'EN') {

return '';

For example, if instead your default language is Japanese and the Short Name for Japanese is JP, you would change EN to JP in the code.

Add alternate languages to the code if needed. These are defined in the else if statements in the code:

Code Snippet
1234
else if (window.langCode == 'FR') {
                return 'FR';

}

Continue adding else if statements to the code for each alternate language.

Add the Code to Your Site
  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, the Multi-Language code must be placed inside the head tags on every page where WalkMe will appear.

Code Snippet
12345678910111213
<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>

Note

It is best practice to turn off the Manual Toggle when using the Auto-Toggle. This is because if a user manually selects a language via the Manual Toggle, the Auto-Toggle will be overridden. WalkMe will then remember the user’s Manual Toggle language choice via a cookie in the browser and continue to display text in their manually chosen language.

Language Push (API)

If your site/application is a Single Page Application, it will not automatically refresh after a language is selected. In this case, you may opt to use the Language Push(API) method. The website will change the Player Menu to the correct language using an API call.

See the following steps for how this works and what steps will need to be taken by your development team to implement the Language Push API.

  1. As with the Auto-Toggle method, you must first have a language variable at the window level in the browser that detects the user's language.
  2. Implement a function named walkme_ready() on your website (seen in the following figure). This function checks whether WalkMe is fully loaded.
    Code Snippet
    123
    	var walkme_ready = function() {
    		WalkMeAPI.changeLanguage('language-short-name');
	};
  3. Once the function has detected that WalkMe has completed loading, now the API call for a new language can occur.
  4. Next the API call WalkMeAPI.changelanguage('language-short-name') will push the new language into the Player Menu. You will replace language-short-name with your variable name from Step 1.
WalkMeAPIFunctionDescription

WalkMeAPI.changeLanguage('languageshort-

name')

Force a WalkMe Language change to all content without requiring a page refresh.
WalkMeAPI.getAllLanguages()Returns an array of all languages defined in Multi-Language Management.
WalkMeAPI.getSupportedLanguages()Returns an array of all languages that is selectable in the language dropdown.
WalkMeAPI.getCurrentLanguage()Returns the selected language in the Player Menu as its Short name. Empty quotes '' means default language.

Log in to track your progress & complete quizzes

Learning

SAP FacebookSAP YoutubeSAP LinkedIn