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:
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):
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:
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>
<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. Here is a tutorial that explains how to add custom CSS to SAC Pro.