Masquer ou afficher des éléments Webflow selon le pays de l'utilisateur

Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment afficher ou masquer des éléments de votre site Webflow selon le pays de l'utilisateur. Utile pour cibler une bannière RGPD aux visiteurs européens, restreindre une offre à certains pays, ou personnaliser un message de bienvenue.

Exemple

1. Ajoutez un custom attribute sur vos éléments

Dans le Designer Webflow, sélectionnez l'élément que vous voulez afficher ou masquer selon le pays. Dans le panneau "Element Settings", ajoutez un custom attribute :

• Name : data-country
• Value : le code pays ISO à 2 lettres (ex : FR pour la France, US pour les États-Unis, DE pour l'Allemagne)

Vous pouvez ajouter plusieurs valeurs séparées par une virgule si l'élément doit s'afficher pour plusieurs pays : FR,BE,CH.

Par défaut, mettez ces éléments en display: none dans vos styles Webflow. Le script se chargera de les afficher si le pays correspond.

2. Récupérez le pays de l'utilisateur via l'API ipapi

L'API ipapi.co permet de récupérer le pays d'un visiteur gratuitement à partir de son adresse IP, sans clé API pour les usages basiques (jusqu'à 1 000 requêtes par jour). Un appel fetch vers https://ipapi.co/json/ retourne un objet JSON avec notamment le champ country_code au format ISO 2 lettres.

3. Ajoutez le script dans le footer de votre page

Dans Webflow, allez dans Page Settings de la page concernée, section "Before </body> tag", et collez le script suivant :

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);
  });

Le script récupère le pays de l'utilisateur, parcourt tous les éléments avec un attribut data-country, et affiche ceux dont le code pays correspond.

Si vous voulez afficher un élément différent selon le container (flex, grid), remplacez block par flex ou grid selon le cas.

Conclusion

En quelques lignes de JavaScript et un custom attribute, vous pouvez personnaliser l'affichage de n'importe quel élément Webflow selon la localisation de vos visiteurs. Quelques cas d'usage concrets :

• Afficher une bannière de conformité RGPD uniquement pour les visiteurs européens
• Restreindre une offre promotionnelle à la France et la Belgique
• Afficher un numéro de téléphone local selon le pays du visiteur
• Personnaliser un message de bienvenue ("Bienvenue !" vs "Welcome !") sans passer par Webflow Localization

Pour aller plus loin sur les bonnes pratiques SEO et technique sur Webflow, consultez notre guide en 9 étapes pour optimiser son site Webflow pour le SEO.