How to Add Web Push Notification to Your WordPress Site

Do you need to add push notifications to your WordPress website?

Push notifications allow you to ship messages to customers even when they don’t seem to be visiting your web site. This helps you carry again customers to your web site, enhance visitors, and make more cash.

In this text, we’ll present you the way to simply add internet push notifications to your WordPress website.

Adding web push notifications to a WordPress website

What are Push Notifications?

Push notifications are brief, clickable notification messages that seem as a popup on customers’ desktop or cell units.

They seem on high of the desktop or within the notification space on their cell machine. The smartest thing is that they are often proven even when the person’s browser shouldn’t be open.

Here’s an instance of a push notification in Windows 10:

The welcome / thank you notification message, as seen by the user

Push notifications allow you to attain customers throughout units together with your newest updates and gives. Web push notifications are a really efficient manner to convert web site guests into loyal followers and clients.

Why Add Web Push Notifications to Your WordPress Site?

Did you recognize that 70% of people that depart your web site won’t ever come again? This is why you want to convert these web site customers into subscribers or clients.

You can do that through the use of a number of channels directly. This contains e mail advertising and marketing, social media, cell or SMS advertising and marketing, and internet push notifications.

Email lists are nonetheless essentially the most highly effective advertising and marketing device accessible. However, we’re discovering that push notifications are additionally very efficient.

On GyanHiGyann website, push notifications are persistently the highest 5 visitors supply.

The following are simply a number of the causes that make push notifications a fantastic advertising and marketing device:

  • Users want to give their express permission to obtain push notifications. This means they’re already occupied with what you’ve to supply and are extra possible to have interaction with notifications.
  • Push notifications are shorter and demand much less consideration than e mail or social media updates.
  • There is not any algorithm like on social media to restrict your attain. Nearly 100% of messages are delivered.
  • Users can management how their units show notifications. They can snooze them or flip them off fully.
  • Not as many firms are utilizing push notifications.

Popular websites together with Facebook, Pinterest, LinkedIn, and plenty of others perceive the significance. They are already utilizing internet push notifications.

According to a survey, push notifications have a 50% increased open price than e mail and twice as a lot click-rate. They are extra participating than SMS, e mail advertising and marketing, and social media platforms.

Having stated that, let’s check out how to simply add internet push notifications to a WordPress website.

Setting up Web Push Notifications in WordPress with PushHave interaction

PushHave interaction is one of the best push notification service in the marketplace. It permits you to simply add push notifications to your WordPress website.

We’re within the course of to switching to PushHave interaction for GyanHiGyann, so we will leverage their highly effective computerized person segmentation options to additional enhance our engagement.

Creating Your PushHave interaction Account

First, you want to go to the PushHave interaction web site and click on the Get Started For Free button:

Click the Get Started button to create your PushEngage account

The free plan covers you for up to 2,500 subscribers and 120 notification campaigns every month. You’ll want to improve as you get extra subscribers and want to ship extra campaigns.

Enter your account details or use your Google Account to sign up for PushEngage

Upon enroll, you’ll attain the PushHave interaction dashboard. If you signed up utilizing your Google account, PushHave interaction will immediate you to enter your web site particulars:

Updating your site name and URL after creating your PushEngage account

You ought to now see the Settings » Site Settings » Installation Settings web page in your PushHave interaction dashboard.

Here, you want to add a picture to use in your push notifications. Go forward and click on the ‘Change’ button beneath the empty picture field.

Adding your logo image to PushEngage

Your picture wants to be in PNG or JPG file format and the really useful measurement is 256x256px. This picture will show in your push notifications.

You’ve now accomplished the important thing data on your PushHave interaction account.

Connecting Your WordPress Site with PushHave interaction

The subsequent step is to join your web site to PushHave interaction.

To do that, you want to set up and activate the PushHave interaction WordPress plugin. For extra particulars, see our step-by-step information on how to set up a WordPress plugin.

Upon set up, you additionally want to obtain the JavaScript file for PushHave interaction in case your website makes use of HTTPS. You want to unzip this and add it to your web site’s root folder.

To dowlnoad the file, go to Settings » Site Settings » Installation Settings in your PushHave interaction account.

Under ‘Choose Website Type and Add Script’, you want to click on the WordPress tab. Then, go forward and click on the ‘Download Package File’ button:

Downloading the package file for WordPress

Next, unzip the file in your pc. Simply right-click on it after which choose the Extract choice:

Extracting the JavaScript file from your downloaded zip file

You ought to then see the file service-worker.js:

The extracted service-worker.js file shown in a folder on the computer

Now, you want to add that file to your web site’s root folder in your WordPress internet hosting account. The root folder is the one the place all the opposite folders and recordsdata are saved on your website. Normally, it’s the identical folder the place you’ll see /wp-content/ folder.

Simply join to your web site through FTP and add the file. For assist with this, take a look at our beginner-friendly information on utilizing FTP to add recordsdata.

Tip: Not positive when you’ve got the basis folder? Look for an index.php file. If you see that, you’re in the suitable folder.

Uploading the service worker file via FTP

Now that you just’ve uploaded the file, you possibly can proceed connecting WordPress to PushHave interaction.

The subsequent step is to get your API key. Simply go to Settings » Site Settings » API Keys in your PushHave interaction dashboard. Then, go forward and click on the ‘Generate a New API Key’ button:

Generating a new API key to use with PushEngage

You ought to then see your API key.

Your API key shown in the PushEngage dashboard

In a brand new tab, go to the PushHave interaction web page in your WordPress admin. Then, click on the ‘Setup’ tab. You will see a field on your API key.

Simply enter your API key right here, then click on the Submit button.

Entering the API key into the PushEngage plugin's Setup page in WordPress

Setting Up Your Push Notification Messages

Now, you will note your PushHave interaction settings. Check that you just’re pleased with the General Settings. You can change your account particulars right here or on the PushHave interaction web site:

Viewing your PushEngage dashboard in WordPress

Next, it’s time to arrange the message that individuals will see after they arrive in your web site. Just click on on the ‘Subscription Dialogbox’ tab to view and alter the settings.

Changing the text in your subscription dialogbox

You will see your brand within the message, plus the default textual content. You can change this to your individual message. Don’t neglect to click on the ‘Update Optin Settings’ button to save your modifications.

Make sure you click the update button to save your changes to the subscription dialogbox

Below this, you possibly can change the message that’s proven on the intermediate web page. This is the web page that seems after the person first clicks Allow.

You may see : How to Add Google Calendar Events From Your WordPress Contact Form

Note: You can’t change what’s proven within the browser’s personal popup field. This will all the time have the ‘Show notifications’ textual content plus Allow and Block buttons.

Just sort within the textual content you need to use. Don’t neglect to click on the ‘Update Page Settings’ button.

Changing the intermediate page text in the PushEngage dashboard

You might want to create a welcome notification to thank folks for subscribing. This additionally enables you to simply check that your notifications are working.

Just click on on the ‘Welcome Notification Settings’ tab to set it up. Here, you want to sort within the title and message for the welcome notification. You can use your homepage because the URL, or you can ship customers to a selected web page.

Make positive you examine the ‘Send Welcome Notifications to Subscribers’ field to activate welcome notifications. You additionally want to click on the Update button to save your modifications.

Setting up your welcome notification in PushEngage

Testing the Push Notifications on Your Website

Once you’ve arrange push notifications, it’s finest follow to examine that they’re working as you anticipated.

To check your push notifications, open your web site in your pc or cellphone.

You ought to instantly see the subscription dialog field that you just arrange. Here’s ours on a desktop pc:

The subscription dialogbox live on the website

And right here’s our subscription dialogbox on a cell machine:

The subscription dialogbox on a mobile

Go forward and click on the ‘Allow’ button. You ought to then see the intermediate web page in a popup window. Here’s the way it seems to be on a pc:

The live view of the intermediate page set up with PushEngage

You want to click on ‘Allow’ right here too. Now, you’ve efficiently subscribed to push notifications out of your website.

Your welcome notification ought to seem in your display screen inside a couple of minutes. Here’s ours, exhibiting the welcome message we created earlier:

The welcome / thank you notification message, as seen by the user

What if a person chooses not to allow notifications however later needs to subscribe? This is mechanically enabled with PushHave interaction. The person will see a bell widget within the backside proper nook of your web site:

The bell notification widget at the bottom of the demo website

They can merely click on on this to subscribe to your web site. To change the bell notification widget, merely go to Settings » Subscription Settings » Opt-in Management in your PushHave interaction account.

You can change the colour, place, and label of the widget:

Customizing the bell notification widget in PushEngage

You may even swap the bell for a button that seems alongside the facet of the web site like this:

A button notification widget shown on the demo website

Sending Push Notifications to Your Subscribers

By default, PushHave interaction will ship out a notification for every new publish. These notifications will embrace the publish title and a small model of the featured picture. When a person clicks the notification, they’ll be taken straight to your weblog publish:

An automatic new post notification, as seen by the user

If you don’t need computerized notifications, then you possibly can flip them off by visiting PushHave interaction » General Settings in your WordPress dashboard.

Simply scroll down to the ‘WordPress Post Settings’ part and uncheck the ‘Auto Push’ field. Don’t neglect to click on on the ‘Save WordPress Settings’ button.

Turning off the automatic post notifications in the WordPress PushEngage dashboard

You can create customized notifications at any time in PushHave interaction. Just log into your account on the PushHave interaction web site then go to Notifications » Create » New Notification.

This display screen provides you the choice to set the title, message, URL, picture, and extra. You can schedule notifications to exit at a later time or you possibly can ship them instantly.

Tip: If you’re pre-scheduling notifications, be sure that your time zone is right. It’s straightforward to examine or change this below Settings » Site Settings » Site Preferences in your account on the PushHave interaction web site.

We’ve created a particular notification for our weblog publish with a customized title and message.

Creating a new notification in your PushEngage account

Other PushHave interaction Features to Use for Your Website

PushHave interaction gives a variety of different options, even on the free plan.

For occasion, you possibly can arrange an overlay. This seems on high of your web site content material and exhibits the person the place to click on to permit notifications. Here’s an overlay in motion on the PushHave interaction web site:

An example of a PushEngage overlay

You can arrange an overlay in your account on the PushHave interaction web site. Simply go to Settings » Subscription Settings » Opt-in Management and scroll down to the ‘Subscription Overlay’ part.

Then, examine the ‘Enable Subscription Overlay’ button. You can use the default overlay label or sort in a special one:

The subscription overlay settings in PushEngage

Due to the best way the Safari browser works, you want to undergo some additional steps if you need Safari customers to have the opportunity to subscribe to your push notifications. To allow internet push notifications for Safari, you want an Apple developer account ($99/12 months). You can then create a novel Push ID on your web site.

Once you’ve your Push ID and also you’ve created a certificates, you then want to add these below Settings » Subscription Settings » Safari Web Push:

Setting up web push notifications in Safari

Other Good WordPress Push Notification Plugins

It is necessary to select the suitable internet push notification service from the beginning. Many suppliers strive to lock you into their platform. That means altering your push notification service can imply dropping your subscribers. So when you swap, you can be beginning once more from scratch.

This is why we propose asking the supplier you select for all settings you want to configure to make your subscriber checklist transportable.

We advocate PushHave interaction as a result of it has a beneficiant free plan plus a number of highly effective paid options. With PushHave interaction’s paid plans, you possibly can:

  • Set up a drip autoresponder, comparable to for a welcome marketing campaign
  • Send notifications when a person has deserted their cart
  • Trigger campaigns based mostly on customers’ actions
  • Allow customers to add product alerts for when a product goes on sale or is again in inventory
  • … and extra

WordPress is all about selections. Here are another WordPress push notification plugins that you could be need to strive:

  • PushCrew – Connects your web site to PushCrew’s push notification service. They supply a free plan restricted to 2000 subscribers.
  • PushAlert – Web Push Notifications – Helps you join to PushAlert internet push notification service. They additionally supply a free plan restricted to 3000 subscribers.
  • PushHelp – Connector plugin for the PushHelp internet push notification service. Their free plan is proscribed to 2000 subscribers.
  • OneSignal – Has a restricted free plan that features fundamental internet push notification options. Their upsell ways are very aggressive and help isn’t useful. This is why we’re switching away from OneSignal within the coming weeks.

We hope this text helped you learn the way to add internet push notifications to your WordPress website. You can also need to see our information to the finest e mail advertising and marketing providers, and how to get a free enterprise e mail handle on your web site.

1 thought on “How to Add Web Push Notification to Your WordPress Site”

  1. Pingback: How to Fix the Facebook and Instagram oEmbed Issue in WordPress

Leave a Comment

Your email address will not be published. Required fields are marked *