Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Push Notifications
Code

How to Use WordPress Push Notifications and the Smart Notification Plugin

by
Difficulty:IntermediateLength:MediumLanguages:

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. 

Allow push notification

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

Time-Sensitive 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.

Encouraging Notifications

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.

Reminder Notifications

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.

Promotional Notifications

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.

Geolocation Notifications

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?

Effectiveness

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%.

Real-Time Delivery

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.

Multipurpose

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.

Report Dashboard

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

Getting Started

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:

Smart Notification admin options

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.

Enable notifications with Smart Notification

Customization

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
Configuring the popup box settings

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.

 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 the Firebase API key

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.

Add a new cron job with cPanel

You'll have to supply a command for the cron job—you can find that in the Smart Notification Developer Documentation

Find the cron job command in the Smart Notification Developer Documentation

Lastly, enable push notifications for the rest of the browsers. 

Enable push notifications for each available browser

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.

Desktop welcome message and subscription redirect

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.

Ask permission to send push notifications

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!

Smart Notification dashboard

Conclusion

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!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.