How to Setup Web Push Notifications On Any Website

What Are Web Push Notification 

Web push notifications is a website post/publication broadcast sent to a mobile or web device like PC even when the mobile or PC browser is closed. A website user will have to subscribe to a web push notification in order to get this notification. This post will show you complete guide to setup web push notifications.

Web push notification has taken over email subscription over the past one year. Many website and popular blogs now prefer to setup web push notifications than email newsletter because you can easily send web push notification to your site users’ who subscribed for it even without them opening their browser or even logging into their email box and also does not require filling of any form or collection of any data like name, email or phone number.

How Does Web Push Notifications Subscription Request Look?

If you are a regular internet user, I believe you might have come across numerous web push notifications subscription alerts from popular websites and blogs.

Below is how Facebook web browser push notification request looks like

setup browser web push notification 1

Depending on the push notifications service provider you are using, you can customize you subscription request like I have done for Web Tech Garden see image below;

setup browser web push notifications 2

How to Setup Web Push Notifications

There are many platforms that offer web push notifications service but I will only review the one I currently use for Web Tech Garden – Fox Push

With fox push you can set up can set up a web push notification for any kind of website, HTML, blogger, WordPress Etc.

The free version offers you up to 50,000 subscribers and 1.5million notifications per months, mobile/tablet/PC notifications and lots more

Goto to Fox Push and create an account. After activating your account, login to your account.

  • Click on “Settings” to collapse the options.

setup web push notifications 3

  • Click on “Customize” to customize your notification, click save at the end

setup web push notifications 4


  • Next, click on “Subscription Layout” to customize where your subscription request alert should appear and click save

setup web push notifications 5

After you are done to setup web push notifications, click on “Generate Code” and paste the generated code into the <head> …. </head> section of your website or you can do it individually for the page you want it to appear if it’s an HTML website.

For WordPress website, Go to your theme editor, and paste the code before the </head> section in the header.php file. The best way to paste header code in WordPress is to use the plugin called Insert Headers and Footers.

See Easiest Way to Insert Header & Footer Code In WordPress Website

You can play around with the other options. Now to test your web push notification subscription request, visit your site on another browser other than the one you used to set it up.

You May Also Like

Leave a Reply