Velo Tutorial: Redirecting Mobile Visitors

You can use Velo to redirect visitors to mobile-friendly pages in your site.

The basic steps to redirect to mobile pages are:

1. Use code to check if your site is being viewed on a mobile device or a desktop device
2. If your site is being viewed on a mobile device, use code to redirect to another page

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 your site's home page.
2. Copy the code below and paste it in your page code.
3. Make sure to substitute your mobile home page URL in line 9 where it says 'http://www.myMobileHome.com.'
4. Publish the page to see the redirect in action. (Previewing isn't enough.)

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
  if(wixWindowFrontend.formFactor === "Mobile"){
9
     wixLocationFrontend.to('http://www.myMobileHome.com');        
10
   }
11
 }, 7500);
12

13
});

Understanding the Code

The code checks the kind of device. If mobile, the code redirects the visitor to a mobile-friendly home page.

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

• wixWindowFrontend.formFactor checks the device type.
• wixLocationFrontend.to redirects the visitor to the mobile page's URL.

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.

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 7500 nanoseconds
11
 }, 7500);
12

13
});

With an if statement on line 10, we check the type of device using wixWindowFrontend.formFactor.

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
  // Checks what kind of device
10
  if(wixWindowFrontend.formFactor === "Mobile"){
11
      
12
     // If mobile, we redirect to a mobile-friendly page
13
     wixLocationFrontend.to('http://www.myMobileHome.com');        
14
   }
15

16
 // The timeout value is 7500 milliseconds
17
 }, 7500);
18

19
});

On line 13, we use wixLocationFrontend.to to perform the redirect.

API List

The following APIs are used in the code in this article. To learn more, see the API Reference.

• wix-window-frontend
• wix-location-frontend