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>

Access Your Dashboard

Visit your dashboard to see detailed visitor statistics:

Go to Dashboard

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.