Set A Link and Button Redirect by IP Location

2.1 A link (using id): set href based on country

Scenario: there is only one key link on the page, and you want it to point to different destinations based on region. The example below demonstrates the simplest logic: if it’s TW, use the TW link; otherwise use the default link.

<a id="geoLink" href="https://example.com/default">Go now</a>

<script>
(async function () {
  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    const target = (info.country === "TW")
      ? "https://example.com/tw"
      : "https://example.com/default";

    const a = document.getElementById("geoLink");
    if (a) a.href = target;
  } catch (e) {
    // On failure, keep the default href
  }
})();
</script>

2.2 A links (using class): batch set href based on country

Scenario: multiple links on the page need geo routing. The simplest approach is: give them the same class and update them together. The example remains minimal: TW uses the TW link; other regions use the default link.

<a class="geo-link" href="https://example.com/default">Download</a>
<a class="geo-link" href="https://example.com/default">Purchase</a>

<script>
(async function () {
  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    const target = (info.country === "TW")
      ? "https://example.com/tw"
      : "https://example.com/default";

    document.querySelectorAll(".geo-link").forEach(function (el) {
      el.href = target;
    });
  } catch (e) {}
})();
</script>

2.3 Button (using id): redirect based on country after click

Scenario: a button is not a link itself, so you need to bind a click handler on the frontend. This example keeps only the essential logic: first choose a target URL based on country, then redirect to that URL when the button is clicked.

<button id="geoBtn" type="button">Click to redirect</button>

<script>
(async function () {
  let target = "https://example.com/default"; // Default URL

  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    if (info.country === "TW") target = "https://example.com/tw";
  } catch (e) {
    // On failure, use the default URL
  }

  const btn = document.getElementById("geoBtn");
  if (btn) btn.onclick = function () { window.location.href = target; };
})();
</script>

2.4 Buttons (using class): batch bind click redirects

Scenario: multiple buttons on the page need region-based redirects. The simplest approach: use one class and bind click handlers in a loop. Note: buttons don’t have a “default href”, so it’s recommended to prepare a default URL in the script to avoid “no response” when the API fails.

<button class="geo-btn" type="button">Button 1</button>
<button class="geo-btn" type="button">Button 2</button>

<script>
(async function () {
  let target = "https://example.com/default"; // Default URL

  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    if (info.country === "TW") target = "https://example.com/tw";
  } catch (e) {}

  document.querySelectorAll(".geo-btn").forEach(function (btn) {
    btn.onclick = function () { window.location.href = target; };
  });
})();
</script>

2.5.1 For an A link (id): set href directly

<a id="geoLink" href="https://example.com/default">Go now</a>

<script>
(async function () {
  const defaultUrl = "https://example.com/default";
  const map = { TW: "https://example.com/tw", US: "https://example.com/us" };

  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    const target = map[info.country] || defaultUrl;

    document.getElementById("geoLink").href = target; // ✅ Key: write target into href
  } catch (e) {
    // If it fails, keep the default href
  }
})();
</script>

2.5.2 For a button (id): navigate to target on click

<button id="geoBtn" type="button">Click to go</button>

<script>
(async function () {
  const defaultUrl = "https://example.com/default";
  const map = { TW: "https://example.com/tw", US: "https://example.com/us" };
  let target = defaultUrl;

  try {
    const info = await fetch("https://my.ipin.io/info").then(r => r.json());
    target = map[info.country] || defaultUrl;
  } catch (e) {}

  document.getElementById("geoBtn").onclick = function () {
    window.location.href = target; // ✅ Key: navigate using target on click
  };
})();
</script>

3.1 WordPress

• Use a “insert header/footer scripts” plugin and paste the script into the Header (site-wide)
• Or insert the script before </head> in the theme file header.php

3.2 Joomla! / Joomla

• In the current template’s index.php, find <head> and paste the script before </head>
• Or use the template’s “custom head code” option (varies by template)

3.3 Magento

• Add the script to the theme’s global head (the head area in theme/layout)
• The goal is site-wide output so you can maintain region mapping rules in one place

3.4 Shopify

• Online Store → Themes → Edit code
• Find theme.liquid and paste the script before </head> (site-wide)

3.5 General rule

• Any system that allows editing the global <head> or layout file can implement “set link/button destinations by IP region” the same way
• Keep a default URL so the page remains usable when the external API fails