Display Different Banner Based on Visitor Country

Displaying country-specific banners can greatly improve user engagement by showing relevant content tailored to the user's location. In this article, we will guide you through setting up a JavaScript solution to display different clickable banners based on the visitor's country. If the country doesn't match any specified, a default banner will be displayed.

by apipcc

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Country Specific Banner</title>
    <script>
        var endpoint = 'https://apip.cc/json';
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var response = JSON.parse(this.responseText);
                if(response.status !== 'success') {
                    console.log('Query failed: ' + response.message);
                    return;
                }
                var banner = document.getElementById('banner');
                // Change banner based on the country code
                switch(response.CountryCode) {
                    case "GB":
                        banner.innerHTML = '<a href="https://apip.cc"><img src="https://apip.cc/banner-gb.png" alt="UK Banner"></a>';
                        break;
                    case "US":
                        banner.innerHTML = '<a href="https://apip.cc"><img src="https://apip.cc/banner-us.png" alt="US Banner"></a>';
                        break;
                    default:
                        banner.innerHTML = '<a href="https://apip.cc"><img src="https://apip.cc/banner-default.png" alt="Default Banner"></a>';
                }
            }
        };
        xhr.open('GET', endpoint, true);
        xhr.send();
    </script>
</head>
<body>
    <div id="banner">
        <!-- Default content if JavaScript fails or is disabled -->
        <a href="https://apip.cc"><img src="https://apip.cc/banner-default.png" alt="Default Banner"></a>
</div>
        
<p>Source: <a href="https://apip.cc/display-different-banners-based-on-visitor-country.html">Display Different Banner Based on Visitor Country Using JavaScript</a></p>
    
</body>
</html>