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.)
1
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
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
With an if statement on line 10, we check the type of device using wixWindowFrontend.formFactor
.
1
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.