Lookup user's country

For the best user experience, International Telephone Input supports setting the initial selected country to the user's current country, using an IP lookup service. This means that when the user first sees the phone input, they already see the correct flag displayed, and they see a familiar placeholder number that is relevant to their country.

To achieve this, you must enable two initialisation options. First, you must set the initialCountry option to "auto". This tells the plugin to use the IP lookup service to determine the user's country. Second, you must set the geoIpLookup option to a function that will make the IP lookup request and return the country code. The plugin will then use this country code to set the initial country correctly. In the example below, we make a request to a service called ipapi which allows a certain amount of lookups for free. We use JavaScript's fetch method to make the request, which is supported by all modern browsers. Note that within the geoIpLookup function, the callback must always be called, even in the event of an error, hence the use of catch in the example code.

Markup

<input id="phone" type="tel">

Code

const input = document.querySelector("#phone");
window.intlTelInput(input, {
  initialCountry: "auto",
  geoIpLookup: callback => {
    fetch("https://ipapi.co/json")
      .then(res => res.json())
      .then(data => callback(data.country_code))
      .catch(() => callback("us"));
  },
  loadUtils: () => import("/intl-tel-input/js/utils.js?1733756310855") // for formatting/placeholders etc
});