Out of the box, Simple Ajax Chat Pro (SAC Pro) provides an online-users widget that displays the active (online) status of chat users. The online-users widget is simple to use, matches the design of any theme, and can be customized via shortcode attributes. Alternately, SAC Pro makes it possible to enable active-status indicators for chat users, little green dots that are displayed next to each user’s name in the chat box. This tutorial explains how to enable it with a few clicks.

Tip: Just getting started with SAC Pro? Check out the Quick Start Guide »

Display status via online-users widget

Out of the box, SAC Pro makes it easy to display an online-users widget for any chat form. The online-users widget is updated dynamically via Ajax, so it always displays the current active status of chat users. Depending on your theme, the widget looks something like this:

Screenshot of online-users widgetScreenshot of the online-users widget displayed on the Twenty Sixteen theme

Learn more about the online-users widget »

Display active-status next to user names

Instead of the online-users widget, you can display visual “online” indicators (e.g., little green “dot” icons) right next to user names in the chat window (see screenshots below). The active-status indicators work a bit differently than the online-users widget. While the online-users widget is updated dynamically (via Ajax), the active-status indicators are not. So that means the chat page needs to be reloaded in order for the correct active-status indicators to be displayed.

When would this be useful? The active status indicators are designed for single-run chat sessions where the user visits the chat, participates, and then exits. So if you’ve got such a form and prefer to display active-status icons (instead of the online-users widget), continue reading to learn how to enable it with a few clicks.

Important: It is not recommended to display both the online-users widget and visual online indicators on the same chat form. Due to how they work, the online-users widget may not match up with the active-status indicators. So just use one or the other per chat form is recommended.
Enable active-status for all themes except “Hero”

For all chat themes except “Hero”. To enable active-status icons next to user names, visit the SAC Pro settings and go to the Appearance tab. Scroll down to “Custom Style” and add the following bit of CSS:

.sacpro-chats .sacpro-chat.sacpro-user-online .sacpro-chat-sep::before { display: block; }

Save changes and done. After reloading your chat page on the front end, the active-status indicators should look similar to this:

Screenshot of active-users indicators (green dots)Screenshot of active-users indicators (displays as green dots for all chat themes except “Hero”)

Enable active-status for the “Hero” theme

For the “Hero” theme. To enable active-status icons next to user names, visit the SAC Pro settings and go to the Appearance tab. Scroll down to “Custom Style” and add the following bit of CSS:

.sacpro-chats .sacpro-chat.sacpro-user-online .sacpro-chat-avatar, .sacpro-chats .sacpro-chat.sacpro-user-online .sacpro-chat-avatar-placeholder { padding: 1px; border: 2px solid #00CC66; }

Save changes and done. After reloading your chat page on the front end, the active-status indicators should look similar to this:

Screenshot of active-users indicators (green rings)Screenshot of active-users indicators (displays as green rings for “Hero” theme)

Tip: You may need to refresh the chat page for the green online indicators are displayed. If you refresh the page and no green indicators are displayed, try sending a new chat message should do the trick.

Bonus: change the update interval

By default, the active-status indicators display green if the user has been active within the past five (5) minutes. To change the interval, add the following function to your WordPress theme (or child theme) functions.php file (or add via simple custom plugin):

// SAC Pro - active-status interval
function sacpro_online_class_interval($minutes) { 
	return 5; // minutes
}
add_action('sacpro_online_class_interval', 'sacpro_online_class_interval');

Then change the 5 to any number of minutes.