how to send web push notifications step by step (with pictures)

how to send web push notifications step by step (with pictures)

Web push notifications is a great way to drive traffic to our websites. Social media websites like facebook twitter and most of them use web push notifications to users.

Because the web push notifications works good for both mobile and desktop users. Surveys prove that web push notifications are most effective in online marketing from sms and email marketing.

It can also help to website owners to increase page views and also increase returning visitors.

How to send web push notifications Step by Step guide

with pictures

Make Account with Push Engage:-

First of all you need to make account with pushengage website. Push engage offers free account with 2500 subscribers. After that you have to select any paid plan for it, but for small websites and blogs it is best.

Go to pushengage website and select start you free trial after your email address.

Website URL and Subdomain Setting:-

Now, the screen like below will appear.

website url setting for web push notification

Fill all the details like your email address and then your website url (which website you will use to send push notifications).

In the your sub-domain tab just enter your website name, like i enter earnonblog.

Set the password you want to use for pushengage account.

Next tab is for mobile number/skype id, but there is no need to feel this info.

Go to show my account now.

Installation Setting:-

On the next page you will see a dashboard like this.

installation setting for web push notifications

Just check your website name and website url, if correct then upload your website logo from change image and then go to update site setting.

Get API Key:-

Now, from the left admin panel go to get API key. On the next screen click on generate new key.

generate new key

Copy this API key.

Install Pushengage Plugin:-

Go to your WordPress dashboard and download pushengage plugin. You can also upload it.

After activate this plugin you will see a pushengage tab is added to your admin left control panel go to there.

download plugin and setup api key

You will see two tab instruction and setup.

From it Go to setup tab and paste your API key, go to submit.

General Settings to Send Browser Notifications:-

You can manage General setting but all general settings are default set. You can change according to your requirement.

General setting for push notification

Now go to subscription dialogbox.

Subscription Dialogbox:-

The subscription dialogbox screen look like this.

subscription dialogbox setting

From subscription dialogbox setting you can select your website type whether it is http or https.

And next to it. Select dialogbox type, the preview will be shown at right side of screen.

Then select title and set allow button text and close button text.

Now go to update optin setting.
You can also change intermediate page setting by scrolling below.
Next, select welcome notifications setting.

Welcome notifications setting:-

welcome notification setting

Here you can select welcome notification title, message and url.

You can also choose whether if to send welcome web push notifications or not to new subscriber.

Click save and go to installation settings.

Installation settings for Web Push Notifications:-

installation setting

Here you can set site name , url and logo which we have already set and maximum web push notifications to show a user at a given time from your website.

click update site setting and go to GCM settings.

GCM Settings:-

This is google cloud messaging setting.

If you have HTTPS website then you can set this as a instruction given in the tab and if migrate to another software provider then read the instruction and do as that.

That’s it. You done.

Now every time if any visitor open your website then this web push notification is open there to subscribe or close.

And if the user subscribe then every time you post a article or page or any update the user will be notified.

You can also choose from post control panel whether to send notification or not.

Sharing is Caring

3 thoughts on “how to send web push notifications step by step (with pictures)

  1. Thank you, Paras, really an informative article. I have followed your instructions and have sent my first push notification with pushengage! However, now I am testing new push notification providers as well, maybe someone of you has been using Firepush or Pushowl? I have recently read this tutorial as well: Considering to test this app as well. Maybe you have any recommendations which tool is the best for startup company?

Leave a Reply

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