11 Web Push Notification Examples

Web push notifications occupy a unique place in the digital marketing landscape — allowing you to reach both mobile and desktop users in real-time, without having to build your own app or even an email list. 

You can use web push notifications to notify your audience about all kinds of things, from promotions to events to blog articles. Plus, web notifications are super easy for you to set up and just as easy for your customers to use!

So whether you’re new to the web push notification world or looking for some inspiration, we’ve got your back. In this article, we’re going to cover the following topics: 

Table Of Contents

Let’s dive in! 

Why use web push notifications?

Here are some specific reasons why you should add push messages to your marketing arsenal: 

• Recover sales from abandoned carts: Push notifications remind shoppers to come back and complete their purchases — a useful tool considering 74% of online retail orders are abandoned, adding up to a lot of lost revenue. 
• Increase your conversion rates: Push messages are sent in real-time, reaching an active user immediately. In a matter of seconds, you can tell a visitor about new content on your website or entice them to stay using discounts or promotions. 
• Boost traffic and engagement: Push notifications appear on a user’s screen once they open their browser, even if they’re not on your website. This boosts your website traffic and leads to higher levels of engagement, especially if you send personalized and targeted messages. 
• Get new subscribers with simple opt-in prompts: Users can subscribe to web push notifications with just one click, and they don’t have to share personal information like names, phone numbers, or email addresses in the process. 

11 web push notification examples

Now that you know why push notifications are important, here are some examples of the different ways they can be used. 

1. The “shop now!” web push notifications

Key takeaways from this notification example: 

• Sending a follow-up web push immediately after a user subscribes is a good way to capitalize on a period of high user engagement, as shown in this example from Shein. 
• Plus, this example includes multiple CTA buttons. There’s a general “shop now” button at the top as well as two at the bottom that can take users directly where they want to go — a great way to boost click rates. 

2. The “it’s ready!” web push notification

Key takeaways from this notification example:

• Support-based push notifications (like this one from Surfer) are effective because they provide tangible value to the user — often informing about something they’ve been waiting for. 
• This web push also delivers the key information in as few words as possible. Technically, iOS allows a character limit between 150 – 230 characters and Android 450 – 650 characters. But shorter is better when it comes to web pushes, so we recommend you to keep messages under 40-50 characters. 

3. The “interesting news” push notification

Key takeaways from this notification example:

• Grab your audience’s attention with a catchy headline, like Forbes does in this example. When crafting a headline, keep your readers’ interests in mind. The headline in this web push is likely to appeal to Forbes’ subscribers from the business world.
• Another way to grab attention is by using a colorful image to draw the eye and bring the topic to life, as shown above. A few important things to keep in mind though:
  • iOS will scale images to a 1:1 ratio, giving them a square appearance
  • Android crops images to a 16:9 landscape ratio. 

4. The “sale ending soon” web push notifications

Key takeaways from this notification example:

• This Chrome-based web push from Mavi also uses bright colors. However, instead of using an image, they created a graphic that reinforces the message itself — a good idea considering the human brain processes images 60,000 times faster than text. 
• Mavi’s notification is also another good example of boosting engagement with multiple CTAs, making it easy for users to get right where they want to go without navigating the full website. 

5. The “new arrival” push notification

Key takeaways from this notification example:

• Another good way to boost your click rate is by appealing to exclusivity. This web push from Netflix makes users feel like they’re getting the inside scoop on a new arrival — enticing them to click through and find out more. 
• This web push also demonstrates the power of personalization, as many of Netflix’s push notifications are based on user preferences and viewing history. Personalizing the content of your web push notifications can deliver a 4x increase for open rates, boosting the average open rate from 1.5% to 5.9%. 

6. The “special sale” web push notification

Key takeaways from this notification example:

• This web push from Shein puts the most important part of the message, “ALL 15% OFF,”  in all caps. This is just enough to grab attention without feeling spammy or desperate. 
• It’s also a good example of using emojis in a web push notification. Emojis usually generate an immediate emotional response from people and can make your message feel more friendly and clickable. 

7. The “welcome message” web push notifications

Key takeaways from this notification example: 

• Providing value to users immediately upon subscribing is a good way to create a positive onboarding experience, as shown in this web push from Allrecipes that offers users a “welcome gift.” 
• Just like with onboarding new customers via email, you can use push messages to engage users from the start by trying some of the following ideas:
  • Welcome and thanks for signing up.
  • Here’s your free gift.
  • Here’s our best content.
  • What do you want to know?

8. The “social media update” push notification

Key takeaways from this notification example: 

• This web push from Twitter uses FOMO to entice users to click through — you don’t want to miss this trending post, do you? 
• Also, using numbers in your notification helps to quickly grab attention, drawing the eye and communicating more with fewer words. In fact, including numbers in your web push notifications can boost engagement rates up to 73%. 

9. The “newsletter sign up” web push notifications

Key takeaways from this notification example: 

• Since web push notifications work for users who have already shown an interest in your product (by visiting your website and allowing notifications), they present a unique opportunity for cross-selling products or even channels. 
• As you can see in the example above, Allrecipes sends a web push to engaged website visitors prompting them to sign up for their email newsletter. This may grab the attention of potential subscribers who otherwise wouldn’t have known to sign up.

10. The “there’s more to explore” web push notifications

Key takeaways from this notification example: 

• Similar to the Netflix push messages, this web push from Pinterest is a great example of drawing users back to your website using personalized content. You can take a page out of their book and use specific data points to tailor your message.
• Here’s are a few things Pinterest uses to inspire and personalize its browser push notifications: 
  • The pins you saved
  • The searches you have made on their site
  • Popular pins that are related to ones you have saved on your own boards
  • People who share your interests
  • Price drops on saved pins

11. The “thanks for subscribing” web push notifications 

Key takeaways from this notification example: 

• At first glance, this push message is a little basic and unobtrusive. But sometimes that’s a good thing, especially in the world of web pushes where the line between engaging and annoying can get a little blurry.
• This web push is also a good example of using action words in the CTA buttons to boost click rates. 

How to make a good web push notification

Now that you’ve seen some examples, we’re going to give you some pro tips on using push notifications effectively. 

Tip 1: Ask permission first

Data privacy laws require companies to get consent before sending any push notifications. You don’t really have much choice here. So, before you can add push notifications, you will have to set up a native prompt for your browser to show the first time a user visits your website: 

Any custom prompts you design will only be shown if the user accepted the first notification — a native prompt for a given browser. The good news is that native prompts for browser push notifications appear only once per website. Once accepted, the same prompt will allow you to send multiple notifications.

At GetResponse, native prompts are added to your push notifications automatically, so you don’t have to worry about violating somebody’s privacy by mistake.

Tip 2: Make sure to include the right elements

A web push notification is made up of several elements that work together to drive clicks and conversions. They include the following: 

• A clear, catchy title that focuses the user’s attention
• A short description explaining the notification 
• A link that will quickly take users to your website
• An attractive and relevant image, logo, or icon (visible to Windows and Android users on a Chrome browser)
• Prominent CTA buttons to encourage interacting with the message

Tip 3: Write a compelling copy

One of the downsides of web push notifications is that they can feel disruptive if not executed correctly — and your copywriting plays a big part here. 

The tone you create with the first push message will determine how many users will opt in to receive web push notifications from you.  

Here are some helpful copywriting tips: 

• Communicate urgency, but not desperation — especially in the title. Do this by telling the reader what they’re missing out on instead of how much you want them to click through. 
• Use images and emojis to improve the appeal of your message.
• Keep your copy short, within 50 characters ideally (even if your tool allows more). Some desktop browsers won’t show anything above this number.
• Always focus on clarity first, cleverness second. 

Tip 4: Always provide value and communicate it clearly

Another way to ensure that users who receive push notifications are happy with your messages is to only send web pushes when you have something of value to share. Web push notifications

You need to make sure that all browser notifications you send are on point. Don’t waste your readers’ time on meaningless communications. Instead, deliver real value by focusing on the topics that matter the most, such as:

• a fresh update of your product offer
• new discount campaign
• changes to your policy

It’s also important to clearly communicate the value you’re providing. Push notifications aren’t usually the place for questions or intrigue — you need to give users a compelling reason to stop what they’re doing and follow your CTA. 

With GetResponse, you can edit the color of the CTA for your web push notification to visually guide a reader in the right direction

Take these two titles, for example: 

• “Have you heard Jane Smith’s latest album?” 
• “Jane Smith’s latest album available now!” 

The first title doesn’t tell the user what they’re going to get if they click through. In contrast, the second one clearly communicates the value of clicking the notification. 

Tip 5: Send push notifications at the right time 

Push notifications are different from many other types of marketing because they’re sent in real time. So, it may seem that the timing makes a big difference. 

In fact, tailoring the sending time of push notifications can increase your user retention rate by up to 40%. Here are the best times to send web pushes: 

• Tuesdays from 4-6PM
• Wednesdays from 10AM-12PM and 3-6PM
• Thursdays from 3-6PM
• Fridays from 10-11AM, 2-4PM
• Saturdays from 4-5PM 

That said, event-based web pushes should be sent whenever it’s most appropriate according to the trigger or upcoming event. For example, if a user recently purchased an item, send the shipping confirmation whenever it comes in as that’s when it’ll be relevant and timely.

However, don’t worry if you sent your push message at the wrong time — the beauty of web push campaigns is that the user will still see it as soon as they get online.

Web push notifications: FAQ

Here is what people ask about the most when it comes to push messaging:

What is a web push notification?

Web push notifications (also called browser push notifications) are messages that pop up in a web browser of both desktop and mobile devices. 

The opt-in prompts typically slide in below the search bar on a web browser, asking website visitors if they’d like to receive web push messages from the website. 

Once a user has opted in to receive them, web notifications are used to inform subscribers about important updates, sales, events, promotions, and more. 

Learn more about what web pushes are and how to use them here

How do I send a web push notification?

The easiest way to send web push notifications to your customers is by using a push notification service (like GetResponse!).

Already using GetResponse for your marketing needs? Check out the article “How to create a Web push notification?” for more details. 

What’s the difference between web pushes and app push notifications?

A web push notification is attached to a specific web page. As such, browsers display notifications on both desktop and mobile devices, yet only as long as the browser is active.

App push notifications, in turn, allow marketers to send push messages regardless of the web browser. As long as the app is installed on the phone it should be able to send notifications.

Depending on the app’s specifics, some in-app push notifications don’t even require internet connection, while web push notifications will only appear once the user’s device is online.

Conclusion

Web push notifications work as a new effective way to reach customers. They can help you recover sales from abandoned carts, increase your conversion rates, boost traffic and engagement, and get new subscribers. 

If you’re just getting started, remember the following guidelines: 

• Ask permission first
• Make sure to include the right elements
• Hit the mark with your copywriting
• Always provide value (and communicate it clearly!)
• Send your notifications at the right time 

Good luck!