Learn to create a real-time online user counter widget using JavaScript and HTML—no backend experience needed! Perfect for beginners, this tutorial shows you how to add an "active users" sidebar to your website, enhancing user experience. PubNub’s APIs, like Real-Time Messaging and Presence, make it easy to broadcast updates and manage large, interactive audiences efficiently.
What is a user counter (visitor tracker)?
A user counter is a system that tracks the number of users interacting with an application or website. It identifies users using methods like session IDs, cookies, or unique user IDs stored in a database. Active users are tracked via session management, often using tools like Redis or in-memory stores for real-time performance. Unique users are counted by aggregating distinct IDs over a time range. Event-driven implementations count users based on triggers like logins or page views, storing the data in databases or analytics tools. It ensures precise user tracking for analytics and system optimization
Types of Visitor Counters
Visitor counters track user activity on websites and come in several types. Early counters displayed total visits but required page refreshes to update. With Web 2.0, real-time counters emerged, updating dynamically as users visited. These evolved into total visit counters, showing cumulative site visits, and active user counters, indicating current visitors. While traditional counters remain popular on WordPress and WooCommerce, modern websites often use live "online users" indicators for engagement. Advanced systems now integrate analytics to track user behavior and provide detailed insights.
Visitor Counter Implementation Steps
This tutorial will guide you through creating and configuring a free occupancy counter to display online users using the PubNub Presence API, our online/offline detection capability.
The widget will display the number of active visitors (online users) in real-time and user activity will update instantly as they join and leave. As the website owner, you can easily add this to your web pages in just 15 lines of JavaScript.
Configure PubNub
To get started, sign up for a PubNub account and create a project in the Admin Dashboard.
This widget utilizes the Presence API, which exposes callbacks for events such as join, leave, and timeout for tracking users that are connected to PubNub.
Enable the presence feature for your key and set the number of seconds between Presence updates under the configuration options. Once you have configured everything, remember to click the save button at the bottom of the page.
The Presence API has improved over time. It now allows you to retrieve occupancy (the number of active users) on multiple channels in real time and can handle a high volume of connection status changes. For more information on the Configuration settings available for Presence, please see our Presence how-to guide.
The Source Code
The following JavaScript snippet will help you set up the front end. This code includes the latest version of the PubNub JavaScript SDK and some CSS to ensure the widget stays fixed in the bottom left corner of a webpage, even when the user scrolls down.
Copy this code and customize it according to your needs. You will need to replace the Publish and Subscribe keys with your own and to avoid bots, substitute the userId with a value from your authentication backend. If your website uses a reactive framework like Next.js, React, or Vue, I recommend using data binding to keep the number of users in sync with the data store.
Other Uses
The PubNub Presence API is used by many of our customers for a variety of use cases besides monitoring the online status:
- Activity tracking: By tracking when visitors go on or offline you can start to better understand your end users and what causes repeat visitors.
- End user behavior monitoring: The Presence API also supports ‘state’, enabling you to store temporary information about users during their session.
- Used in conjunction with browser notifications, you can bring inactive users back to your web page
For more information, check out our What is User Presence? guide.
Read more: HTML5 Mass Broadcasting Desktop Notifications
How can PubNub Help You?
Our platform assists developers in building, delivering, and managing real-time interactivity for web apps, mobile apps, and IoT devices. It's like a real-time plugin for your projects!
Our platform, built around the industry's largest and most scalable real-time edge messaging network, supports over a billion monthly active users and offers 99.999% reliability across 17 points-of-presence worldwide. This means you'll never have to worry about outages, concurrency limits, or latency issues caused by traffic spikes.
Experience PubNub
To understand the essential concepts behind every PubNub-powered app in less than 5 minutes, check out our updated Live Tour.
Get Started for Free
Get Started with PubNub by signing up for a free account right now.
