Wix Help Center
    Home
  1. Creating your site
  2. Advanced features
  3. Velo by Wix
  4. Code Tutorials
    5. Velo Tutorial: Redirecting Mobile Visitors

Velo Tutorial: Redirecting Mobile Visitors

Visit the Velo by Wix website to onboard and continue learning.
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. Open the Code panel of the page (you can just drag it up from the bottom). 
  3. Copy the code below and paste it in the page's tab in the Code panel.
  4. Make sure to substitute your mobile home page URL in line 9 where it says 'http://www.myMobileHome.com.'
  5. Publish the page to see the redirect in action. (Previewing isn't enough.)
1import wixLocation from 'wix-location';
2import wixWindow from 'wix-window';
3
4$w.onReady(function () {
5
6 setTimeout(function () {
7
8  if(wixWindow.formFactor === "Mobile"){
9     wixLocation.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:
1// Import statements for the Wix Location and Window APIs
2import wixLocation from 'wix-location';
3import wixWindow from 'wix-window';
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 wixWindow.formFactor.

1import wixLocation from 'wix-location';
2import wixWindow from 'wix-window';
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(wixWindow.formFactor === "Mobile"){
11      
12     // If mobile, we redirect to a mobile-friendly page
13     wixLocation.to('http://www.myMobileHome.com');        
14   }
15 }, 7500);
16
17
18 // The timeout value is 7500 nanoseconds
19 }, 7500);
20
21});

On line 13, we use wixLocation.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.

Did this help?

|