Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
The simplest way to add a browser tab notification in WordPress is to run a small front-end JavaScript file that watches the page’s visibilitychange event. When a visitor switches to another tab, the script replaces the browser tab title with a short reminder; when the visitor returns, it restores the original title. This is a tab-title or favicon reminder—not a permission-based web push notification.
What a WordPress browser tab notification does
A browser tab notification changes the text displayed in the tab while your page is hidden. Typical messages include “Your cart is waiting” or “Come back to finish signing up.” The original page title should be saved before the change and restored as soon as the page becomes visible again.
This feature runs in the visitor’s browser. It does not display an operating-system notification, request push permission, or reach visitors after they close the page. Web push requires a separate service-worker and permission workflow.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Choose a plugin or custom JavaScript
| Approach | Best for | What you control | Trade-offs |
|---|---|---|---|
| Custom JavaScript | Site owners or developers who need precise behavior | Message text, delay, timing, page targeting and optional favicon changes | Requires code maintenance and testing with the active theme and other scripts |
| WordPress plugin | Administrators who prefer settings instead of editing code | Usually messages, counters, timing, page targeting and sometimes favicons | Features, compatibility and update activity vary by listing and version |
WordPress.org listings for Tab Teaser, GoalPrevail Tab Notifications and similar plugins describe title changes when a visitor leaves a tab and restoration on return. Check each current listing’s compatibility, update history, settings and privacy disclosures before installing; these descriptions are publisher statements, not an independent compatibility or performance test.
#1 Best Overall
Custom implementation with JavaScript
1. Add the script to your theme or site plugin
Put the following code in a small site-specific plugin or your child theme’s functions.php. A site-specific plugin is safer because the code is not tied to a theme change.
<?php
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_script(
'tab-reminder',
get_stylesheet_directory_uri() . '/js/tab-reminder.js',
array(),
null,
true
);
} );Create the referenced file at /js/tab-reminder.js in the child theme (or adjust the URL if you use a plugin).
2. Watch for the visitor leaving and returning
( function () {
const originalTitle = document.title;
const reminderTitle = 'Your cart is waiting';
document.addEventListener( 'visibilitychange', function () {
if ( document.hidden ) {
document.title = reminderTitle;
} else {
document.title = originalTitle;
}
} );
}() );The title is captured once, before any reminder is shown. That prevents the reminder from becoming the new “original” title and ensures the intended title returns when the visitor comes back.
3. Add a delay and a stop rule when appropriate
Changing the title immediately can be distracting, especially on informational pages. This version waits two seconds before changing it and cancels the pending change if the visitor returns first. It also avoids repeatedly replacing the title while the tab remains hidden.
( function () {
const originalTitle = document.title;
const reminderTitle = 'Your cart is waiting';
let reminderTimer = null;
let reminderShown = false;
document.addEventListener( 'visibilitychange', function () {
if ( document.hidden ) {
if ( reminderShown || reminderTimer ) {
return;
}
reminderTimer = window.setTimeout( function () {
document.title = reminderTitle;
reminderShown = true;
reminderTimer = null;
}, 2000 );
} else {
if ( reminderTimer ) {
window.clearTimeout( reminderTimer );
reminderTimer = null;
}
document.title = originalTitle;
}
} );
}() );Adapt the message and delay to the page’s purpose. For a checkout or signup flow, a single reminder may be useful; on a content-heavy site, running it on every page can become noise.
Limit the reminder to selected WordPress pages
Targeting prevents a global script from appearing where it has no useful context. You can conditionally enqueue the file in PHP:
<?php
add_action( 'wp_enqueue_scripts', function () {
if ( ! is_cart() && ! is_checkout() && ! is_page( 'signup' ) ) {
return;
}
wp_enqueue_script(
'tab-reminder',
get_stylesheet_directory_uri() . '/js/tab-reminder.js',
array(),
null,
true
);
} );The WooCommerce conditional functions in this example require WooCommerce. Replace them with conditions that match your site, such as is_page( 42 ), is_singular( 'event' ) or a taxonomy check.
How WordPress generates the normal document title
WordPress’s wp_get_document_title() returns the generated document title. The document_title filter can alter that final title, while document_title_parts and document_title_separator affect its components and separator. The document_title filter was introduced in WordPress 5.8.0.
The pre_get_document_title filter runs before title generation. Returning a non-empty value from it short-circuits wp_get_document_title(); its reference records introduction in WordPress 4.4.0.
Rank #4
Use those PHP hooks when you need to change the page’s normal, server-generated title. A tab-away reminder is temporary browser state, so JavaScript should handle the visibility change and restore the title it replaced. A PHP filter alone cannot detect that a visitor switched tabs.
Optional favicon changes
A favicon change can reinforce the reminder visually, but it is a separate operation from changing document.title. Save the existing icon URL, add or update the favicon link while the page is hidden, and restore the original link when the page becomes visible. Test this carefully with themes or plugins that manage multiple icon links; otherwise you may restore the wrong element.
Recommended Free Tools
Plugin listings for Tab Teaser and GoalPrevail Tab Notifications describe optional favicon behavior and restoration. GoalPrevail’s listing says its behavior is client-side and reversible, while Tab Teaser’s listing says it reads the browser’s standard visibilitychange event to decide when to swap the title and favicon. Those are vendor descriptions, not independent browser tests.
Best Value
Plugin installation checklist
- In WordPress, open Plugins > Add New Plugin.
- Search for the exact plugin name and review its current author, version, WordPress compatibility and last-updated information.
- Read the settings before activation: look for message text, delay or repeat controls, page targeting and favicon options.
- Check the plugin’s privacy disclosure. Tab Teaser states that its front-end behavior makes no external requests; GoalPrevail describes client-side behavior and discloses a WordPress.org API request in its administration dashboard. These are publisher statements.
- Activate it on a staging site or a low-risk page first, then test desktop and mobile browsers.
Test the finished feature
- Open the target page and record the normal title shown in the tab.
- Switch to another tab and confirm the reminder appears after the configured delay, if any.
- Return to the page and confirm the exact original title is restored.
- Reload the page and repeat the test to ensure state is not retained incorrectly.
- If you added a favicon, verify that it also returns to its original state.
- Check pages that should be excluded and confirm no reminder script is loaded there.
- Inspect the browser console for JavaScript errors and test with caching or optimization plugins enabled.
Common problems and fixes
The title never changes
Confirm the script is enqueued on the page, that the file URL loads successfully, and that no JavaScript error stops execution. The event fires when the document’s visibility changes, not merely when the mouse leaves the window.
The reminder remains after returning
Make sure the visible branch assigns the saved original title and that the original title was captured before any replacement. If you use a delay, clear the timer when visibility returns.
The wrong title is restored
Another script may change document.title after your code captures it. Load your reminder after scripts that establish the page title, or coordinate with the script that owns the title.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteThe reminder is annoying visitors
Reduce its scope, add a delay, show it only once per page view, or remove it from pages where visitors are reading rather than completing a task.
What this feature can—and cannot—prove
A tab notification can make a hidden tab easier to notice, but the available plugin descriptions do not establish a measured increase in engagement, conversions or completed checkouts. Treat those outcomes as hypotheses to evaluate with your own analytics rather than guaranteed results.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
