Search code examples
htmlnumberslocationcontactsgeo

Change Contact Number with geo location on HTML website

I have a HTML website which attracts visitors mainly from 4-5 countries. I have different contact numbers for all countries and displaying all contact number at a place makes it cluttered. Is there any way I can show single contact number as per the geo location of visitors on the website?

Thanks in advance

Solution

  • You could use http://ipinfo.io/ to identify the country via the IP address. This requires jQuery and looks basically like this:

    <html>
    <head>
        <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
        <script>
            $.get("http://ipinfo.io", function(response) {
                if(response.country == "US"){
                    document.getElementById("phone").innerHTML = "You are in US";
                }else if(response.country == "GB") {
                    document.getElementById("phone").innerHTML = "You are in GB";
                }
            }, "jsonp");
        </script>
    </head>
    <body>      
        <p id="phone">Hello World!</p>
    </body>
</html>

    We call the API from http://ipinfo.io/ and receiving the country in a callback method. In this callback method we can now change the value of the HTML element.