Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Easily Add Browser Tab Notification in WordPress

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to add a browser tab notification for your website?

Adding browser tab notifications can be a great way to recapture a user’s attention, lower cart abandonment rate, and increase sales and revenue.

In this article, we will show you how to easily add browser tab notifications in WordPress.

How to Add Browser Tab Notification in WordPress

What Is aa Browser Tab Notification?

A browser tab notification is a message that appears on your website browser tab when the user is focusing on a different site in their browser.

By adding a browser tab notification feature on your WordPress website, you can grab the user’s attention the moment they open another tab to leave your page.

For instance, you can change the favicon of your website, animate it, write a custom message, or just flash the tab.

If you have an online store, browser tab notifications can really help you out. These notifications will bring back distracted customers, lower cart abandonment rates, and increase customer engagement.

Using this feature, you can alert your customers about cart abandonment or even offer a discount if they return their attention to your site.

Here is an example of a browser tab notification.

Browser tab notification example gif

That being said, we will show you how to easily add different types of browser tab notifications in WordPress.

You can use the links below to jump to the method of your choice:

Install WPCode to Add Browser Tab Notifications

You can easily add browser tab notifications on your site by adding custom code in WordPress. Usually, you have to edit your theme’s functions.php file, but that can break your website with even a small error.

That’s why we recommend using WPCode, which is the best WordPress code snippets plugin on the market. It is the safest and easiest way to add custom code to your site.

First, you need to install and activate the WPCode plugin. For more details, you can see our step-by-step guide on how to install a WordPress plugin.

Note: WPCode also has a free version that you can use for this tutorial. However, upgrading to the paid plan will give you access to more features.

Upon activation, visit the Code Snippets » + Add Snippet page from your WordPress admin sidebar.

Now, hover your mouse over the ‘Add Your Custom Code (New Snippet)’ option and click on the ‘Use Snippet’ button under it.

Add new snippet

This will take you to the ‘Create Custom Snippet’ page.

No matter which type of browser tab notification you use, you will enter the code here.

Create Custom Snippet page

Type 1: Showing New Updates as a Browser Tab Notification

This method is for you if you want your users to be alerted about any new updates that are being posted on your site. A number will appear in the tab to tell them how many new items they are missing.

For example, if you have a WooCommerce store and you just added some new products to the inventory, the user will see a number that indicates how many new products were added in the browser tab notification.

You can see this in the image below:

New Updates as browser tab notification

Once you’re on the ‘Create Custom Snippet’ page, you need to name your snippet. You can choose anything that helps you identify the code.

Next, select ‘JavaScript Snippet’ as the ‘Code Type’ from the drop-down menu on the right.

Select JavaScript as Code Type

Then, all you have to do is copy and paste the following code snippet into the ‘Code Preview’ box:

let count = 0;
const title = document.title;
function changeTitle() {
    count++;
    var newTitle = '(' + count + ') ' + title;
    document.title = newTitle;
}
function newUpdate() {
    const update = setInterval(changeTitle, 2000);
}
document.addEventListener('DOMContentLoaded', newUpdate );

Once you have done that, scroll down to the ‘Insertion’ section. You will find two options: ‘Auto Insert’ and ‘Shortcode.’

Simply choose the ‘Auto Insert’ option, and your code will be automatically inserted and executed on your site.

You can use the ‘Shortcode’ method if you only want to show new updates on specific pages where you add the shortcode.

Choose an insertion method

After that, scroll back to the top of the page and toggle the ‘Inactive’ switch to ‘Active’.

Finally, click the ‘Save Snippet’ button to store your settings.

Save your code snippet

With that finished, your custom code snippet will be added to your site and start working.

Type 2: Changing Favicons as a Browser Tab Notification

With this method, you will show a different favicon on your site’s browser tab when users navigate away to another tab.

A favicon is a small image that you see on web browsers. Most businesses will use a smaller version of their logo.

Favicon as web browser notification

To change favicons on your browser tab, we will be using the WPCode plugin.

First, visit the Code Snippets » + Add Snippets page in your WordPress admin panel and click on the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.

This will take you to the ‘Create Custom Snippet’ page, where you can start by entering a title for your code snippet.

Now, simply choose ‘HTML Snippet’ as the ‘Code type’ from the dropdown menu on the right.

Choose HTML as your Code Type

Once you’ve done that, copy and paste the following code in the ‘Code Preview’ box:

<link id="favicon" rel="icon" href="https://example.com/wp-content/uploads/2022/10/favicon.png"/>

<script>var iconNew = 'https://example.com/wp-content/uploads/2022/10/favicon-notification.png';

function changeFavicon() {
    document.getElementById('favicon').href = iconNew;
}
function faviconUpdate() {
    const update = setInterval(changeFavicon, 3000);
    setTimeout(function() { 
        clearInterval( update ); 
    }, 3100);
}

After you’ve pasted the code, simply remove the example favicon links from the code and replace them with your own image links.

You can see the links highlighted in our code below.

Paste the HTML code and remove the example favicon image links

Remember, the images you choose as favicons should already be uploaded to the media library of your WordPress site.

Otherwise, the code will not work, and your favicon won’t change.

Change favicon image links

Once you have done that, scroll down to the ‘Insertion’ section.

You can choose the ‘Auto Insert’ option if you want to automatically embed the code on every page.

Choose an insertion method

To change the favicon on only specific pages, select the ‘Shortcode’ option and paste it into any shortcode-enabled area, such as sidebar widgets or at the bottom of the content editor.

Next, go to the top of the page and toggle the switch from ‘Inactive’ to ‘Active’ in the top right corner, and then click the ‘Save Snippet’ button.

After that, your favicon will start changing as a browser tab notification.

Type 3: Changing Site Title as a Browser Tab Notification

This method is for you if you want to change the site title to recapture your visitor’s attention.

By using this code snippet, your site title will change to show an eye-catching message when users switch to another tab in the browser.

Changing site title in a browser

We will be using the WPCode plugin to change your site title as a browser tab notification.

To get to the ‘Create Custom Snippet’ page, visit the Code Snippets » +Add Snippets page from the admin sidebar and click ‘Use Snippet’ under the ‘Add Your Custom Code (New Snippet)’ option.

Add new snippet

Now that you are on the ‘Create Custom Snippet’ page, start by entering a title for your code snippet.

Next, select ‘JavaScript’ as the ‘Code Type’ from the dropdown menu on the right.

Select JavaScript as Code Type

Then, all you have to do is copy and paste the following code snippet in the ‘Code Preview’ box:

function changeTitleOnBlur() {
	var timer     = null;
	var	title     = document.title;
	var altTitle  = 'Return to this page!';
	window.onblur = function() {
		timer = window.setInterval( function() {
			document.title = altTitle === document.title ? title : altTitle;
		}, 1500 );
	}
	window.onfocus = function() {
		document.title = title;
		clearInterval(timer);
	}
}

changeTitleOnBlur();

Once you’ve pasted the code, you can edit it and simply write whatever message you want to display on your browser tab in the code.

To write your desired message, simply go to the var altTitle = 'Return to this page!'; line and remove the placeholder text with the message for your browser tab notification.

Type a sentence of your choosing

Next, scroll down to the ‘Insertion’ section and choose the ‘Auto Insert’ mode to activate your browser tab notification on every page.

However, if you only want your eye-catching message on specific pages, you can choose the ‘Shortcode’ option.

For example, you might only want to add this code on the ‘Add to Cart’ page so that it can lower cart abandonment rates on your website.

If that is the case, you can choose the Shortcode option.

Choose an insertion mode

After that, scroll down to the ‘Location’ option and click on the dropdown menu next to it.

From here, select the ‘Site Wide Footer’ option.

Choose Site Wide Footer as location

Finally, scroll back to the top of the page and toggle the switch from ‘Inactive’ to ‘Active’.

Then, then click the ‘Save Snippet’ button to store your settings.

Click on the Save Snippet button

That’s it! Now, your browser tab notification will alert users who leave your site.

We hope this article helped you learn how to add browser tab notifications in WordPress. You may also want to see our tutorial on how to add web push notifications to your WordPress site and check out our top picks of must-have WordPress plugins to grow your site.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

3 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Carole says

    Is it possible to make the alternate tabs have a longer time between changes? I think that constant flashing would get annoying and people might just close out the tab.

    • WPBeginner Support says

      Yes, it would depend on the methods you were using, you would change the numbers that are in the thousands for the code snippets as those determine how many milliseconds to wait for the code.

      Admin

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.