Title Notification Badge

The Title Notification Badge displays unread notification and message counts in the browser tab title. Users can see at a glance if they have new notifications without needing to check the page.

Overview

This function adds a notification badge to the browser tab title that shows unread counts for notifications and/or messages. The badge updates in real-time via polling, and optionally flashes to alert users of new notifications.

Key Features

• Display unread count in browser tab title (e.g., “(3) Site Title”)
• Real-time updates via configurable polling interval
• Include notifications, messages, or both
• Works on all pages for logged-in users

Setup Instructions

Step 1: Enable the Function

1. Navigate to Voxel Toolkit → Functions in your WordPress admin
2. Find Title Notification Badge in the list
3. Toggle the switch to enable
4. Click Save Changes

Step 2: Configure Settings

1. Click the settings icon next to the function
2. Configure your preferred options
3. Save your changes

Configuration Settings

Setting	Description	Default
Poll Interval	How often to check for new notifications (in seconds)	15 seconds
Include Notifications	Count unread notifications in the badge	Yes
Include Messages	Count unread messages in the badge	Yes
Flash on New	Flash the title when new notifications arrive	Yes
Flash Text	Text to flash in the title	“New notification!”

How It Works

Badge Display

When a user has unread items, the browser tab title changes from:

My Website

To:

(5) My Website

Where “5” is the total count of unread notifications and messages.

Flash Effect

When new notifications arrive and flash is enabled, the title alternates between:

• The flash text (e.g., “New notification!”)
• The normal badge title (e.g., “(5) My Website”)

This creates an attention-grabbing effect in the browser tab.

Polling

The function polls the server at your configured interval to check for new notifications. Shorter intervals provide faster updates but increase server load. The default of 15 seconds provides a good balance.

Use Cases

Real-Time Communication

Let users know they have new messages without requiring them to keep checking the inbox.

Engagement Notifications

Alert users to new likes, comments, or follows on their posts.

Order Updates

Notify vendors of new orders or order status changes.

Background Monitoring

Users can work in other tabs while keeping an eye on notification counts.

Troubleshooting

Badge Not Appearing

• Verify you are logged in
• Check that the function is enabled
• Ensure you have unread notifications or messages
• Clear browser cache

Badge Not Updating

• Wait for the poll interval to pass
• Check for JavaScript errors in browser console
• Verify AJAX requests are not being blocked

Flash Not Working

• Ensure “Flash on New” setting is enabled
• Flash only triggers when count increases from previous check
• Some browsers may limit title change frequency