How to build a custom notification prompt with Tailwind and Pushpad
Let's see how to design a custom prompt for asking notification permission using Tailwind CSS.
Articles about web push notifications
Prevent the overlapping of notification prompt and cookie consent banner
Sometimes you have multiple prompts on a website (e.g. a cookie consent banner and a notification prompt) and for UI / UX reasons you may want to prevent the overlapping of the different prompts. Let's see some solutions.
A bell for notifications with JavaScript animation
In this tutorial we create a ringing bell animation with JavaScript and we learn how to create a simple bell icon that you can place in a corner of your web page (e.g. to collect subscribers to your push notifications).
Best UI / UX for subscribing users to web push notifications
In order to optimize the number of people that subscribe to your notifications, you need to use the right user interface (UI). It's also important to design a good user experience (UX), so that the notification prompt is perceived as something useful for the user and not as an annoyance. In this post we'll analyze different approaches and user interfaces that are useful to ask users to subscribe to web push notifications.
Bell icon for push notifications and subscribe button
Are you looking for a bell icon to represent push notifications or to create a subscribe button on your website?
Web push notifications from iframe
Is it possible to subscribe the users to web push notifications from an iframe?
Web notifications in incognito mode
Is it possible to subscribe to notifications when surfing in incognito mode or with private browsing (e.g. on Chrome, Firefox)?
Reset the denied permission for notifications (undo "Block")
What can you do if a user blocks the notifications on your website by clicking the "Block" button in the permission prompt? How can you reset that choice? How can you display the permission prompt again?
Request permission for web push notifications
The first thing to do in order to subscribe a user to notifications is to ask for permission.
The notification prompt can only be triggered by a user gesture on some browsers
On some browsers, the permission prompt for notifications can be displayed only after a user interaction with the website. Let's see why some browsers enforce this rule, what happens if you don't comply with it and how can you implement a solution that works across all major browsers.
Chrome blocks the notifications on abusive websites
Chrome 84 will fight abusive notifications. Let's see what you should do to stay complaint and avoid the penalization.
The double opt-in (prompt) for web push notifications
Browsing the web, you may have noticed that most websites use a double opt-in process for subscribing the users to notifications. Basically these websites first show a custom prompt (designed with HTML / CSS) that asks you if you are interested in the notifications, then, when you click the subscribe button, they display another prompt (with native appearance) asking you if you really want to allow the notifications from the website. Isn't one prompt enough?
The new Pushpad widget for web push notifications
We are happy to announce that we have just released a new feature in our Javascript SDK: we provide a widget that makes it easy to display a custom prompt, a floating action button or a subscribe button in order to collect subscribers.
Display the prompt for web push notifications multiple times
Usually the prompt for web push notifications is displayed only once, the first time that the user visits a website. What if the user blocks the notifications? Is there a way to show the notifications prompt when the user visits the website again?
Force the user to subscribe to web push notifications
Forcing the user to subscribe to push notifications is probably not a good choice for most websites. However there are some specific situations where it makes sense to do that.