Visitor Counter Installation Guide - 100% Free Forever
Quick Start
Follow these simple steps to add the visitor counter to your website:
Add the Script to Your Website
Copy and paste the following script into your HTML, just before the closing body tag:
<script>
(function() {
const domain = encodeURIComponent(window.location.hostname);
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const page_path = window.location.pathname;
const page_title = document.title;
const referrer = document.referrer;
// Extract search query if coming from a search engine
let search_query = '';
if (referrer) {
try {
const url = new URL(referrer);
if (url.hostname.includes('google.com')) {
search_query = url.searchParams.get('q') || '';
} else if (url.hostname.includes('bing.com')) {
search_query = url.searchParams.get('q') || '';
} else if (url.hostname.includes('yahoo.com')) {
search_query = url.searchParams.get('p') || '';
} else if (url.hostname.includes('duckduckgo.com')) {
search_query = url.searchParams.get('q') || '';
}
} catch (e) {
// Invalid URL, ignore
}
}
fetch('https://visitor.6developer.com/visit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
domain,
timezone,
page_path,
page_title,
referrer,
search_query
})
})
.then(response => response.json())
.then(data => {
console.log('Visitor count:', data);
// You can display the count on your page
if (document.getElementById('visitor-count')) {
document.getElementById('visitor-count').textContent = data.totalCount;
}
})
.catch(error => console.error('Error:', error));
})();
</script>
Display the Counter (Optional)
If you want to display the visitor count on your page, add this HTML where you want the counter to appear:
<div>
Visitors: <span id="visitor-count">0</span>
</div>
Advanced Installation Options
Using NPM Package
Install our official NPM package for easier integration with JavaScript frameworks:
npm install @rundevelrun/free-visitor-counter
Then import and use it in your code:
// React example
import { VisitorCounter } from '@rundevelrun/free-visitor-counter';
function App() {
return (
<div>
<h1>My Website</h1>
<VisitorCounter />
</div>
);
}
// JavaScript example
import { trackVisit, displayCounter } from '@rundevelrun/free-visitor-counter';
// Track visit
trackVisit().then(data => {
console.log('Visitor count:', data);
});
// Display counter in element with id "visitor-counter"
displayCounter('visitor-counter');
For more information, visit the GitHub repository.
Custom Implementation
For custom implementations, you can use our API directly:
// Example: Custom implementation with fetch API
const recordVisit = async () => {
const domain = window.location.hostname;
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
try {
const response = await fetch('https://visitor.6developer.com/visit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ domain, timezone })
});
const data = await response.json();
console.log('Visit recorded:', data);
return data;
} catch (error) {
console.error('Failed to record visit:', error);
return null;
}
};
// Call the function
recordVisit();
Troubleshooting
The counter is not updating
Make sure your domain is correctly detected. Check the browser console for any errors.
CORS errors in console
Our API allows cross-origin requests. If you're seeing CORS errors, it might be due to network restrictions or browser extensions.
Need more help?
Please open an issue on our GitHub repository.
Frequently Asked Questions About Installation
Is this visitor counter really free to install?
Yes, our visitor counter is completely free to install and use. There are no hidden costs, premium features, or paid tiers.
Do I need to create an account to use the counter?
No, you don't need to create an account. Simply add the script to your website and it will start tracking visitors immediately.
Will the counter work with any website?
Yes, our visitor counter works with any website, regardless of the platform or technology used. It's compatible with WordPress, Shopify, Wix, custom HTML sites, and more.
How do I customize the appearance of the counter?
You can customize the appearance of the counter by styling the HTML element that displays the count. You can use CSS to change the font, color, size, and more.
Can I use the counter with a single-page application (SPA)?
Yes, our visitor counter works with single-page applications. You can use our NPM package for easier integration with React, Vue, Angular, and other JavaScript frameworks.