Skip to main content

Localizing a website based on current country or city

In this tutorial, we show you how to use the Radar web SDK and IP geocoding API to localize a website based on current country or city.

For example, you may show a default language or currency based on current country. Or, you may show nearby content based on current city.

Video#

Languages used#

  • HTML
  • JavaScript

Features used#

Steps#

Step 1: Sign up for Radar#

If you haven't already, sign up for Radar to get your API key. You can make up to 100,000 API requests per month for free.

Get API keys

Step 2: Install the Radar web SDK#

In an HTML page, include the SDK using a <script> tag:

<script src="https://js.radar.com/v4/radar.min.js"></script>

In a web app, install the package from npm, then import the library:

npm install --save radar-sdk-js
import Radar from 'radar-sdk-js';

Step 3: Call the IP geocoding API#

The IP geocoding API converts IP address into city, state, and country.

Initialize the SDK with your publishable API key, then call the IP geocoding API.

In the callback, result.address will include countryCode, stateCode, city, coarse latitude and longitude, and more.

Radar.initialize("prj_test_pk_...");
Radar.ipGeocode(function(err, result) {  if (err) {    console.error(err);
    return;  }
  if (result && result.address) {    // do something with result.address.countryCode  }});

Sample code#

<html>  <head>    <title>Hello, world!</title>    <script src="https://js.radar.com/v4/radar.min.js"></script>  </head>  <body>    <div id="country">      Loading...    </div>
    <script type="text/javascript">      Radar.initialize("prj_test_pk_...");
      Radar.ipGeocode(function(err, result) {        if (err) {          console.error(err);
          return;        }
        if (result && result.address) {          console.log(result.address);
          document.getElementById("country").innerHTML = "Your country is " +            result.address.countryFlag + " " + result.address.countryCode;        }      });    </script>  </body></html>

Support#

Have questions or feedback on this documentation? Let us know! Email us at support@radar.com.