The Ultimate Web Push Notifications Guide

We’re all fairly comfortable and used to push notifications on our phone screens. Up until now, that’s been a strictly mobile experience. For websites and web apps, we’ve really been prompted back with emails, ads, etc. It’s not intuitive or effective. Now web push notifications are here to help web apps and websites bring back users easily and effectively in a way they already love.

Not sure how web push notifications work or how to implement them to boost engagement? No worries.

Here is a quick, comprehensive guide to web push notifications:

[hub]

• What are web push notifications and how are they different?
• How they work?
• How you get set up to start sending push notifications
• Advantages of using web push notifications
• Examples of web push notifications
• The easiest way to implement Beamer's Web Push Notifications
• How to make web push notifications more engaging

[/hub]

[anchor id="what-are-web-push-notifications-and-how-are-they-different"]What are web push notifications and how are they different?

Web push notifications are notifications sent from a website or web app to a device. Notifications can reach users regardless of whether they’re on or off your website or logged into your product. “Web” can be a little misleading because you can send push notifications from your site or product to mobile devices, tablets, and desktops. Mobile notifications are just related to mobile apps but do not drive users back to websites. Push notifications can help to bring users back to your website or product to boost re-engage users.

[anchor id="how-they-work"]How they work?

Web push notifications are browser-based and require a few different steps to implement.

1. Get permission from your users:

First things first, because they happen off your site, you will need to get users' permission to continue to send them notifications after they leave your site. The most common way to do this you’ve likely seen is an opt-in box. This gives you permission to use a Push API with users’ browsers. This gives the ‘ok’ for web browsers to accept and deliver messages sent from the server of the web push notification service you choose. The users details are stored in the backend of the push notification server so they are a ready recipient.

[mock id="mock-push-prompt"]

2. You create and send messages:

From your web push notification dashboard, you can create your message, track users who have opted in, and schedule your message. Once you send, your server pushes the message to your web notification service via API call, which pushes it to the appropriate browser and user.

3. Users get messages from their browsers:

Messages reach opted-in users browser and the browser which presents it via client service worker.

[anchor id="how-you-get-set-up-to-start-sending-push-notifications"]How you get set up to start sending push notifications.

It’s surprisingly easy. All you need to do is pick a web push notification service and install their Javascript code in the header of your website. It’s a no-code installation that takes literal minutes to complete. With this, you will be able to begin collecting users’ information and opt-in. Your service provider will have a dashboard where you can set up your opt-in message, easily create messages, send and schedule, track users, and analyze data. Something to note is that you must have a HTTPS secure site in order to send push notifications for data security purposes.

[anchor id="advantages-of-using-web-push-notifications"]Advantages of using push notifications.

Why web push notifications? Lots of reasons. Like mentioned before, mobile app push notifications stop short at websites and desktop apps. Only mobile apps can send these notifications and if you don’t have it downloaded, you won’t be getting it. Many companies are moving to PWA (progressive web application) style sites which are mobile sites that are coded to function and behave like apps instead of forcing users to download apps for a mobile experience. Mobile push notifications wouldn’t work in this case! Similarly, web notifications (no ‘push’) only work when someone is on your website in particular. Once they leave, no more messages can be “pushed” to users. Both are limiting. Web push notifications can reach users through their browsers on any device and are not limited by URL or apps.

[anchor id="examples-of-web-push-notifications"]Examples.

What kind of messages do you send as push notifications? It depends on your audience and product and what kind of actions you want users to take. Here are some examples of push notifications that other companies are sending out to boost engagement:

New feature announcements:

This is a very popular way to engage users for SaaS companies. New feature announcements are a great way to bring users back to your product with an exciting new addition. They’re also actionable in the sense that users can click through and immediately engage with your new feature.

Discounts and offers:

eCommerce sites often send targeted, personalized push notifications for discounts and offers. They’re a good way to get customers back to explore products especially when you add a time restraint incentive. SaaS companies can also use these to bring back users who may have started a free trial or left a landing page on your site.

New content or products:

Blog and news sites may use notifications to announce new posts or updates. These can also be segmented and personalized to focus on users’ interests for higher engagement. Similarly, eCommerce sites may send segmented and targeted push notifications for new products that customers may be interested in based on their past purchases or engagement on the site.

Updates and bug fixes:

Another way to engage users with push notifications is to show users that your team is hard at work to fix issues they’re experiencing by letting them know when they’re fixed! It’s a great way to show that your customer service is great and your team is responsive.

[anchor id="the-easiest-way-to-implement-beamers-web-push-notifications"]The easiest way to implement Push Notifications.

What’s the easiest way to get web push notifications up and running? Beamer’s web push notification service is a simple install and provides you with a full, user-friendly dashboard to create engaging, visual messages that boost engagement and bring users back to your product. Beamer is an in-app changelog that sits within your website or product interface. You can post updates on anything in your Beamer feed and your users can see them in context within your product. Your Beamer feed is also a perfect, in-context landing window for web push notifications. Beamer gives your team an easy way to create updates with photos, videos, colorful CTAs, and more. Anyone on your team can create engaging updates. Additionally, you can segment push notifications by demographic, language, location, and past behavior to better target users and increase open and click through rates. Beamer’s backend also provides your team with all the analytics on engagement with your messages so you can see which messages and Beamer updates perform the best.

[mock id="mock-push"]

[anchor id="how-to-make-web-push-notifications-more-engaging"]How to make push notifications more engaging.

As with anything, there is a certain degree of creativity and steps to take to create something that really captures users attention and drives the engagement you’re looking for.  

Add images and GIFs:

No one really likes plain text updates. Updates and messages with images get higher engagement rates and are more visually compelling. Screenshots and GIFs, which you can add to updates and messages with Beamer, help better explain new features and bug fixes as well. You can add videos as well to quickly explain how something works so users can start using features right away.

Segment notifications:

Notifications have a reputation of being annoying if you over do it. Send better targeted, engaging notifications by using segmenting and targeting based on demographics, locations, language, and past behavior. This way you avoid sending users too many notifications they don’t care about and keep them engaged with notifications that matter to them. You can send segmented web push notifications with Beamer.

[mock id="mock-push-segments"]

Add a branded touch:

It’s good for users to start to expect and recognize your notifications. Having a branded look, feel, and sound to your notifications helps to build brand recognition and a relationship with your users. For example, Product Hunt’s web push notifications for years have always included short, compelling, and often funny headlines with a GIF or viral photo and tons of emojis. It became their thing and expected from users. Beamer allows you to modify your notifications and feed to look and feel like your brand. Web push notifications can help you cover the bases in terms of reaching your customers in terms of where it matters and drive engagement back to our site or product. With the right service, your team can create effective notifications easily. Try Beamer to better engage with users on and off your site with an in-app changelog and web push notifications.