Send Web Push Notifications in WordPress

Insert CodePush notifications are a very useful marketing tool. Customers opt-in to them, because they are interested in your product or service.

With the free version of the Webpushr WP plugin, it is possible to manage a list of 10.000 users getting push notifications from your site at no cost.

This tutorial will explain the installation and basic configuration of the plugin.

Keep reading to learn how!

 

Step # 1.- Install the Plugin

I am using the terminal application for this task, you can use your preferred method of installing WordPress plugins.

  • Open the plugin page (https://wordpress.org/plugins/webpushr-web-push-notifications/) in your web browser
  • Right-click the "Download" button and
  • Select "Copy link address" (this downloads the latest version of the module)

  Send Web Push Notifications in WordPress

  • Open the terminal application of your system
  • Place the cursor at wp-content/plugins
  • Type:
wget https://downloads.wordpress.org/plugin/webpushr-web-push-notifications.zip
unzip webpushr-web-push-notifications.zip
rm webpushr-web-push-notifications.zip

To download the zip file to your server, uncompress the file and finally remove it.  The version you are downloading may differ from the one detailed in this tutorial.

 Send Web Push Notifications in WordPress

  • Click "Plugins" on your Dashboard
  • Locate Webpushr
  • Click "Activate"

You will be prompted to complete a Registration process to get an API Key.

  • Click the blue-button: "1-Step Registration"
  • Fill out the registration form

 Send Web Push Notifications in WordPress

The API key value will be automatically populated and activated.

Send Web Push Notifications in WordPress

The first thing you will see is a push notification (what else?). 

  • Choose "YES"
  • Click "Allow" and the plugin will be ready to use

Send Web Push Notifications in WordPress


Step # 2.- The Plugin Settings

The Webpushr menu on the left side of the Dashboard has 5 options:

  1. Dashboard
    • Keeps a record of all subscribers (including old and new ones)
  2. Configuration
    • Manages the push notifications of newly added content. By default, you can choose between post and page 
  3. Manual push
    • Handles the settings for customized web push messages. Requires the use of Webpushr Web Console, which is a tool outside of WordPress. Webpushr Web Console keeps track of all your sites, which have this module enabled
  4. Notification stats
    • You will find a record here of all the notifications that you have created and sent. It also keeps track of the clicked (accepted) notifications and the closed ones.
  5. Setup
    • Here is where you enter the API key. This has been done in the module installation.

Since we haven’t pushed the first notification, you will see nothing but a bunch of zeros in Webpushr’s Dashboard. 

  • Click Configuration
  • Make sure that the checkbox Enable Web Push is checked
  • Add the page value to the Post Type option (a notification will be sent each time you publish a post or a page)

The title, icon, and image of the notification are displayed according to placeholders. You can change this and enter your own values. 

Send Web Push Notifications in WordPress

  • Change the text of the notification title

Send Web Push Notifications in WordPress

The UTM parameters option refers to a special link construction, to keep track of the different marketing campaigns. You can read more about that here: UTM parameters - Wikipedia.

  • Scroll down to the bottom
  • Click "Save Settings"

Step # 3.- Create a Post

  • Click Posts > Add new
  • Enter a proper title and text
  • Set a featured image
  • Click Publish twice

Send Web Push Notifications in WordPress

Notice also, that you have a Webpushr Preview button at your disposal.

Your system will notify you about new content.

Send Web Push Notifications in WordPress

Now, every time a user clicks the notification to check a post or page on your site, this action will be registered by Webpushr on the dashboard.

Send Web Push Notifications in WordPress

You can also check the notification stats, to see how many users are actually landing on the post and the overall statistics of the message delivery.

Send Web Push Notifications in WordPress

If you want to avoid sending a push notification, each time a post is updated (by the admin user), 

  • Click "Configuration"
  • Uncheck "Automatically send push notification when an existing post is updated"
  • Click "Save Settings"

Send Web Push Notifications in WordPress

The Webpushr plugin for WordPress lets you configure push notifications and send them to your users, each time a piece of content gets created. If you want to configure a manual push (independent of the creation of content) you have to use the third-party web application provided by the plugin’s developer. 

I hope you liked this tutorial. Thanks for reading!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.