"Who's online now" - presence widget for WordPress

This is a quick tutorial for Twig Anything WordPress plugin.
We will show a WP widget listing users who’re currently online:


If you need more detailed instructions, see “recently joined” widget tutorial.
This topic just puts together the template snippets and API endpoint you will need for the presence widget.


What API to use

Even though there is no true presence API in Discourse (feature request), we can use what is available for admins by this url: /admin/users/list/active:

Make sure you have your Discourse API key ready.

The API call is to /admin/users/list/active.json


Data Source configuration

  • Source Type - set to URL
  • Data Format - set to JSON
  • Cache lifetime in seconds - set to something small because it needs to be updated quite often. Anything up to 5 minutes would make sense. Not setting any cache at all would be impractical as it will cal Discourse API every time you refresh your wordpress page.
  • Data errors handling - choose as by your preference
  • Data URL: set to
    http://your-discourse-url.com/admin/users/list/active.json?api_username=XXX&api_key=YYY
    XXX - your Discourse admin username
    YYY - your Discourse admin api key

Twig Template code

{% set num = 1 %}
{% for user in data if (date(user.last_seen_at) > date('-3hours') and not user.suspended and not user.blocked) %}
  {% if num <= 5 %}
    {% if date(user.last_seen_at) > date('-1hours') %}
      <span style="color: green; font-size: bigger;">•</span>
    {% else %}
      <span style="color: orange; font-size: bigger;">•</span>
    {% endif %}
    <img src="http://forum.kozovod.com{{ user.avatar_template|replace({'{size}':'22'}) }}" />
    <a href="http://forum.kozovod.com/users/{{user.username_lower}}">
          {{user.username}}
    </a>
    <sup><small style="color: gray">{{ user.last_seen_age }}</small></sup>
    <br/>
  {% endif %}
  {% set num = num + 1 %}
{% endfor %}

date('-3hours') - reads as “current date minus 3 hours” - change to your desired presence sensitivity. Anyone who wasn’t seen in the last 3 hours period will not be in the list. This is quite a long period and I chose it for my demo just because I have few visitors in my Discourse (less than 200). You can even skip this condition entirely to always have something in the list.

{% if num <= 5 %} - no more than 5 users in the list.

{% if date(user.last_seen_at) > date('-1hours') %} - if seen in last hour, show with a green circle, otherwise show with an orange circle.

{{ user.avatar_template|replace({'{size}':'22'}) }} - output user avatar 22px

{{ user.last_seen_age }} - a human readable field returned by Discourse API e.g. 1m, 15m, 1h, 2h etc.


Setting up a widget

As simple as dragging a widget to your widget area and entering the slug of the Twig Template we just created.


P.S. Give it a try and share your screenshot and template snippet with us.

I have seen quite a few requests for presence feature, hence this topic. Hope it helps someone!*

5 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.