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).
Permission UI UX
Websites must display a permission prompt to subscribe the users to web push notifications: let’s see how and when you can display the notification prompt and the different ways to present the prompt to the users.
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?
There are many free and open source resources where you can get an high-quality bell icon, in different formats, without the need to draw it manually.
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?