Easily display your users IP Address to your webpage using Javascript

Easily display your users IP Address to your webpage using Javascript

by

Here’s an Easy Method to Display The Users IP Address on Any Webpage

Quick method on how to display the users IP address on your website using javascript. As a developer you should already know the importance of such data. Displaying the IP address of your users on your website has various advantages and disadvantages. One disadvantage is that they probably freak out as to why you have their IP address? Why you knew it? How did you know it? And the questions go on and on.

Display the IP address of the user to your website

But the advantages outweigh the disadvantages. As a developer you need to track down your visitors IP address this way you may know the origin of your user and how can you improve your service by just knowing their location. This is an important factor to consider when doing a marketing campaign to your users. By just knowing their IP address you will know what to target, where to target and when to target.

On this tutorial we will provide you a simple code snippet that you can easily paste on your website source code and it will work automatically. You don’t need to rework any code it; you may remove my website link but that’s up to you. Putting it there would be a good idea for my backlinking purposes.

Anyway, this is simple code written in javascript where you can display the IP Address of your user to your website.

Code Snippet on displaying the users IP address to a webpage using javascript

<!DOCTYPE html> 
<html> 

<head> 
	<title>Demo: Get Client IP Address using Javascript - xedricity.com</title> 
	<style> 
		h1 { 
			color: red; 		
		} 
		
		h2 {
		color:green;
		font-weight:bold;
		}
	</style> 
	<script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
	</script> 

	<script> 
		/* Add "https://api.ipify.org?format=json" This method uses ipify.org api to get the clients IP Address. 
		This method is completely free and no limitations of use. */ 

		$.getJSON("https://api.ipify.org?format=json", 
										function(data) { 

			// userip element is where the IP will be displayed
			$("#userip").html(data.ip); 
		}) 
	</script> 
</head> 

<body> 
	<center> 
		<h1><a href="https://xedricity.com/">XEDRICITY.COM</a> - DEMO</h1> 
		<h3>Public IP Address of user is:</h3> 

		<h2 id="userip"></h2> 

	</center> 
</body> 

</html>

Here’s a full code demo

DEMO

Pros and Cons

Pros

– This method is free of use. Unlike most of the GEO location IP services which requires upfront payment to use their API – this one doesn’t

– Very easy to use. Coder friendly and does not require a lot of work.

Cons

– Kinda slow reponse. When you notice the IP address does not displayed immediately when the page loads.

– Limited use, like most of the IP services that you can use for free – this one has its limitation as well.

– You can only use the IP address variable. Most of the IP services provides more data such as the Country, Region, City, Currency and more. With ipify you can only use the IP data.

Leave a Comment