Get ready to build a real-time online users widget using JavaScript and HTML, no prior backend experience necessary and perfect for beginners! By the end of this tutorial, you can add an “active users” sidebar to your website. This widget can significantly optimize the user experience by showing the number of active users on your website.
PubNub offers the perfect solution for broadcasting updates to any number of concurrent subscribers. With APIs such as Real-Time Messaging and Presence, you can efficiently maintain the state for a large, interactive audience.
Types of Visitor Counters
Even in the early days of the Internet, sites displayed the number of users who had visited that site as a basic counter, but this would not update unless you refreshed the page. With the advent of “Web 2.0”, pages could now be dynamic and counters could increment in real-time as live users visited the site.
These ‘site counters’ can still be found on many WooCommerce and WordPress sites and are still offered by a number of WordPress plugins, but they are becoming increasingly rare outside of hobbyist websites. Counters have been replaced by an indicator showing the number of ‘online’ users, i.e. the number of active visitors currently viewing the webpage.
Have you ever noticed how Reddit displays a widget in its UI that shows how many users are currently browsing a particular subreddit? Let's create something similar! Doing so can help increase your pageviews and conversions.
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.
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.