Hide or Show Webflow Elements Based on the User’s Country

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to show or hide elements on your Webflow site based on the visitor’s country. Handy for targeting a GDPR banner to European visitors, restricting an offer to certain countries, or personalizing a welcome message.

Example

1. Add a custom attribute to your elements

In the Webflow Designer, select the element you want to show or hide based on the country. In the "Element Settings" panel, add a custom attribute:

• Name : data-country
• Value : the 2-letter ISO country code (for example: FR for France, US for the United States, DE for Germany)

You can add several values separated by commas if the element should appear in multiple countries: FR,BE,CH.

By default, set these elements to display: none in your Webflow styles. The script will show them if the country matches.

2. Get the user’s country via the ipapi API

The ipapi.co API lets you fetch a visitor’s country for free from their IP address, with no API key needed for basic use (up to 1,000 requests per day). A fetch call to https://ipapi.co/json/ returns a JSON object, including the country_code field in 2-letter ISO format.

3. Add the script to your page footer

In Webflow, go to the relevant page’s Page Settings, open the "Before </body> tag" section, and paste the following script:

fetch('https://ipapi.co/json/')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    var userCountry = data.country_code;
    var elements = document.querySelectorAll('[data-country]');
    elements.forEach(function(el) {
      var countries = el.getAttribute('data-country').split(',');
      if (countries.indexOf(userCountry) !== -1) {
        el.style.display = 'block';
      }
    });
  })
  .catch(function(error) {
    console.log('Erreur ipapi:', error);
  });

The script gets the user’s country, loops through all elements with a data-country attribute, and shows the ones whose country code matches.

If you want to show a different element display type depending on the container (flex, grid), replace block with flex or grid as needed.

Conclusion

With just a few lines of JavaScript and a custom attribute, you can control how any Webflow element appears based on your visitors’ location. A few real-world use cases:

• Show a GDPR compliance banner only to European visitors
• Restrict a promotional offer to France and Belgium
• Display a local phone number based on the visitor’s country
• Personalize a welcome message ("Welcome!" vs "Welcome!") without using Webflow Localization

To go further with SEO and technical best practices in Webflow, check out our guide: 9 steps to optimize your Webflow site for SEO.