Velo Tutorial: Redirecting Visitors Based on Browser Language

You can use Velo to redirect visitors to different language versions of your site.

Most browsers have settings that let you define what language to view content in. Velo can access these settings and use them when displaying your site.

For example, if your browser locale is set to an English-speaking country, you can use Velo to redirect visitors to your site in English. If your browser locale is set to a Spanish-speaking country, you can redirect visitors to the Spanish version of your site.

This tutorial has 2 parts:

  • Instructions on how to get set up, including code you can copy and paste onto your page
  • An explanation of what each line of code does

Instructions

  1. Go to the page to redirect the visitor from.

  2. Open the code editor.

  3. Copy and paste the code below.

  4. In the copied code, make sure to substitute your locale codes and URLs, removing the < and \> symbols.

    Example

    For French, substitute <locale-code> with fr.

    To change the URL and its locale, substitute http://<your-URL>/?lang=<locale> with http://www.theCatalog.com/?lang=fr.

    Tip: To get the URL, just go to your live site, navigate to the relevant page in the right language and copy it the URL.

  5. Publish the page to see the redirect in action. The redirect will not work in preview mode.

Copy
1
import wixLocationFrontend from 'wix-location-frontend';
2
import wixWindowFrontend from 'wix-window-frontend';
3


4
$w.onReady(function () {
5


6
 setTimeout(function () {
7
     
8
  const url = wixLocationFrontend.url;
9
  const shortLocale = wixWindowFrontend.browserLocale.substring(0,2);
10


11
  switch (shortLocale) {
12
  case '<locale-code>':
13
   if (url !== 'http://<your-URL>/?lang=<locale>') {
14
    wixLocationFrontend.to('http://<your-URL>/?lang=<locale>');
15
   }
16
   break;
17
  case '<locale-code>':
18
   if (url !== 'http://<your-URL>/?lang=<locale>') {
19
    wixLocationFrontend.to('http://<your-URL>/?lang=<locale>');
20
   }
21
   break;
22
  ...
23
  ...
24
  ...
25
  default:
26
   if (url !== 'http://<your-URL>/?lang=<locale>' && url !== 'http://<your-URL>') {
27
    wixLocationFrontend.to('http://<your-URL>/?lang=<locale>');
28
   }
29
   break;
30
  }
31


32
 }, 6500);
33


34
});

A sample implementation of this code is provided below.

Understanding the Code

We are now going to understand the code using a scenario. The sample code below checks the browser locale, and then redirects the visitor to a catalog (www.theCatalog.com) in the right language. The code checks if the language of the browser is French, German, Chinese, or Spanish. If none of these match, the catalog displays in English.

Import statements on lines 2 and 3 bring in the APIs we need:

Copy
1
// Import statements for the Wix Location Frontend and Window APIs.
2
import wixLocationFrontend from 'wix-location-frontend';
3
import wixWindowFrontend from 'wix-window-frontend';

The redirect occurs after a time delay. This gives the visitor time to see notices on the page you are redirecting from. Line 4 contains the setTimeout function that creates this delay.

Copy
1
$w.onReady(function () {
2


3
// Adds a time delay so the visitor anticipates the redirect.   
4
 setTimeout(function () {
5


6
...
7
...
8
...
9


10
 // The timeout value is 6500 nanoseconds.
11
 }, 6500);
12


13
});

We add a switch statement on line 16 to check the browser locale. 

Copy
1
import wixLocationFrontend from 'wix-location-frontend';
2
import wixWindowFrontend from 'wix-window-frontend';
3


4
$w.onReady(function () {
5


6
 // Adds a time delay so the visitor anticipates the redirect.   
7
  setTimeout(function () {
8
 
9
    // Not sure which format your browser uses when  
10
    // returning the locale (for example, "en" or "en-EN)? 
11
    // Shorten the locale to its first two characters. 
12
    const url = wixLocationFrontend.url;
13
    const shortLocale = wixWindowFrontend.browserLocale.substring(0,2);
14


15
    // Checks the browser locale setting.
16
    switch (shortLocale) {
17
  
18
    // Depending on the locale, redirects to a new page.
19
         
20
    // If already on the correct page, no need to
21
    // re-navigate and reload the page.
22


23
      case 'fr':
24
        if (url !== 'http://www.theCatalog.com/?lang=fr') {
25
          wixLocationFrontend.to('http://www.theCatalog.com/?lang=fr');
26
        }
27
        break;
28


29
    	case 'de':
30
   			if (url !== 'http://www.theCatalog.com/?lang=de') {
31
    			wixLocationFrontend.to('http://www.theCatalog.com/?lang=de');
32
   			}
33
   			break;
34


35
  		case 'zh':
36
  			if (url !== 'http://www.theCatalog.com/?lang=zh') {
37
    			wixLocationFrontend.to('http://www.theCatalog.com/?lang=zh');
38
   			}
39
   			break;
40


41
  		case 'es':
42
   			if (url !== 'http://www.theCatalog.com/?lang=es') {
43
    			wixLocationFrontend.to('http://www.theCatalog.com/?lang=es');
44
   			}
45
   		break;
46
          
47
  		// If locale is set to annother language, default is English.
48
  		// Also, handle the case where no language code is in the URL.
49
  		default:
50
   			if (url !== 'http://<your-URL>/?lang=<locale>' && url !== 'http://<your-URL>') {
51
    			wixLocationFrontend.to('http://www.theCatalog.com/?lang=en');
52
   			}
53
   			break;
54
  	}
55


56
 		// The timeout value is 6500 nanoseconds.
57
 	}, 6500);
58


59
});

Notes

  • In line 48, the sample code defaults to English if the locale is not French, German, Chinese, or Spanish.  
  • We also make sure that the page does not reload if no language code is specified in the URL.
Was this helpful?
Yes
No