Real-time Notifications Setup

Overview

This document provides instructions on how to setup and use the Real-time Notifications extension. This extension allows users to receive updates and notifications directly on the website as they happen.

Contents

Settings #

Extension settings #

Once you activate the extension, you will see the Notifications tab on the page wp-admin > Ultimate Member > Settings > Extensions. On this page you can find the following options:

  • Enable real-time instant notification - It is recommended to turn this setting off if your server is getting some load.
  • How often do you want the ajax notifier to check for new notifications? (in seconds) - Set a period of the notifications update. We don't recommend setting a very short period to avoid site overload.
  • Where should the notification icon appear? - Select a place where the notification icon should be displayed.
  • Always display the notification icon - If turned off, the icon will only show when there's a new notification.
  • Notification sound - Play a sound when a new notification appears. It may not work in Chrome due to Autoplay Policy.
  • Account Tab
  • Turn on/off notifications and edit the notification templates:
    • Role upgrade
    • New comment reply
    • New user comment
    • New guest comment
    • User view profile
    • Guest view profile
    • User awarded points for action
    • User deducted points for action
    • User receives points from another person
    • New user review
    • User get a new private message
    • User get followed by a person
    • User get a new friend request
    • User get a new friend
    • User get a new wall post
    • User get a new wall comment
    • User get a new post like
    • User get a new mention
    • User account is verified
    • Groups - Approve Member
    • Groups - Join Request
    • Groups - Invite Member
    • Groups - Change Group Role
    • Groups - New post
    • Groups - New comment
    • Your job is approved
    • Your job is expired
    • User mention you in forum
    • User leaves a reply to topic
    • User creates a topic in forum

Pages settings #

Once you install the extension, it creates the Notifications page. This page contains the [ultimatemember_notifications] shortcode that shows a list of notifications for the current user.

You can make this page manually if it is lost. Once the page is created, you should configure it using the setting "Notifications page" on wp-admin > Ultimate Member > Settings > General > Pages.

User features #

Notification button #

A red circle will appear on the notifications button with a number inside when a user receives a notification. This number indicates how many new notifications are received. Users can view new and past notifications via the notifications button/popup or by going to the notifications page.

Image - The notifications button

The theme "UM Theme" moves the button to the site's header. The red dot with the counter is visible only when there are new notifications.

Image - The notifications button in the theme "UM Theme"

The extension provides options to view all and unread notifications. User can also load more notifications in the notification popup. When the ellipsis " ..." icon is clicked, users can choose what action to make, they can choose to See all notifications, Mark all notifications as read, Clear all the notifications and they can go to the Notifications settings.

Each notification has an ellipsis " ...". The button lets the user mark the notification as read, remove the notification or disable the type of notification. The notification will be marked as read-only after the "Mark as read" action is clicked or after visiting the notification URL.

Switch notifications ON/OFF #

If the Account Tab setting is turned on, users can control what notifications they want to receive from the tab Web Notifications tab in their account page. These include core notifications as well as installed extension notifications (e.g. User Reviews and myCrRED).

Image - The Account Tab setting on wp-admin > Ultimate Member > Settings > Extension > Notifications.

Image - The Web Notifications account tab.

For developers #

Add your custom notification

Look for an example here: Using notifications API to add custom notifications

Hide the default notification button in the footer

Add the CSS code snippet below to the style.css file in the child theme. This code hides the default notification button but doesn't affect the related notification feed, so you can use a custom notification button.

body > .um-notification-b {
	display: none !important;
}

Disable the default notification button in the footer

Add the PHP code snippet below to the functions.php file in the child theme. This code disables both the notification button and related notification feed.

add_action( 'init', function() {
	remove_action( 'wp_footer', 'um_notification_show_feed', 99999999999 );
} );