Visitor Counter on Website

How many people visit my website? This is the question in the mind of every website developer. Today, I give you the solution by using Count API-JavaScript. Just follow there simple steps to integrate:
 

1. Create Output

Add this code, where you want to show counter.

<h1>Visitors: <span id="visits"></span></h1>

2. Create Namespace and Key

Open the following URL in browser and replace the domain name.

https://api.countapi.xyz/create?namespace={domain of your website}&enable_reset=1

This will give you a key. The key look like below.

{"namespace":"mydomain.com","key":"6terr19ff9-bf33-3338-b9d5-5g1d1215254","value":0}

This is sample key that I generate for my website. Please keep your key secret for further use.

3. Call the count in Webpage

Now Copy/Paste the following script in between the head tags of your HTML file.

<script async src="https://api.countapi.xyz/hit/{namespace}/{key}?callback=websiteVisits"></script>

Replace {namespace} with your domain name and {key} with your key value.

4. Display count

Copy/Paste the following script at the end before the Body Tag.

<script type="text/javascript">
	function websiteVisits(response) {
    document.querySelector("#visits").textContent = response.value;}
</script>

Refresh the website, counter will show visitors. This will increment after every refresh.

Visitor: 1

5. Reset Value

Following code will reset the value to 0.

https://api.countapi.xyz/set/{namespace}/{key}?value={whatever you want, most likely 0}

Replace {namespace} with your domain name and {key} with your key value.

6. Check Total Counts

When you open the website, it will increment count. If you want to check counts without increment, copy/paste the following URL:

https://api.countapi.xyz/get/{namespace}/{key}

Replace {namespace} with your domain name and {key} with your key value.

This will show result without increment.

{"value":5}

I have a feeling that the tips and suggestions in this post will be helpful!

Please share this page to friends.

Asif Shahzad | Full Stack Web Developer

Welcome to our Software Solutions Company , where we excel in transforming ideas into tangible realities. We have expertise in developing online management systems, website designing & development, software solutions, mobile app development, e-commerce solutions and graphic designing. We provide 24/7 services.