How to Add Web Push Notifications to a Web Site

How to Add Push Messages to a Web Site
Push notifications are a great way to make instant contact with your site visitors in common browsers, even if the site is not open in the browser (works great in Chrome)

When you send a push notification, all your Android, iOS, and web push users will get your notification.
sample of web push:

You can also select through the system 3 kinds of prompts to your website users :

It’s important to make sure that the site runs securely on the HTTPS protocol. If not the push messages will not work! (Google policy)



Below is an explanation of how to set up Push messages on your site using

Step 1:
Enter your FIREBASE account. If you do not have an account for your application, you must open an account with your Gmail. (FIREBASE belongs to Google.)

Click Add Project and fill in the details.

Step 2:
Right now after you have an account, click Add app

And select a web app

Step 3:

After you click, a window will open with a code that needs to be copied to your system at

Important – Copy only the lines marked with the code and paste them into the correct field in your management interface.

Step 4:

Access the app’s settings by clicking the gear on the menu and then the Project setting

Step 5:

Navigate to the Cloud messaging area and copy the Legacy server key.
Important – note that there are no spaces on the right or left side

Then copy the code to the appropriate field in your admin interface

Step 6:

At this stage, you need to produce a certificate for your site.
Scroll to the bottom of the page and press the Generate key pair

After you click, you will receive your certificate code:

Copy it to the appropriate field in your management interface

And then click Save

• Please note that for security reasons, if the process takes a long time, you will have to re-enter the system and enter the data again.

Step 7:
Once you have stored the data and saved it, you will be presented with the codes to be embedded in the HEADER of your site and a file to download.
the file needs to be uploaded to your site’s main ROOT folder. (The main folder of the site on the server)

                            Please Note: if you have a WordPress website, Our plug installation will install the web push codes and file automatically !
But, if you are using wp-rocket minify, it should break Firebase JS code. Please exclude the Firebase code from the modification



If you are using litespeed cache please enter “pages optimizing” > “tuning settings” tab and find the box of “js excludes”
and add those 2 lines:

Step 8:

Check and send a push
Once you’ve set everything up, it’s time to check whether your browser’s messages are working.
Browse to your site and you should be notified that your site wants to be approved for sending messages

Please confirm the request

Sending Test Push:
Enter the management interface and navigate to the push-sending area

• Please note that sending the push will reach all your users on the site, in the Android app and in your IOS application, if any.

Learn How to Convert Any Website into Android and iOS Apps for Free with Our Step-by-Step Course
By May 9, 2024
  Are you ready to take your website to the next level and reach a wider audience? Imagine converting your existing website into sleek, user-frie...
Master the Art of App Creation: Build Your Own Mobile Application with a Website to App Building Course
By Dec 19, 2023
  Welcome to the exciting world of app creation! In this digital age, where smartphones have become an extension of our lives, having your mobile...
Free Ajax Products Search for WooCommerce
By Nov 19, 2023
Introduction In the dynamic world of e-commerce, efficiency and user experience play pivotal roles in the success of an online store. WooCommerce, a p...
Member Club Settings
By Sep 16, 2023
text Form settings The setting tab is the heart of the Members system.You can set the labels on the form and buttons, set the colors, Define the field...
Member Club Automations
By Sep 16, 2023
After we have members and groups we can start creating automation and engage our members.Birthday automation – send your members happy birthday ...
Member Club features and operations
By Sep 16, 2023
The features and operations are spread over a couple of tabs: Members lists, testers, groups, and automation.  Members list tab – those are all...
Member Club Introduction
By Sep 2, 2023
Build your customer club/community of your business, get to know your customers, and send them only messages they want to receive! The community or cu...
Use the special offer system
By Jul 23, 2023
The idea is simple, create special promotions and unique content for the app via a special offer system, enter the system and create a special link th...
WordPress plugin – connect and review (if you have a WordPress website)
By Jul 23, 2023
If you have a WordPress website you can install our web2application plugin that will help you manage your Android and iOS apps, build a community, cre...
Ask Us
Hello, Can we assist you?
(This is NOT a bot, One of our team will answer you asap)
Skip to content