How to Boost Engagement on Your WordPress Site with Browser Tab Notifications (Tutorial)

Hey there, WordPress website owner! Are you looking for an easy way to keep visitors engaged with your site and boost your conversions? Well, you‘re in luck. Today, I‘m going to teach you how to set up browser tab notifications in WordPress.

Navi.

What are browser tab notifications? They‘re the messages, icons, and visual cues that appear on a user‘s browser tab when they navigate away from your site. Things like:

A custom message (e.g. "Don‘t miss out on this limited time offer!")
A count of new items or notifications (e.g. "(3) Unread Messages")
An eye-catching change to your favicon or tab color
Emojis or other attention-grabbing icons

Here‘s an example of a browser tab notification in action:

[Insert GIF example]

Why are browser tab notifications so powerful? Because they give you a second chance to re-engage people after they‘ve left your site. And in a world where attention is scarce and distractions are everywhere, that‘s huge.

Just think about your own browsing behavior. How many times have you been reading an article or browsing a site, then navigated away to check your email or Facebook, and completely forgotten about it? It happens to all of us.

But with a browser tab notification, that site has another opportunity to pull you back in. Maybe the notification teases a related piece of content you‘d be interested in. Or offers a limited-time discount. Or shows a count of new comments on the post you were reading.

Whatever the notification says, it acts as a little tap on the shoulder to remind you about the site and entice you to come back. And that can make a big difference in your engagement and conversion rates.

Browser Tab Notifications by the Numbers

Don‘t just take my word for it! The data shows how effective browser tab notifications can be:

Sites using browser tab notifications see an average 5.7% lift in pageviews per session (source)
Browser tab notifications can boost site re-engagement by up to 67% (source)
Ecommerce sites can increase abandoned cart recovery by 14.5% using browser tab notifications (source)

And those are just a few examples. No matter what kind of site you run or what your specific goals are, browser tab notifications can give you a major assist in keeping people actively engaged.

How to Set Up Browser Tab Notifications in WordPress

Alright, you‘re convinced browser tab notifications are worth trying. So how do you actually get them on your WordPress site? It‘s easy! Just follow the steps in this tutorial.

There are a number of WordPress plugins that can help you enable browser tab notifications, but in this guide we‘ll be using OneSignal. It‘s a popular free option that‘s simple to configure and includes all the main features you need.

Step 1: Install the OneSignal Plugin

First, head to the Plugins > Add New page in your WordPress admin dashboard. Search for "OneSignal" in the plugin directory.

Find the OneSignal plugin in the search results and click the "Install Now" button. Once it‘s installed, be sure to click "Activate".

[Insert Screenshot]

Step 2: Set Up Your OneSignal Account

After activating the plugin, you‘ll see a prompt to set up your OneSignal account. Click the "Login or create a OneSignal account" button.

[Insert Screenshot]

You‘ll be taken to the OneSignal website to either login to your existing account or create a new one. If you‘re new to OneSignal, enter your details to sign up for a free account.

[Insert Screenshot]

Once you‘re logged in, you‘ll be guided through creating a new app for your site. Enter a name for your app and select "Website Push" as the platform.

[Insert Screenshot]

Then choose "WordPress Plugin" as your integration method.

[Insert Screenshot]

Finally, select the appropriate category for your website and click "Save & Continue".

[Insert Screenshot]

Step 3: Configure Your OneSignal Settings

After creating your app, you‘ll see your OneSignal app ID and API key. Copy these values.

[Insert Screenshot]

Then head back to the OneSignal settings page on your WordPress site and paste in the app ID and API key.

[Insert Screenshot]

Click "Save" to confirm the setup. That‘s it! Your WordPress site is now synced with your OneSignal account.

Step 4: Customize Your Browser Tab Notification

Now for the fun part – crafting your browser tab notification! In your OneSignal dashboard, navigate to App Settings > Browser Tab Notification.

[Insert Screenshot]

Here you can customize the content and behavior of your notification:

Title: Enter the text you want shown in the browser tab (emojis are supported!). This could be a custom message, your brand name, a notification count, etc.
Icon: Upload a custom icon to display in the browser tab. It could be your logo, a graphic, or something eye-catching and on-brand.
URL: Enter the URL you want the user to be taken to if they click on the notification. This could be a specific product page, a new blog post, a special offer, or your homepage.
Timing: Choose when the notification is triggered – immediately after the user navigates away or after a delay (in seconds). A short 1-3 second delay is usually best so it doesn‘t interrupt the user.

[Insert Screenshot]

Under "Display Preferences", you can also set conditional logic for when the notification is shown. For example, you could set it to only trigger if the user has been idle for a certain period or only on specific pages of your site.

[Insert Screenshot]

When you‘re happy with your notification, make sure the "Status" toggle is set to Active and click "Save".

[Insert Screenshot]

And that‘s all there is to it! Your custom browser tab notification is now live. Whenever a visitor navigates away from your site, they‘ll see your notification in their browser tab tempting them to come back.

Tips and Best Practices for Browser Tab Notifications

While setting up browser tab notifications is simple, there are some important tips to keep in mind to get the most out of them:

Make it relevant – Your notification should be closely tied to the specific content the user was engaging with. If they were reading a blog post, tease the next related article. If they have items in their shopping cart, remind them to check out. Generic notifications will be ignored.
Provide a benefit – Give users a compelling reason to re-engage. What‘s in it for them? Maybe it‘s a limited time offer, an interesting new article, or a product recommendation. Make it clear what they‘ll get by clicking back to your site.
Create urgency (when appropriate) – If you‘re promoting a sale or exclusive content, build in a sense of urgency with your copy. Using an emoji timer ⏰ or phrases like "Ending soon!" can compel users to act now rather than later.
Keep it on-brand – Your notification should fit the overall vibe and personality of your site. If your brand is formal and professional, don‘t use quirky emojis or slang. If you‘re fun and playful, boring corporate-speak won‘t resonate. Stay true to who you are.
Don‘t overuse them – Like any marketing tactic, browser tab notifications can wear out their welcome if overused. Limit them to high value pages and engagement opportunities. If every page triggers a notification, users will quickly tune them out entirely.

Real-World Browser Tab Notification Examples

Looking for some inspiration for your own browser tab notifications? Here are a few great real-world examples:

Beardbrand

Men‘s grooming brand Beardbrand uses this click-worthy browser tab notification to promote a limited-time bundle offer:

[Insert Screenshot]

The eye-catching emoji and "Don‘t Miss Out!" copy build a sense of urgency, while the discount gives a clear incentive to return to the site and make a purchase. Well done!

Search Engine Journal

Search Engine Journal has a simple but effective browser tab notification to keep readers engaged:

[Insert Screenshot]

Including the name of the article in the notification is a nice personal touch. And teasing more "SEO tips" relates directly to the content the user was already interested in.

Ahrefs

SEO tool Ahrefs uses this cheeky browser tab notification:

[Insert Screenshot]

The playful tone fits their brand voice, while still giving a relevant CTA to check out their free tools. It‘s a great balance of fun and functional.

Do you see how a few well-chosen words and emojis can make a big impact? Put some thought into what will resonate with your specific audience.

Level-Up Your WordPress Conversion Strategy

Now you know the power of browser tab notifications and how to easily set them up on your WordPress site. But this is just one piece of the conversion optimization puzzle. To really take your site to the next level, check out these other helpful guides:

By layering browser tab notifications with other conversion best practices, you can transform your WordPress site into a lean, mean, engagement machine. You‘ve got this!

If you have any questions about setting up browser tab notifications on your site, drop a comment below. I‘m here to help you boost those conversions. 📈