Get ready to build a real-time online users widget using JavaScript and HTML, no prior backend experience necessary, perfect for beginners! By the end of this tutorial, you'll be able to add a WordPress-like 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.
In this tutorial, we will configure an occupancy counter using the Presence API, our online/offline detection module designed for subscribers. It will display online users in real-time as they join and leave using a widget, just like the one on a Wordpress site, which you can easily drag and drop into your web pages. This is an excellent tool for website owners who aim to enhance their site's user online status visibility. And guess what? This can all be achieved in just 15 lines of JavaScript.
Ever noticed how Reddit, a popular ecommerce platform, 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.
How to Create an App to Display Online Users
To get started, sign up for a PubNub account and create a project in the Admin Dashboard.
This widget utilizes the Presence API, an event emitter for join, leave, timeout (and more) events of users that are connected to PubNub using your pub/sub keys. The Presence API also offers JSON data about the IP address of the online users. Enable the presence feature for your key and set the number of seconds between Presence updates under the settings. Don't forget to click the save button at the bottom of the page once you have configured everything, from frontend to backend settings.
The Presence API has undergone some improvements over time, now allowing you to retrieve occupancy (number of active users) on multiple channels simultaneously using the multi-channel feature. All these notifications come with real-time metrics leading to much better performance and user experience. The API, now integrated with WebSockets, also offers improved performance when dealing with a high volume of connection status changes. For more details please check Presence API Documentation
The following JavaScript snippet will help you set up the front-end for your widget. This code includes the latest version of the PubNub JavaScript SDK and some CSS to ensure that the widget stays fixed in the bottom left corner of a webpage, even when the user scrolls down.
Now, copy this code and customize it according to your needs. If your website uses a reactive framework like Angular, React, or Vue, I recommend using data binding to keep the number of users in sync with the data store.
Related Topics
Following our WordPress tutorials, you will see how easy it is to add PubNub's real-time features to your WordPress website. For instance, you can enable real-time tracking of online WooCommerce customers in no time!
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. To integrate PubNub with your WordPress site, you can follow the instructions in our PHP and AJAX tutorials.
Experience PubNub
To understand the essential concepts behind every PubNub-powered app in less than 5 minutes, check out our updated Live Tour. This can also help you understand how to optimize your website’s SEO by using PubNub.
Get Setup
Sign up for a PubNub account and gain immediate access to PubNub keys for free. This will take you a step closer to creating your own real-time applications.
Get Started
The PubNub docs and our updated list of SDKs will help you get up and running, regardless of your use case. We have several integrations and templates ready to be used with PubNub for a seamless development experience.