Browser-based push notifications are gaining steam as a powerful source of traffic and conversions. In this tutorial, you’ll learn exactly how to send push notifications with WordPress.
I’m sure you’ve seen those prompts around the web… Example.com wants to show notifications.
As it turns out, this is an extremely powerful way to engage your audience, drive repeat traffic, and skyrocket your conversions.
Best of all, you can start sending browser push notifications with your WordPress site right now, for free.
In this guide, we’ll cover the data behind browser notifications, how they work, how to send push notifications with WordPress, and how to use notifications responsibly so you don’t end up annoying your subscribers.
What Are Browser Push Notifications?
Browser push notifications are clickable notifications that can be sent to desktop or mobile devices via the web browser. They show up as an alert that looks nearly identical to a native app notification.
Browser notifications can only be sent to users who have explicitly opted in via a prompt on your website.
The technology is currently supported by Chrome, Firefox, Opera, Microsoft Edge, and Safari on both desktop and mobile.
Why Should You Use Browser Push Notifications?
Browser push notifications offer a number of advantages over other marketing channels.
For example, some data suggests opt-in rates are as high as 7–10 percent, with click-through rates ranging between 4x to 8x compared to email marketing.
This is HUGE, but not particularly surprising when you consider the frictionless opt-in process.
Think about it: the user doesn’t have to enter their email address or any other personal information—they can literally subscribe with a single click.
Browser push notifications also do not suffer from high unsubscribe rates or deliverability issues. When you send a push notification, you know your message will be delivered and seen.
You can use push notifications to notify users of new blog content, new products, discount offers, webinars, and more. The possibilities are endless.
How Browser Push Notifications Work
Chrome, Firefox, Safari, Opera, and Microsoft Edge each offer a notification API that you can use to send push notifications to users.
Before you can send notifications, you need to obtain the user’s consent. This takes place via an opt-in prompt in the browser, which is either displayed automatically or triggered by some action on your site (e.g. clicking a notification bell).
Upon clicking “Allow,” the user’s preference is saved in the backend and later used to send notifications.
When you send notifications, they will look something like this (depending on the user’s browser and operating system):
When the user clicks the notification, it will open the URL of your choice.
How To Send Push Notifications With WordPress
The easiest way to start sending push notifications from your WordPress site is by using the OneSignal plugin.
OneSignal is a popular, robust notification solution that makes it incredibly easy to send push notifications with WordPress—and it’s completely free for up to 30,000 subscribers.
1. Create A OneSignal Account
To make use of the pluginA plugin is a software component that adds specific features and functionality to your WordPress website. Esse... More, you’ll need to create an account on OneSignal.com.
Just click “Sign Up,” follow the account creation process, and be sure to confirm your email address.
2. Create A OneSignal App
Once you’ve created your account and confirmed your email address, log into OneSignal and click the “Add App” button:
Give your app a name (this will likely be the name of your website), then select “Web Push” as your platform and click Next:
On the next screen, you’ll want to click “WordPress Plugin or Website Builder,” then select WordPress from the list:
Next, scroll down and add your website information:
The logo/icon you upload here will show up alongside your notifications. It should be square and at least 192px.
The “Auto Resubscribe” option ensures that you don’t lose subscribers when people clear their browser cookies/cache. However, this only works on HTTPS sites.
If your site is not fully HTTPS, be sure to disable “Auto Resubscribe” and enable the “My site is not fully HTTPS” option.
Once you’ve completed this section, click “Save.”
3. Set Up The WordPress Plugin
After you finish creating a OneSignal app, you’ll be given a unique App ID and API Key:
Keep these handy, and open up your WordPress dashboardIn WordPress, the Dashboard is a central hub for managing a website's content and settings. It is the first sc... More.
Go to Plugins > Add New, and search for “OneSignal.” It will look like this:
Once you’ve activated the plugin, click OneSignal Push in the main WordPress menuIn WordPress, a menu is a collection of links that are displayed as a navigation menu on a website. Menus are ... More, then click over to the “Configuration” tab.
Paste your App ID and API Key into their respective fields, and be sure to specify whether your site uses an HTTPS connection.
For now, you can skip the rest of the settings on this pageIn WordPress, a page is a content type that is used to create non-dynamic pages on a website. Pages are typica... More and save your changes.
4. Add Safari Support
At this point, you’re all set up to send notifications to Chrome, Firefox, Opera, and Microsoft Edge. Unfortunately, Safari requires an additional step.
To set up Safari support, return to OneSignal and log into your account.
Click on the name of the app you created earlier, then switch to the “Settings” tab at the top.
Under “Web Push Platforms,” click “Apple Safari,” then enter your site name and URL on the resulting popup:
After saving, you’ll want to click “Apple Safari” again, and copy the provided “Web ID.”
Finally, return to the plugin settings in WordPress, and paste your web ID into the “Safari Web ID” field:
Once you’ve done this (and saved your changes), your site is fully configured to send push notifications from your WordPress site to all major browsers, including Safari.
5. Customize Your Settings
Finally, you’ll want to go through the rest of the plugin settings and customize them to your liking.
Here are some of the things you can customize:
- Sent Notification Settings — You can opt to use the post’s featured imageA featured image, also known as a post thumbnail, is an image that represents the contents of a WordPress post... More in the notification, hide the notification after a few seconds, and set a custom title for your notifications (by default this is your site title).
- Prompt Settings & Notification Bell — In this section, you can choose to automatically prompt new visitors to enable notifications, or use OneSignal’s subscription bell widgetA widget is a small block of content that performs a specific function and can be added to certain areas of a ... More, which adds a floating bell icon that users can click to subscribe or unsubscribe. You can also customize the appearance and location of the subscription bell.
- HTTP Pop-Up Settings — If your site does not use a secure HTTPS connection, users will have to opt in through a slightly different prompt, which appears in a popup window. You can optionally customize the content of this popup window.
- Welcome Notification Settings — A welcome notification is automatically sent to new users after subscribing. By default, it just says “Thanks for subscribing!” You can customize this notification if you wish.
- Automatic Notification Settings — In this section, you can choose the default behavior for sending notifications about new postsA post is a type of content in WordPress, a popular open-source content management system used for creating an... More.
- UTM Tracking Settings — If you want to track your performance, you can add campaign parameters to your notification URLs.
6. Start Sending Notifications
You’ll notice that the WordPress post editor has a new section in the sidebar for OneSignal:
If that box is checked, your subscribers will be notified when you publish your post. If you don’t want to notify people about a particular post, simply uncheck the box for that post before publishing.
You can also send a custom notification from the OneSignal website.
After logging in and selecting your app, go to the Messages tab and click “New Push.”
From here, it’s really easy to create and send a custom notification at any time.
Using Push Notifications Responsibly
Push notifications can be an incredible source of traffic for your website, but it’s important to use them responsibly.
Be Thoughtful About Your Opt-In Process
A recent trend in online marketing is to immediately bombard people with notification requests as soon as they land on a site.
Let’s be honest: that’s pretty annoying. I’ve never been to your website before, and I haven’t even had a chance to read your content before you start asking me to opt in to push notifications?
Instead, I recommend using the bell widget and including a call-to-action at the end of your content to ask people to subscribe. By that point, they’ve seen the value you have to offer, and you’re not making a bad first impression by getting up in their face right away.
Provide Value
Much like email marketing, it’s important to offer genuine value in your push notifications. With every notification, your primary concern should be: How will this help people?
The more free value you can offer people over time, the more they will trust you when it comes time to make an “ask,” like selling a product.
Prioritize Your Content
If you publish a ton of content, you may not want to send a push notification for every single post.
Sending too many notifications can annoy people and increase your unsubscribe rate.
On the other hand, if you only send notifications about your best content, people will look forward to your notifications because they always deliver quality.
It’s a delicate balance!
Final Thoughts
Sending push notifications with WordPress is an extremely effective way to engage your audience and drive repeat traffic and revenue on demand. Assuming you use it responsibly, this is definitely a tool you want to have in your arsenal.
I hope this guide has been helpful! If you have any questions about sending push notifications with WordPress, feel free to leave a comment below!
Author: Brad Merrill
Brad Merrill is the CEO of Merrill Media and Editor in Chief of GigaPress.
