Add ApogeoAPI to any no-code site

// Drop into a Framer code component (or "embed code" element).
// Replace pk_live_YOUR_KEY with your public ApogeoAPI key.

import { useEffect, useState } from "https://esm.sh/react@18"

export default function VisitorCountry() {
  const [country, setCountry] = useState("…")
  useEffect(() => {
    fetch("https://api.apogeoapi.com/v1/ip", {
      headers: { "X-API-Key": "pk_live_YOUR_KEY" }
    })
      .then(r => r.json())
      .then(d => setCountry(d.country?.name ?? "unknown"))
      .catch(() => setCountry("unknown"))
  }, [])
  return <span>{country}</span>
}

<!-- Paste in Project Settings → Custom Code → Footer Code, OR
     in a "Embed" element on a specific page. -->
<script>
(async function() {
  const res = await fetch('https://api.apogeoapi.com/v1/ip', {
    headers: { 'X-API-Key': 'pk_live_YOUR_KEY' }
  });
  if (!res.ok) return;
  const data = await res.json();

  // Find any element with the data-apogeo attribute and fill it
  document.querySelectorAll('[data-apogeo="country-name"]').forEach(el => {
    el.textContent = data.country?.name ?? '';
  });
  document.querySelectorAll('[data-apogeo="country-flag"]').forEach(el => {
    el.textContent = data.country?.flagEmoji ?? '';
  });
  document.querySelectorAll('[data-apogeo="currency"]').forEach(el => {
    el.textContent = data.country?.currency ?? '';
  });
})();
</script>

<!-- Then in any text element: -->
<!-- "Welcome from <span data-apogeo="country-name"></span>!" -->

<!-- Paste in your theme's theme.liquid before </body> -->
<!-- Replace pk_live_YOUR_KEY with your public ApogeoAPI key. -->
<script>
(async function() {
  const day = new Date().toISOString().slice(0, 10);
  const cacheKey = 'apogeo_fx_' + day;
  let geo = null;

  try {
    const cached = sessionStorage.getItem(cacheKey);
    if (cached) geo = JSON.parse(cached);
  } catch (e) {}

  if (!geo) {
    try {
      const res = await fetch('https://api.apogeoapi.com/v1/ip', {
        headers: { 'X-API-Key': 'pk_live_YOUR_KEY' }
      });
      if (!res.ok) return;
      const data = await res.json();
      geo = {
        currency: data.country.currency,
        rate: data.country.currencyRate
      };
      sessionStorage.setItem(cacheKey, JSON.stringify(geo));
    } catch (e) { return; }
  }

  if (geo.currency === '{{ shop.currency }}' || !geo.rate) return;

  // Mark prices in your Liquid like:
  // <span data-shopify-price="{{ product.price | money_without_currency }}">
  //   {{ product.price | money }}
  // </span>
  document.querySelectorAll('[data-shopify-price]').forEach((el) => {
    const shopAmount = parseFloat(el.dataset.shopifyPrice);
    if (isNaN(shopAmount)) return;
    const localAmount = shopAmount * geo.rate;
    const formatted = new Intl.NumberFormat(undefined, {
      style: 'currency',
      currency: geo.currency,
      maximumFractionDigits: 0
    }).format(localAmount);
    el.textContent = formatted + ' (≈ ' + el.textContent.trim() + ')';
  });
})();
</script>

<!-- Squarespace: Settings → Advanced → Code Injection → Footer -->
<script>
(async function() {
  const res = await fetch('https://api.apogeoapi.com/v1/ip', {
    headers: { 'X-API-Key': 'pk_live_YOUR_KEY' }
  });
  if (!res.ok) return;
  const data = await res.json();

  // Add a "country" injection point in any Code Block on your page:
  // <span class="apogeo-country"></span>
  document.querySelectorAll('.apogeo-country').forEach(el => {
    el.textContent = (data.country?.flagEmoji ?? '') + ' ' + (data.country?.name ?? '');
  });
})();
</script>

// In Bubble: install plugin "API Connector" → add a new API:
//
//   Name: ApogeoAPI
//   Authentication: Private key in header
//     - Key name: X-API-Key
//     - Key value: pk_live_YOUR_KEY
//
// Then add an API call:
//
//   Name: Geolocate IP
//   Use as: Action and Data
//   Data type: JSON
//   GET https://api.apogeoapi.com/v1/ip
//
// Initialize the call (Bubble auto-detects the response shape).
//
// In your workflow, on Page Load:
//   "Get data from external API" → ApogeoAPI - Geolocate IP
//   Save result to a custom state on your page.
//
// Reference data via:
//   Page custom state: country.name
//   Page custom state: country.iso2
//   Page custom state: country.currency
//   Page custom state: country.currencyRate (live USD rate)