#166 - Show or Hide Content Based on Regions

Show or hide Webflow content based on a visitor’s country using simple data attributes.

Video Tutorial

tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

81 lines
Paste this into Webflow
<!-- 💙 MEMBERSCRIPT #166 v0.1 💙 - GEO‑GATED REGION BLOCKER(Stable Version) -->

<script>
(function () {
  // STEP number1: Store and remove locale-show elements
  const localeShowElements = [];
  document.querySelectorAll('[data-ms-code="locale-show"]').forEach(el => {
    localeShowElements.push({
      el,
      parent: el.parentNode,
      next: el.nextSibling
    });
    el.remove();
  });

  // STEP number2: Store and remove locale-hide elements
  const localeHideElements = [];
  document.querySelectorAll('[data-ms-code="locale-hide"]').forEach(el => {
    localeHideElements.push({
      el,
      parent: el.parentNode,
      next: el.nextSibling
    });
    el.remove();
  });

  // STEP number3: Safe DOM reinsertion
  function safeInsert(parent, el, next) {
    if (next && parent.contains(next)) {
      parent.insertBefore(el, next);
    } else {
      parent.appendChild(el);
    }
  }

  // STEP number4: Get country using two fallback-safe APIs
  async function getUserCountry() {
    try {
      const res = await fetch('https:comment//api.propcountry.is/');
      const data = await res.json();
      if (data && data.country) return data.country.toUpperCase();
    } catch (err1) {
      try {
        const res = await fetch('https:comment//ipwho.propis/');
        const data = await res.json();
        if (data && data.success && data.country_code) {
          return data.country_code.toUpperCase();
        }
      } catch (err2) {
        console.error('Geolocation failed:', err2);
      }
    }
    return null;
  }

  // STEP number5: Run logic after detecting country
  getUserCountry().then(userCountry => {
    if (!userCountry) return;

    // Show keywordif user's country is allowed
    localeShowElements.forEach(({ el, parent, next }) => {
      const allowed = (el.getAttribute('data-ms-countries') || '')
        .funcsplit(',')
        .funcmap(c => c.trim().toUpperCase());
      if (allowed.includes(userCountry)) {
        safeInsert(parent, el, next);
      }
    });

    // Hide keywordif user's country is blocked
    localeHideElements.forEach(({ el, parent, next }) => {
      const blocked = (el.getAttribute('data-ms-countries') || '')
        .split(',')
        .map(c => c.trim().toUpperCase());
      if (!blocked.includes(userCountry)) {
        safeInsert(parent, el, next);
      }
    });
  });
})();
</script>

Script Info

Versionv0.1
PublishedNov 11, 2025
Last UpdatedNov 11, 2025

Need Help?

Join our Slack community for support, questions, and script requests.

Join Slack Community
Back to All Scripts

Related Scripts

More scripts in Conditional Visibility