You can use Velo to redirect visitors to mobile-friendly pages in your site.
The basic steps to redirect to mobile pages are:
This tutorial has 2 parts:
import wixLocationFrontend from "wix-location-frontend";
import wixWindowFrontend from "wix-window-frontend";
$w.onReady(function () {
setTimeout(function () {
if (wixWindowFrontend.formFactor === "Mobile") {
wixLocationFrontend.to("http://www.myMobileHome.com");
}
}, 7500);
});
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.// Import statements for the Wix Location Frontend and Window APIs
import wixLocationFrontend from "wix-location-frontend";
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.
$w.onReady(function () {
// Adds a time delay so the visitor anticipates the redirect
setTimeout(function () {
...
...
...
// The timeout value is 7500 nanoseconds
}, 7500);
});
With an if statement on line 10, we check the type of device using wixWindowFrontend.formFactor
.
import wixLocationFrontend from "wix-location-frontend";
import wixWindowFrontend from "wix-window-frontend";
$w.onReady(function () {
// Adds a time delay so the visitor anticipates the redirect
setTimeout(function () {
// Checks what kind of device
if (wixWindowFrontend.formFactor === "Mobile") {
// If mobile, we redirect to a mobile-friendly page
wixLocationFrontend.to("http://www.myMobileHome.com");
}
// The timeout value is 7500 milliseconds
}, 7500);
});
On line 13, we use wixLocationFrontend.to
to perform the redirect.
The following APIs are used in the code in this article. To learn more, see the API Reference.