How To Set Up Web Push Notifications On Your WordPress Blog Using PushCrew

Last Updated On

Do you have Push Notifications set up correctly on your WordPress blog? If you haven't, in this post, I'll show you how to set it up using the service provider PushCrew.

Push Notifications has become extremely popular over the recent years. First appearing on software, then mobile applications, and now also implemented on websites and web applications.

The wonderful thing about users opting into receiving web push notifications is that they don't need to provide any sensitive information, such as an email address or any other subscription details.

It is purely permission-based, so that means users can simply choose to 'allow' or 'block' a website from pushing out notifications to their browsers.

What is a push notification?

A push notification is a small pop-up message that appears on mobile and desktop applications, websites, as well as software applications.

Using push notification on your website has become one of the most effective ways to reach out to your target audience and drive them back to your content and online offers, even if they're not on your website.

For example, let's say you have pushed messages enabled on your WordPress blog and you publish a brand new post. By allowing people to subscribe to your website notifications, you can send out short timely messages notifying them of your latest post.

The same with your website offers or anything else you want to amplify to your audience.

Look at it this way. Using push notifications on your blog is just another platform for you to use to grow a targeted audience for promoting your content.

In addition, using push notifications to drive readers to your content is a great way to boost your online conversion rates instantly whenever you need to, especially if you already have a consistent flow of frequent visitors to your blog.

On average, push notification reaction rates is around 18% and a cool 27% for the eCommerce industry.

If you're a complete beginner and want to learn more about push notifications, check out this beginner user guide from PushCrew.

Push Notification Service Providers

There are a number of websites available that provide push notification services, however, the one I use on Magnet4Blogging Media is provided by PushCrew, which is a popular one too.

Here are just a few other service providers you might want to check out -

  1. FoxPush
  2. OneSignal
  3. PushEngage

Setting up push notifications on your WordPress blog using PushCrew

One of the questions I've been asked a lot recently is how do you set up web push notifications on a WordPress correctly?

Whilst there's already some guidance and a bunch of tutorials on how to do this available online, I decided to make an extra "user-friendly" guide for you right here.

PushCrew provides push notifications for both web and mobile, and the company currently serves over 10,000 reputable businesses worldwide.

Their services support HTTP and HTTPS, so I'll show you what you need to do to enable it on your HTTPS blog.

  • Save

Are you ready? Let's get to it.

Step One: Signing up for a PushCrew account

The first thing to do is to sign up for a PushCrew account.

The great thing about PushCrew is that you can create a free account with up to 2,000 subscribers before you have to start paying for anything.

For the first 14-days, you also get access to all the cool premium features.

If you already have a fairly popular blog, you'll soon build 2,000 up subscribers, by which then you may want to choose a premium plan to continue growing your subscribers and benefit from the features and options.

Step Two: Implementing PushCrew into your HTTPS website (The Process)

OK, so after signing up, the next thing to do is to add the PushCrew code script to your WordPress blog.

Now, there are a few ways you can do this. -

The first method is the simplest method, and that's to install and use the PushCrew WordPress plugin which you can access here.

Once you have installed and activated the plugin, you can add your PushCrew account ID into the box provided and then hit Save Changes.

  • Save

By the way, you will find your account ID number in your PushCrew account, under Code & Implementation.

You'll see a long string of numbers in the JavaScript code provided, usually starting with the numbers 97..., see below for example.

  • Save

The other method of implementing the code is by actually copying the entire piece of code script and pasting it into your WordPress theme's </head> tag.

If you're using a Genesis child theme, for instance, you can put this code in the header script box provided under Genesis > Theme Settings > Header & Footer Scripts. Make sure you paste it into the header script box and not the footer. Then hit Save Changes. See image below.

  • Save

For HTTPS WordPress blogs and websites

Do exactly the same as in step two above, then the following -

Download the 4 zip files provided in your PushCrew account.

Unzip the files on your desktop and you should see the following items -

  1. background-worker.js
  2. ffsw-pushcrew.js
  3. logo.png
  4. manifest.json

  • Save

Now log into your web hosting account to access the cPanel.

Go to Files and click on File Manager.

Open the Document Root file. See image below.

  • Save

Find the WordPress installation for the domain name you want to install the 4 files into. It should be in your Public_HTML folder, or a sub-folder in your Public_HTML folder if you're organized, unlike me.

Once you've found the WP installation for your blog, simply upload the 4 files by clicking on the Upload icon in the top bar, see image below.

  • Save

A new window should appear and you'll be able to upload the files from your computer to your domain root file. See images below.

  • Save

  • Save

Step Three: Creating a Project No and API in Google Console for implementing into your PushCrew Account.

Next thing we need to do is create a new project number and API in Google Console. Again, this is fairly easy to do.

Go to this URL https://console.firebase.google.com/ and log into your Google account if required.

Next, click on Add Project. Then give your project a name and select region. If you are based in the UK, select United Kingdom, then hit Create Project. See image below.

  • Save

  • Save

Once you have created your new project, click on it from the welcome page. Then in the top left-hand corner, click on the Gear icon, then click on Project Settings. See image below.

  • Save

Under Cloud Messaging, you'll find the Server Key and Sender ID that you'll need to copy and paste into your PushCrew account.

  • Save

In PushCrew, go to Settings > Project Number & API Key, and paste the sender ID and Server Key in the correct fields. See images below.

  • Save

  • Save

Step Four: Checking to see if everything is working fine

Lastly, all you need to do is to double check that everything is working as it should be on the front-end of your site for the push notifications.

You should see a message appear asking for permission to send notifications. See image below.

You're all done and set to go. You can now send your first notification.

Step Five: Sending push notifications to your subscribers

Once you have a decent number of subscribers to your website, you can immediately start sending out your notifications.

  • Save

If you're doing this for the first time, let me walk you through the simple steps.

  1. Add a call to action 'Title', for instance, I like to use 'Latest Blog Post' or 'Just Published Blog Post'.
  2. Add a 'Message'. Here I like to add the actual title of my blog post, but you can place whatever message you want here.
  3. Add the URL of your blog post.
  4. Upload a different image if you don't want to use the default image that you set up in step two.

Once you're done, you can preview what your notification will look like. See below.

  • Save

When you're ready to send, you can simply hit the send notification button.

Sent notifications and reports

You can view your sent notifications and check out the number of clicks, delivery rate, and CTR for each sent notification.

You can also use this information to assist you in fine-tuning your campaigns, messages, CTA's in the future to improve your click rate.

  • Save

Wrapping up

So there you have it, a quick tutorial on how to set up web push notifications on your WordPress site using PushCrew, and how to send your first notification.

I hope this post has been helpful for you.

So, do you currently have push notifications set up on your website or blog? If so, which provider are you using or recommend using?

Enjoyed reading this post?

Hey! Thanks a bunch for reading this post, I hope it was of value to you. I publish new posts every week, so be sure to check back soon, or hit the button below to subscribe.
subscribe to updates

One comment on “How To Set Up Web Push Notifications On Your WordPress Blog Using PushCrew”

  1. Hello Fabrizio,

    Another great post.

    Good to learn about Push Notifications for websites here on your blog.

    Noticed a lot of websites are implementing this now. Certainly looks like an effective way to drive targeted audiences to our content, great promotional strategy.

    Your tutorial was great and simple to follow and implement, so thanks a lot.

    Shantanu.

Read Commenting Policy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
Share via
Copy link