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 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. Learn more about using form IDs with SAC Pro shortcodes.

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. For a complete description of the attributes, check out the SAC Pro shortcode documentation.

Display number of active users

Another way to display the online-users widget is to show 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 the number of active users

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.