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.)

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.

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.

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

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