Skip to content

Instantly share code, notes, and snippets.

@milllan

milllan/dynamic-localized-contact.js

Created January 12, 2026 12:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save milllan/8db7168619bc89574a07361cfb8f6d43 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save milllan/8db7168619bc89574a07361cfb8f6d43 to your computer and use it in GitHub Desktop.
Download ZIP
Dynamic location-based contact info injector (AT/CH/DE) using IP geolocation.
Raw
dynamic-localized-contact.js
document.addEventListener("DOMContentLoaded", () => {
const element = document.getElementById("location-info");
// Stop if element doesn't exist
if (!element) return;
// --- 1. THE RENDER FUNCTION (Exact copy of original HTML/SVG logic) ---
function runLocalization(country_code) {
// Prevent running twice
if (element.querySelector('.location-email')) return;
// AUSTRIA
if (country_code === "AT") {
const emailLink = document.createElement("a");
emailLink.className = "location-email";
emailLink.href = "mailto:[email protected]";
emailLink.innerHTML = `
<span class="location-email__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13" viewBox="0 0 16 13" fill="none"><path d="M1.58947 12.75C1.16849 12.75 0.812174 12.6042 0.520508 12.3125C0.228841 12.0208 0.0830078 11.6645 0.0830078 11.2435V1.75646C0.0830078 1.33549 0.228841 0.979167 0.520508 0.6875C0.812174 0.395833 1.16849 0.25 1.58947 0.25H14.4099C14.8309 0.25 15.1872 0.395833 15.4788 0.6875C15.7705 0.979167 15.9163 1.33549 15.9163 1.75646V11.2435C15.9163 11.6645 15.7705 12.0208 15.4788 12.3125C15.1872 12.6042 14.8309 12.75 14.4099 12.75H1.58947ZM7.99967 6.96479L1.33301 2.70187V11.2435C1.33301 11.3184 1.35704 11.3799 1.40509 11.4279C1.45315 11.476 1.51461 11.5 1.58947 11.5H14.4099C14.4847 11.5 14.5462 11.476 14.5943 11.4279C14.6423 11.3799 14.6663 11.3184 14.6663 11.2435V2.70187L7.99967 6.96479ZM7.99967 5.66667L14.5382 1.5H1.46113L7.99967 5.66667ZM1.33301 2.70187V1.5V11.2435C1.33301 11.3184 1.35704 11.3799 1.40509 11.4279C1.45315 11.476 1.51461 11.5 1.58947 11.5H1.33301V2.70187Z" fill="#271B50"></path></svg>
</span>
<span class="location-email__text">[email protected]</span>`;
const contactDiv = document.createElement("div");
contactDiv.className = "location-contact";
contactDiv.innerHTML = `
<div class="location-contact__flag">
<svg width="24" height="16" viewBox="0 0 28 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.25" y="0.25" width="27.5" height="19.5" rx="1.75" fill="white" stroke="#F5F5F5" stroke-width="0.5"/><mask id="mask0_142_121" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="20"><path d="M28 20H0V0H28V20Z" fill="white"/><path d="M28 20H0V0H28V20Z" stroke="white"/></mask><g mask="url(#mask0_142_121)"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.66667H28V0H0V6.66667Z" fill="#D80128"/><path fill-rule="evenodd" clip-rule="evenodd" d="M0 20H28V13.3333H0V20Z" fill="#D80128"/></g></svg>
</div>
<div class="location-contact__info">
<div class="location-contact__phone">
<a href="tel:+436605452526">+43 660 5452526</a>
</div>
<div class="location-contact__hours">
(Mo-Fr, 9-18 Uhr)
</div>
</div>`;
element.insertAdjacentHTML("afterbegin", contactDiv.outerHTML);
element.insertAdjacentHTML("afterbegin", emailLink.outerHTML);
}
// SWITZERLAND
else if (country_code === "CH") {
const emailLink = document.createElement("a");
emailLink.className = "location-email";
emailLink.href = "mailto:[email protected]";
emailLink.innerHTML = `
<span class="location-email__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13" viewBox="0 0 16 13" fill="none"><path d="M1.58947 12.75C1.16849 12.75 0.812174 12.6042 0.520508 12.3125C0.228841 12.0208 0.0830078 11.6645 0.0830078 11.2435V1.75646C0.0830078 1.33549 0.228841 0.979167 0.520508 0.6875C0.812174 0.395833 1.16849 0.25 1.58947 0.25H14.4099C14.8309 0.25 15.1872 0.395833 15.4788 0.6875C15.7705 0.979167 15.9163 1.33549 15.9163 1.75646V11.2435C15.9163 11.6645 15.7705 12.0208 15.4788 12.3125C15.1872 12.6042 14.8309 12.75 14.4099 12.75H1.58947ZM7.99967 6.96479L1.33301 2.70187V11.2435C1.33301 11.3184 1.35704 11.3799 1.40509 11.4279C1.45315 11.476 1.51461 11.5 1.58947 11.5H14.4099C14.4847 11.5 14.5462 11.476 14.5943 11.4279C14.6423 11.3799 14.6663 11.3184 14.6663 11.2435V2.70187L7.99967 6.96479ZM7.99967 5.66667L14.5382 1.5H1.46113L7.99967 5.66667ZM1.33301 2.70187V1.5V11.2435C1.33301 11.3184 1.35704 11.3799 1.40509 11.4279C1.45315 11.476 1.51461 11.5 1.58947 11.5H1.33301V2.70187Z" fill="#271B50"></path></svg>
</span>
<span class="location-email__text">[email protected]</span>`;
const contactDiv = document.createElement("div");
contactDiv.className = "location-contact";
contactDiv.innerHTML = `
<div class="location-contact__flag">
<svg width="24" height="16" viewBox="0 0 28 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="28" height="20" rx="2" fill="white"/><mask id="mask0_142_153" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="20"><rect width="28" height="20" rx="2" fill="white"/></mask><g mask="url(#mask0_142_153)"><rect width="28" height="20" fill="#FF0000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 12H8.33333C8.14924 12 8 11.8508 8 11.6667V8.33333C8 8.14924 8.14924 8 8.33333 8H12V4.33333C12 4.14924 12.1492 4 12.3333 4H15.6667C15.8508 4 16 4.14924 16 4.33333V8H19.6667C19.8508 8 20 8.14924 20 8.33333V11.6667C20 11.8508 19.8508 12 19.6667 12H16V15.6667C16 15.8508 15.8508 16 15.6667 16H12.3333C12.1492 16 12 15.8508 12 15.6667V12Z" fill="white"/></g></svg>
</div>
<div class="location-contact__info">
<div class="location-contact__phone">
<a href="tel:+41784453536">+41 78 445 3536</a>
</div>
<div class="location-contact__hours">
(Mo-Fr, 9-18 Uhr)
</div>
</div>`;
element.insertAdjacentHTML("afterbegin", contactDiv.outerHTML);
element.insertAdjacentHTML("afterbegin", emailLink.outerHTML);
}
// GERMANY & DEFAULT (Backup for Serbia/Rest of World)
else {
const emailLink = document.createElement("a");
emailLink.className = "location-email";
emailLink.href = "mailto:[email protected]";
emailLink.innerHTML = `
<span class="location-email__icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13" viewBox="0 0 16 13" fill="none"><path d="M1.58947 12.75C1.16849 12.75 0.812174 12.6042 0.520508 12.3125C0.228841 12.0208 0.0830078 11.6645 0.0830078 11.2435V1.75646C0.0830078 1.33549 0.228841 0.979167 0.520508 0.6875C0.812174 0.395833 1.16849 0.25 1.58947 0.25H14.4099C14.8309 0.25 15.1872 0.395833 15.4788 0.6875C15.7705 0.979167 15.9163 1.33549 15.9163 1.75646V11.2435C15.9163 11.6645 15.7705 12.0208 15.4788 12.3125C15.1872 12.6042 14.8309 12.75 14.4099 12.75H1.58947ZM7.99967 6.96479L1.33301 2.70187V11.2435C1.33301 11.3184 1.35704 11.3799 1.40509 11.4279C1.45315 11.476 1.51461 11.5 1.58947 11.5H14.4099C14.4847 11.5 14.5462 11.476 14.5943 11.4279C14.6423 11.3799 14.6663 11.3184 14.6663 11.2435V2.70187L7.99967 6.96479ZM7.99967 5.66667L14.5382 1.5H1.46113L7.99967 5.66667ZM1.33301 2.70187V1.5V11.2435C1.33301 11.3184 1.35704 11.3799 1.40509 11.4279C1.45315 11.476 1.51461 11.5 1.58947 11.5H1.33301V2.70187Z" fill="#271B50"></path></svg>
</span>
<span class="location-email__text">[email protected]</span>`;
const contactDiv = document.createElement("div");
contactDiv.className = "location-contact";
contactDiv.innerHTML = `
<div class="location-contact__flag">
<svg width="24" height="16" viewBox="0 0 28 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="28" height="20" rx="2" fill="white"/><mask id="mask0_142_178" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="20"><rect width="28" height="20" rx="2" fill="white"/></mask><g mask="url(#mask0_142_178)"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 6.66667H28V0H0V6.66667Z" fill="#262626"/><g filter="url(#filter0_d_142_178)"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 13.3333H28V6.66666H0V13.3333Z" fill="#F01515"/></g><g filter="url(#filter1_d_142_178)"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 20H28V13.3333H0V20Z" fill="#FFD521"/></g></g><defs><filter id="filter0_d_142_178" x="0" y="6.66666" width="28" height="6.66666" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_142_178"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_142_178" result="shape"/></filter><filter id="filter1_d_142_178" x="0" y="13.3333" width="28" height="6.66666" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_142_178"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_142_178" result="shape"/></filter></defs></svg>
</div>
<div class="location-contact__info">
<div class="location-contact__phone">
<a href="tel:+4917689031447">+49 176 89031447</a>
</div>
<div class="location-contact__hours">
(Mo-Fr, 9-18 Uhr)
</div>
</div>`;
element.insertAdjacentHTML("afterbegin", contactDiv.outerHTML);
element.insertAdjacentHTML("afterbegin", emailLink.outerHTML);
}
}
// --- 2. EXECUTION LOGIC (Chain of Command) ---
// Attempt 1: Cloudflare Trace (Fastest)
fetch("/cdn-cgi/trace")
.then((response) => {
if (!response.ok) throw new Error("CF Error");
return response.text();
})
.then((data) => {
// Success: Parse CF data
let country_code = "DE";
const match = data.match(/loc=(.+)/);
if (match && match[1]) country_code = match[1];
runLocalization(country_code);
})
.catch(() => {
// Attempt 2: Fallback to ipapi.co (Backup)
fetch("https://ipapi.co/json/", { cache: "no-store" })
.then((response) => response.json())
.then((data) => {
runLocalization(data.country_code);
})
.catch(() => {
// Attempt 3: Ultimate Fallback (Default to DE)
runLocalization("DE");
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment