What Are Push Notifications?
Push notifications are short informational messages that are transmitted by apps and websites and can reach audiences anytime. Unlike pop-ups, which appear when a visitor is on the site or browser, push notifications appear even when the visitor is not on the site.
Push notifications allow you to send information to users—who have enabled them—even when they are not visiting your site. Push notifications can be effective in letting you keep in touch and bring visitors back to your site, and they work on both desktop and mobile devices.
In this tutorial, you'll learn how to push notifications from a WordPress site using the Smart Notification WordPress Plugin. This is a complete push notification system which allows you to push messages to web or mobile devices.
Types of Mobile and Web Push Notifications
This kind of notification is meant to share information which affects the user in real time. For example, a traffic app reporting the current traffic situation affects the way the user plans their trip home and is relevant in real time.
These are friendly and playful notifications sent to users to encourage them about their progress. For example, a message like, “You have walked 5,000 steps today! Congratulations, you have burned 1000 calories !” Encouraging notifications entice users to engage with your app or site.
These are notifications sent to prompt users to complete specific actions and are popular on job sites, dating sites, nutrition sites, etc. A travel agency, for example, could send notifications to their users reminding them to finish booking a flight.
This type of notification is common in eCommerce apps and sites. If you are running a promotion for your products, you can send notifications to let your customers know about the offers available. Since users have already shown loyalty by downloading the app on their phones, you can send them notifications every time you have a big promotion.
Call to Action Notifications
Most eCommerce sites use these kinds of notifications to nudge their users to take action. For example, a message like "Get 10% off by using the code BLACKFRI, valid till 2nd August" is likely to get more users to take action.
These notifications depend on the user's location. They are a great way to enhance the customer's experience. For example, if there is an event near the user's location, you can send them a notification letting them know about it and even nudge them to invite their friends.
Alerts and News Notifications
News notifications are used to inform users of breaking news, while alerts inform users about real-time interaction by other people. Alerts are used by social sites to inform users about messages, or when someone has liked a photo or commented on their status update.
Why Should You Add Push Notifications to Your Site?
Push notifications don't require complicated processes—as long as the user has given consent, they will see your messages. Their reach is up to 100%.
Push notifications are delivered in real time and usually appear on the screen of the user’s phone or desktop or the notification slider. Push notifications are supported by all operating systems, including macOS, iOS, Android, and Windows.
All kinds of businesses can benefit from push notifications, as we've seen in the examples above.
Reports and Analytics
Push notifications allow you to get detailed reports about customer behavior such as their response time and click rate. You can then use this information to learn how to better the performance of future campaigns.
Increase Conversion Rates
Push notifications are very effective in increasing conversion rates since the impression rates are very high. You can use them to nudge users to act quickly by using urgency techniques. For example, you can send a push notification offering a limited time discount on a particular item or service. A user only needs to tap to access the offer.
Features of the Smart Notification Push Notification Plugin for WordPress
Smart Notification is a plugin that makes it easy to add push notifications to your WordPress site. In fact, it's a complete system for configuring, sending, and tracking push notifications to web or mobile devices.
Detect GPS Location
Smart Notification provides the ability to detect the user's location. With this feature, you can use location and target users based on their cities, hence giving the customer the most relevant information.
Smart Notification features a powerful dashboard which gives detailed reports about how campaigns are performing on all platforms. Such data includes views, clicks, click rate, and a graphical representation of engagement of views and clicks
Mobile and Web Push Notifications
The Smart Notification plugin allows you to send notifications to all web browsers as well as mobile operating systems like iOS, Android, Corona, and Blackberry.
For example, you can use push notifications to:
- let users know about a new post on your blog or website
- offer a discount for an eCommerce store
Start by downloading the Smart Notification plugin from CodeCanyon. If you don't have a CodeCanyon account yet, you'll have to create one first.
Once you purchase the plugin, you will get a link to the downloadable files. Alternatively, you can find them in the download section of your account with your other purchased items.
Once you download the WordPress files, log in to your WordPress site, go to Plugins > Add New, and upload the zip file. After uploading, click Install Now, wait a few seconds, and then click Activate. You can now start using the plugin.
The Smart Notification plugin has many options, as shown below:
We'll explore some of these possibilities in the rest of this post.
Set Up Web Push Notifications
Although there are different channels which allow notifications with Smart Notification, we will only cover how to use web push notifications, which is the most common channel for sending notifications.
The first step is to enable notifications from the general settings.
The next step is to customize how the popup will look, its position, and its message. You can do this from the Popup Box Settings tab. Some additional customizations include:
- the number of seconds to delay before showing the push notification to visitors
- the number of days to wait to request the permissions again for users who dismiss the push notification
- places in which the popup will appear
- logo customization
To configure notifications, we will need an API key and Sender ID from Firebase. Firebase is a mobile and web applications development platform that provides services such as database, storage, authentication, reporting, and hosting. The Smart Notification plugin uses Firebase as a back-end.
To get started, head to the Firebase site and create a free project. Navigate to the project settings and obtain the necessary keys.
Now navigate to Smart Notifications > Web Push in the WordPress dashboard and view the list of web browsers for configuration.
Enable desktop push notifications and enter the Firebase API key and App ID in the fields provided.
Note: HTTPS is required if you wish to show push notifications. Google will display a security warning if your site doesn't have HTTPS and you try to send push notifications.
Choose the icon which will accompany the push notification message and save these changes.
Configure Your Server
The next step is to add a new cron job to your web server. Cron jobs allow you to automate some commands or scripts on your site. This feature provides the ability to send the push notifications messages directly from the server without any delay. It also allows for message scheduling.
I'll show you how to add a new cron job for a cPanel-powered web server. You might have to follow a different process if you're not using cPanel.
You'll have to supply a command for the cron job—you can find that in the Smart Notification Developer Documentation
Lastly, enable push notifications for the rest of the browsers.
Subscriptions and Welcome Messages
The Smart Notification plugin also allows you to redirect users after a successful subscription. You can also enable a desktop push notification welcome message which appears after a successful subscription.
As you can see below, users can now subscribe to push notifications from my WordPress site. If you want to access users' geographical location to send georeferenced notifications, you can ask permission for that.
You also have the option of embedding the push notification as a widget on any page you wish to.
After a successful subscription, you can go to the Smart Notification dashboard and view how push notifications are performing!
In this tutorial, you learned how to enable web push notifications in WordPress. The Smart Notification plugin allows much more than just web notifications however, including mobile notifications in Android and iOS, as well as Messenger and Facebook web notifications.
Feel free to explore all its capabilities, and let us know in the comments below if you find this tool useful!
- WordPress Plugins24 Best Popup & Opt-in WordPress PluginsDaniel Strongin
- WordPress22 Best WPBakery Page Builder (Visual Composer) Addons and Extensions of 2021Daniel Strongin
- WordPress22 Best WordPress Slider & Carousel Plugins of 2021Daniel Strongin
- WordPress31 Best WordPress Calendar Plugins and Widgets (With 5 Free Plugins)Daniel Strongin
- WordPress15 Best WordPress Weather Widgets & Plugins (With 5 Free)Franc Lucas
- WordPress27 Best Tab and Accordion Widget Plugins for WordPress (Free & Premium)Daniel Strongin
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post