Web Push notifications help you send messages to people even though they’re not reaching your websites. Learn how to set up web push notifications on your website
Would you like to add web push notifications to the WordPress website?
Web Push notifications help you send messages to people even though they’re not reaching your websites. This helps you attract people back to the website, boost traffic, and earn more profits.
In this post, we’ll show you how to quickly set up web push notifications for your website.
What are Web Push Notifications?
Web Push Notifications or Browser Push notifications are small, clickable alert messages that display as a popup on your mobile device or computer.
They show on the top of the screen or in the notification center of their mobile device. The great thing is that they can be seen even though the user’s browser is not available.
Push alerts help you to hit consumers through platforms with your new updates and deals. Web Push alerts are a compelling way to turn website users into loyal fans and clients.
Why should I add Web Push notification to your WordPress website?
Do you know that 70% of users who abandon the website will never come back? That’s why you need to turn users of these websites into subscriptions or clients.
You can achieve so by using several channels at once. This covers email marketing, social media, smartphone or SMS advertising, and web-based push alerts.
Email lists are also the most effective marketing resource available to you. However, we find that website push notifications are also very successful.
Website Push notifications are regularly the top 5 traffic channels on the WPBeginner website.
Below are only some of the factors that make push alerts a great marketing tool:
- Users must give their express consent to accept push alerts. This means that they are still involved in what you have to say and are more likely to connect with updates.
- Push alerts are shorter and needless focused than email or social media posts.
- There’s no social networking algorithm to limit your distance.
- Users can monitor how alerts are presented on their screens. They can turn them off completely.
- Many businesses use Web push alerts.
Common sites, like Facebook, Pinterest, and LinkedIn, among many more, recognize the significance of this. They’re also using web push alerts.
According to the report, push alerts had a 50 percent higher open rate than email and half as high a click rate. They’re more immersive than SMS, email ads, and social media sites.
Let’s have a look at how you can quickly apply web push alerts to your WordPress website.
Creating Web Push Notifications with PushEngage in WordPress
1. Establish your PushEngage account
PushEngage is the best push update service available in the industry. This helps you to apply push alerts to your WordPress account quickly.
Firstly, go to the PushEngage homepage and press the Get Started For Free option:
The free package covers up to 2,500 users and 120 update campaigns per month. You’re going to need upgrades if you have more users and need to submit more campaigns
Upon signing up, you can hit the PushEngage portal. If you sign up with your Gmail Account, PushEngage will ask you to enter the details of your website:
You can now see the
- Settings
- Site Settings
- Installation Setting in your PushEngage dashboard.
Now you need to upload the screenshot you want to use in your web push alerts. Go ahead and press the ‘Change’ button just below the empty picture box.
2. Link your WordPress account to PushEngage
Your image must be in a PNG or JPG file type, and the suggested size is 256x256px.
The next move is to link your websites to PushEngage.
You have to download and enable the WordPress PushEngage addon to do this.
Moreover, You will need to install the JavaScript file for PushEngage after download if your website uses HTTPS. You have to unzip this and transfer it to the root folder of your website.
Go to
- Settings
- Site Settings
- Installation Settings in the PushEngage profile to download the file.
You need to select the WordPress section under ‘Choose Website Form and Add Script.’ Go forward and press the ‘Download Package File’ screen:
Then unzip the files and folders. Only right-click it and then choose the Extract option:
You can see the file service-worker.js:
Now you’ll have to upload the file to your website’s root folder in your WordPress hosting system. The root directory is the one where all other directories and files are stored on your web. Typically, this is the same folder where you can find the/wp-content/folder.
Link to and upload the file to your website using FTP. To assist with this, check out our easy-to-use novice guide to using FTP to import files.
Tip: Don’t you know if you have a root folder? Look for the.php index file. You’re in the correct folder if you see that.
Now that you’ve imported a file, you can begin to link WordPress to PushEngage.
The next step is to get the key to your API. Just go to
- Settings
- Site Settings
- API Keys in your PushEngage toolbar. Then go and open the ‘Generate New API Key’ tab:
Then you can see the key to your API
Go to the PushEngage section in your WordPress admin on the new tab. Then press on the ‘Setup’ key. You’ll see the main box for your API.
3. Setting Up Your Push Notification Messages
Now, you’re going to see your PushEngage parameters. Check if you are pleased with the General Settings. You can update the specifics of your account here or on the PushEngage homepage:
Next, it’s time to put up a message that users can see when they get to your website. Only press the ‘Subscription dialogue box’ tab to display and adjust the settings.
You’ll see your logo in the post, plus the usual text. It would be best if you changed this to a message of your own. Please don’t forget to press the ‘Update Optin Settings’ button to save your updates.
Below this, you can alter the message seen on the intermediate tab. This is the page that shows when the user first taps Enable.
Note: You cannot alter what is seen in the browser settings’ own popup box. This will still have the text ‘Show Notifications’, including the Allow and Block buttons.
Only type the text you want to utilize. Please don’t forget to press the ‘Edit Page Settings tab.
You would want to build a welcome notification to thank people for subscribing to it. It also helps you to verify if your updates are running quickly.
Only press the ‘Welcome Notification Settings’ section to set up. Here, you need to type a welcome notice title and post. You can use your website as a URL, or you can direct users to a new page.
You will need to press the Upgrade button to save the improvements you have made.
4. Testing your Web Push Notifications on your website
If you’ve set up push alerts, it’s excellent practice to verify if they operate as you anticipated.
You will open your website on your device or phone to verify your push alerts.
You can automatically see the subscription dialogue box that you established. Here’s the one on the laptop computer:
Go ahead and press on the ‘Enable’ button. You can see the intermediary page in the popup pane.
Now press ‘Allow.’ Now, you’ve efficiently signed up to push updates from your website.
Your welcome message should display on your computer in a matter of minutes. Here’s ours, displaying the welcome message we’ve just created:
What if a person decides not to allow alerts but wishes to subscribe later? This is activated automatically with PushEngage. In the bottom right-hand corner of your page, the user can see the bell feature:
They can click on it to sign up for your website.
You may change the widget’s color, location, and tag:
You can also change the bell for a key that shows on the page of the website like this:
Sending Web Push Notifications to Your Subscribers
By default, PushEngage sends an alert for every new post. These notifications will also include the headline of the post and a slight version of the image shown. When a person clicks a notification, they’ll be introduced to your blog article:
If you don’t want autonomous notifications, you can switch them off by visiting PushEngage » General Settings in their WordPress dashboard.
Only scroll down to the ‘WordPress Post Settings tab and uninstall the ‘Auto Push box. Don’t hesitate to hit the ‘Save WordPress Settings’ key.
You can set the headline, message, Web address, image, and further on this screen. You can organize notifications to be issued at a later stage, or you can send them instantly.
Tip: If you have pre-scheduled notifications, ensure your standard time is correct.
Other Strong WordPress Web Push Notifications
It is necessary to choose the right web-based push notification service from the outset. Many providers are seeking to lock you on their site. This means that adjusting your push notification provider will mean losing your subscribers. But if you turn, you’ll start from scratch again.
That’s why we recommend telling the company you select about all the settings you need to customize to make your list of subscribers portable.
We recommend PushEngage since it has a great free plan and a lot of robust paying features. With the paid plans of PushEngage, you can:
- Set up a trickle autoresponder, such as with a reception campaign.
- Submit reminders when the customer has dropped their cart.
- Trigger campaigns focused on the actions of users.
Enable users to add sales reminders when a product goes on sale or is back in stock.
and more
In addition, WordPress is all about preference. Here are several other WordPress push update plugins that you may like to try:
- PushCrew – Links the website to the PushCrew Push notification program. They are selling a free package limited to 2000 users.
- PushAlert – Web Push Alerts – Lets you connect to PushAlert’s web push notification program. They are still selling a special package limited to 3000 subscriptions.
- PushAssist – Plugin adapter for the PushAssist web push update service. The free package is open to 2000 users.
- OneSignal – Has a restricted free package that provides simple web-based push notification functionality. Their upselling tactics are very violent, and funding is not beneficial.
Final Words
We hope this post will help you understand how to set up web push notifications on your website. You may also like to see our guide to Web Push Notifications and How do they work?
