How To Block Site Visitors From 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 is designed to block users from a certain country from visiting pages on your Wix website.

You might want to block visitors from a specific country from accessing your on your Wix website for various reasons. In this case, I‘m trying to block site visitors from a specific country from accessing my Wix site. This is automatically achieved based on their geolocation or country.

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 (as 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 entire site by clicking ‘Global(Site) Code’. This will enable our code on all pages of our website.

*If you want to apply your code to a specific page(s), you will have to select the ‘Page Code’ option and select the desired page to apply the 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 blocked or not, and if so, redirects to another location(page).

.then((json) => {  const loc = json.countryCode;  if(loc === "IN" && wixLocation.path !== "not-available"){     wixLocation.to("/not-available");  }});

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 checking if the countryCode is equal to “IN” (India), then redirects the visitor to the ‘not-available’ page with the “/not-available” 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 ‘not-available’ and make sure the page slug is “/not-available”. Fill the page with some content like “This content is not available in your country”.
• The statement checks if the user is in India and then sees whether the user is already on the “not-available” page. If they were already on this page, you could get stuck in a loop.

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 visitor is not already on
           not available page */        if(loc === "IN" && wixLocation.path !== "not-available"){
           // Redirect to "Not Available" page
           wixLocation.to("/not-available");
        }
     });})

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 as per your use case.

Variation:

I used the same geoblocking code and tweaked it to redirect my visitors to specific pages on my site as per their location. Link to that article here.

What you’ll notice; 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).

You can try it out at the following link, www.josesibik.com/pricing

You can find the code and the step-by-step article for the variation mentioned above here.

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 block certain visitors on their Wix website without using Routers.

Thank you for reading till the end. Hope this helped.