Lifestyle Magazine

How to Send Web Push Notifications on Chrome, Firefox and Safari

By Dreamtechie

By now, you must have started noticing the grey permission dialog which asks you for permission for website notifications. These are for websites that have enabled Web Push notifications and are similar to push notifications that you get from apps on Android and iPhone. In this article we will dive deep into how you can send web push notifications from your own blog or website.

How does Web Push work?

When push notifications are enabled, your website visitors will see an opt-in which you would have also seen when you landed on this article. Push notifications are currently supported on Chrome, Firefox, Safari and Opera on the desktop while on Android it works with Chrome, Firefox, Opera as well as the Samsung internet browser.

How to send Web Push notifications on Chrome, Firefox and Safari

If you look at the image above, this is how the permission request would look like and once your visitor clicks on 'Allow', then you will be able to send them notifications. We are currently using PushAlert which supports Chrome, Firefox, Opera on both desktop and mobile devices along with Safari on Mac.

The best thing about push notifications is that they work even when your visitors are not on the website. There are several tools that help you send notifications but we opted for PushAlert as they have advanced segmentation features with their audience creator and we were easily able to set it up with their WordPress plugin.

Now, once your click on this notification they will be taken straight to your website, instantly bringing more traffic.

HTTP and HTTPS Websites

Push notifications are only allowed on HTTPS, but you can send notifications even if your blog is not HTTPS. PushAlert will give you a HTTPS subdomain, like letuspublish.pushalert.co to which people will be able to subscribe.

You can use your own HTTPS domain or subdomain as well. I have also included details on the signup process for PushAlert later in the article.

How to send Web Push Notifications
How to send Web Push notifications on Chrome, Firefox and Safari

Most services have a very simple dashboard to send notifications, where you can customize the image, title, message as well as the URL. In PushAlert too, you can just click on Send Notification and create a new targeted notification.

How to send Web Push notifications on Chrome, Firefox and Safari

Once done, you can send it to all your subscribers and yes, you can add Emojis as well. This is how the notification would look like.

How to send Web Push notifications on Chrome, Firefox and Safari

Look at the CTR that we got. Emails generally have an open rate of under 19% and they fetch a CTR of about 3-4%, so Web Push notifications simply outperform emails with higher conversions. Moreover, you will see an immediate spike in traffic. Although only some of the people will remain to read the article, direct clicks generally have higher retention than those coming from social media pages.

Enabling Web Push on your Website

It's very easy to get started with push notifications. Here, how you can sign-up for the service and enable it on your website.

Pricing: The service is free for the first 3000 subscribers, no credit card required. Thereafter, based on the features you require and your growing subscriber base you can choose from the basic, premium or platinum plans. You are only charged for active subscribers, those who are still part of your audience.

Once you sign up for the service, activate your account and then login. You will now land in the initial setup stage. Just add the information about your website and also create the custom HTTPS subdomain if your website is not running on HTTPS. The next step is where you will get the integration code, you can copy the integration code to the <head> section of your website and like us, if you are on WordPress then just install their plugin and add your account specific keys.

If you have a HTTPS website, then you would have to upload a couple of files.

Things to keep in mind before sending Web Push notifications

Push notifications can become intrusive, if you are sending many notifications in a day. Moreover, with every other notification sent the same day, your CTR decreases. You have to prioritize what content you want to promote with Web Push and segment subscribers, so that the notification remains relevant and creates a good user experience.

These work the best for real-time updates, breaking news, discounts as well as for ecommerce websites for tracking cart abandonment. We hope this post helped you get an idea about push notifications work on websites. Implement it on your blog with a free account on PushAlert.

There are a lot of advanced features which we are still trying out like A/B testing, Audience Creator and scheduled notifications. If you want to know more our experience, just leave a comment below. You may also check -

Back to Featured Articles on Logo Paperblog