Simple Ajax Chat Pro (SAC Pro) provides an “online users” widget that displays the active status of chat users. This tutorial explains how to display the online-users widget next to your chat form, or anywhere that makes sense.

Display the online users widget

To display an online-users widget for any form, add the following shortcode to your post or page:

[sacpro_online form_id="YourFormID"]

Then change the YourFormID to match your actual form ID. It should be the exact same ID that is used by your chat form.

Important: In order for the shortcode to work, a chat form (with the same ID) must be included on the page. If the chat form does not exist on the page, the shortcode will not work. So for example this will work beautifully:

[sacpro form_id="YourFormID"]        // displays the chat form
[sacpro_online form_id="YourFormID"] // displays number of users

Notice the form_id attributes match with the same value. Perfect.

Important: The [sacpro] and [sacpro_online] shortcodes can be used only once per page.
Tip: Learn more about using form IDs with SAC Pro shortcodes.
Output

After adding the online-users widget, it should look similar to this (depending on your theme and chat users):

Screenshot of online-users widgetScreenshot of the online-users widget

Customize

The online-users shortcode can be customized by adding attributes, for example:

[sacpro_online form_id="YourFormID" style="online_list" display="admin"]

By adding the style attribute, we tell SAC Pro to display the widget as an HTML list. The display attribute tells SAC Pro to display the widget to admin-level users only. Visit the SAC Pro shortcode documentation for more attributes and information.

Quick Link: Complete descriptions of attributes for [sacpro_online] available in the SAC Pro shortcode documentation.

Display number of users

The online-users widget can be configured to display the current number of active chat users. Just specify number_active as the value of the style attribute, which looks like this:

[sacpro_online form_id="YourFormID" style="number_active"]

Add that shortcode to any post or page to output the number of active users for the specified form ID. Don’t forget to change YourFormID with the actual ID of your chat form.

Styling

In the markup, the active number is wrapped with a <span> tag like so:

<span class="sacpro-active-users">3</span>

So you can add custom CSS to style the number, and/or add some extra markup and text, for example you can add the following to your page:

<div class="sacpro-active-users-wrap">[sacpro_online form_id="YourFormID" style="number_active"] active users</div>
Important: Notice there are no line breaks in the above shortcode example. That prevents WordPress from adding unwanted paragraph tags <p> and other markup. Take-home message: no line breaks; keep everything (shortcode, markup, text) on the same line.

The above code will output the following text on the front end (depending on actual number of users):

3 active users

Then you can style the text using the classes, .sacpro-active-users-wrap and .sacpro-active-users. Here is a tutorial that explains how to add custom CSS to SAC Pro.

Bonus: change the update interval

By default, the online-users widget displays 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 - online-users interval
function sacpro_online_users_interval($minutes) {
	return 5; // minutes
}
add_action('sacpro_online_users_interval', 'sacpro_online_users_interval');

Then change the 5 to any number of minutes.