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:
- Use code to check if your site is being viewed on a mobile device or a desktop device
- 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
- Go to your site's home page.
- Copy the code below and paste it in your page code.
- Make sure to substitute your mobile home page URL in line 9 where it says 'http://www.myMobileHome.com.'
- Publish the page to see the redirect in action. (Previewing isn't enough.)
1import wixLocationFrontend from 'wix-location-frontend';2import 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 APIs2import wixLocationFrontend from 'wix-location-frontend';3import 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 nanoseconds11 }, 7500);12
13});
With an if statement on line 10, we check the type of device using wixWindowFrontend.formFactor
.
1import wixLocationFrontend from 'wix-location-frontend';2import 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 device10 if(wixWindowFrontend.formFactor === "Mobile"){11 12 // If mobile, we redirect to a mobile-friendly page13 wixLocationFrontend.to('http://www.myMobileHome.com'); 14 }15
16 // The timeout value is 7500 milliseconds17 }, 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.