How To Redirect Site Visitors To Another Page On Your Wix Website Based On Their Location/IP Address(Geolocation Code | Wix Velo).

I have been working with the Wix platform for more than six years and run a Web Design Company that primarily uses the Wix platform to design websites for our clients.

I have absolutely no coding background and have been learning the basics of coding from the Wix Velo learning platform. So this can be easily achieved with little coding knowledge.

The code below was originally designed to block users from certain countries from visiting your Wix website.

You might want to redirect your site visitors to a different page on your Wix website for various reasons. In this case, I was trying to redirect my site visitors to a different pricing page based on their geolocation or country. I run a web design company from India and wanted to have visitors from India and the rest of the world redirected to their respective pricing pages.

Before we begin:

Firstly, you’ll need to open the Wix Website Editor and enable Velo from the top menu under Dev Mode and select ‘Turn on Dev Mode’ as shown below.

Velo is Wix’s an open development platform that let’s you work in Wix’s visual builder, add custom functionality and interactions using Velo’s APIs, use your own tools, and enjoy serverless coding in both the front-end and backend.

A Code Editor will show up at the bottom of the page(like shown in the image below)and other options like Page Code, Databases, Velo Tools, etc are available on the left sidebar.

For this example, we will edit the code for the selected page by clicking ‘Page Code’ and choosing the desired page. This will enable our code only on visitors visiting this webpage.

*If you want to apply a certain code to all pages, you will have to select ‘Global(Site)’ and enter your code.

Let’s break it down:

First, we need to Import the wix-location and wix-fetch APIs, which will enable us to use these features in our code.

⚠️IMPORTANT⚠️️

These API imports need to go before any other code in your Velo Code Editor.

import wixLocation from 'wix-location';
import {fetch} from 'wix-fetch';

Now that we’ve imported these APIs, they’re ready to use.

The next step is to use the wix-fetch API to get the user’s IP information. We‘ll be using extreme-ip-lookup.com to get the visitor’s IP information, which will be returned to us in JSON format to use later on.

You can visit extreme-ip-lookup.com yourself to get an idea of the kind of information that is returned for you.

$w.onReady(function () {fetch('https://extreme-ip-lookup.com/json', {
    method: 'get'
 }).then((httpResponse) => {
   if (httpResponse.ok) {
      return httpResponse.json();
   }
 })})

Once you’ve completed the above step, the next line of code we’re going to add will retrieve the information found above and checks whether that location is allowed or not, and if so, redirects to another location(page).

.then((json) => {  const loc = json.countryCode;  if(loc === "IN"){     wixLocation.to("/pricing-in");  }});

We’re setting a new const called loc and for its value, we’re retrieving the countryCode value from the JSON we fetched earlier. Other options available are the visitor’s IP address, latitude, longitude, city, region, etc.

In this scenario, our code is basically checking if the countryCode is equal to “IN” (India), then redirects the visitor to the Indian pricing page with the “/pricing-in” slug. The redirect is done using the wixLocation API we called in the first line.

Please Note:

• You must have already created the page to which we will redirect the visitor. In this case, our page is called ‘Pricing-in’ and make sure the page slug is “/pricing-in”. Fill the page with some content depending on your use case.

The final code:

import wixLocation from 'wix-location';
import {fetch} from 'wix-fetch';$w.onReady(function () {     // Fetch the user's location details
     fetch('https://extreme-ip-lookup.com/json', {
        method: 'get'
     })     // Check if the request was successful
     .then((httpResponse) => {
        if (httpResponse.ok) {
           return httpResponse.json();
        }
     })     
     .then((json) => {
        // Set the user's countryCode as a const
        const loc = json.countryCode;        /* Check if location is India, and check if the visitor is not on Pricing-in page */        if(loc === "IN"){
           // Redirect to "pricing-in" page
           wixLocation.to("/pricing-in");
        }
     });})

Feel free to play around with it. You can replace the country code or use another parameter from the IP information like city, continent or region.

See the code in action:

Visit the following link, www.josesibik.com/pricing

If you are from India, you notice the URL slug change from ‘/pricing’ to ‘/pricing-in’

If you are from any other part of the world, you will remain on the same page(i.e: www.josesibik.com/pricing).

Variation:

I have also applied a slight variation of the above code just in case an international visitor clicks on the Indian pricing page link.

You can find the code for that below,

import wixLocation from 'wix-location';
import {fetch} from 'wix-fetch';$w.onReady(function () {     // Fetch the user's location details
     fetch('https://extreme-ip-lookup.com/json', {
        method: 'get'
     })     // Check if the request was successful
     .then((httpResponse) => {
        if (httpResponse.ok) {
           return httpResponse.json();
        }
     })     
     .then((json) => {
        // Set the user's countryCode as a const
        const loc = json.countryCode;        /* Check if location is NOT India, and check if the visitor is not on Pricing page */        if(loc !== "IN"){
           // Redirect to "pricing" page
           wixLocation.to("/pricing");
        }
     });})

This makes sure that the international visitor is redirected to the Global pricing page.

IMPORTANT:

While this is a functional solution it is still just a quick fix to help new Wix Velo users redirect visitors from one page to another based on their location.

The cons of this method as opposed to using the Routers would be that it loads the first page before redirecting the final destination. Whereas, the routers redirect the visitor before loading the first page.

I hope this helps out all those looking to redirect visitors to another page on their Wix website without using Routers.

Thank you for reading. Best of luck!