Localize Your App

Localizing your app is a great way to get more users. We have over 220 million users worldwide – and many of them aren’t native English speakers. 

To appeal to and benefit more users around the world, we strongly recommend offering your app in at least one language other than English. This can help you get more users, earn higher ratings, and convert more users to paid plans.

The five most common languages of Wix users are:

  • English
  • Spanish
  • Portuguese
  • Russian
  • French

Getting started

  1. Localize your app’s UI: This involves a variety of tasks – translating the UI strings in your app, modifying dates and times, adjusting layouts, and more. Refer to the design tips below.
  2. Match your app’s language to the user’s language: When the user first installs your app, display your UI in the language the user defined in their language/regional preferences.
  3. Let users customize your app for their target audience (website components only): Add these options to your App Settings panel:
    1. Allow users to choose the language that’s suitable for their target audience – add a dropdown with a list of languages (the user’s language preference might be different from the language used in the live site). 
    2. Allow users to change text elements and other regional settings (like measurements).

4. Translate your market listing: Increase your app’s reach by speaking to users in their own language.

5. Translate your app extensions: Help users to understand your app extensions with a description in their language.

Design tips

  • Make sure any text-based UI elements are designed with plenty of space to accommodate other languages. You should allow for up to 30% more space than the text your default language requires.
  • If your UI can't accommodate text in one of your target languages, you can create an alternative layout for that language only.
  • Keep in mind that in different locations, different symbols and formats are used for dates, times, numbers, currencies, etc. For example, February 1, 2023 will be 1/2/23 in Europe but 2/1/23 in the U.S.
  • It's important to have a default set of resources available so that if you get a request to load your app in a location that you don't support, you'll have a fallback and your app won't crash. We suggest that you use English as the fallback language.

Provide localized support

If your app is supported in a certain language, users may ask for your help in that language. We recommend engaging with users in their native language, or if that’s not possible, in a common language. If your app becomes popular in a specific language, consider hiring a native-language speaker for that language to ensure textual accuracy and to provide user support.

Implementation

  1. Match your app’s language to the user’s language: When the user first installs your app, detect the user’s language (it’s defined in their language/regional preferences). 
    1. Server-side rendering: use the locale parameter, which is one of the query parameters we pass over to you when we call your app’s endpoint.
    2. Using the SDK: use the Utils.getLocale method to decide which set of strings to use in your App Settings.
  2. When building your app, we suggest managing all of the UI strings in one place and not adding any hardcoded strings to your code. For example:
Copy
1
<!DOCTYPE html>
2
<html>
3
<head> 
4
   <script type="text/javascript">  
5
       // Managing the UI strings in one place
6
       var langs = {
7
           "en" : {
8
               "title": "My Title",
9
               "text": "My Text"
10
           },
11
           "es" : {
12
               "title": "Mi Título",
13
               "text": "Mi Texto"
14
           },
15
           "pt" : {
16
               "title": "Meu Título",
17
               "text": "Meu Texto"
18
           },
19
           "fr" : {
20
               "title": "Mon Titre",
21
               "text": "Mon Texte"
22
           },         
23
       };
24
       // Changing the locale in the App Settings    
25
          var locale = Wix.Utils.getLocale() || 'en';
26
 
27
      // English is the default language
28
         var localeStrings = langs[locale] || langs['en'];
29
 
30
       // Replacing the the UI elements with the correct text
31
       for (var id in localeStrings) {
32
           $('#' + id).text(localeStrings[id]);
33
       }
34
   </script>
35
</head>
36
<body>
37
   <div>
38
       <h4 id="title">Default Title</h4>
39
       <p id="text">Default Text</p>
40
   </div>
41
</body>
42
</html>
Was this helpful?
Yes
No