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?

Let's say that a user is visiting your website and you want to subscribe them to your notifications.

The first required step is to request the permission for notifications by calling PushManager.subscribe() or Notification.requestPermission(). If you are using Pushpad the method is pushpad('subscribe').

These methods will display a permission prompt:

example.com wants to show notifications. [Block] [Allow]

If the user clicks "Allow", then the permission is "granted".

If the user clicks "Block" on the permission prompt, then the permission for displaying notifications from this website is changed from "default" to "denied".

And here's the problem... Once the status is "denied", the website cannot ask to subscribe to notifications again. The permission prompt can be displayed only once (when the status is "default").

Basically the user, even if he changes his mind, will never be able to subscribe.

Let's see some solutions to this problem.

Solution 1: display the prompt only when you are 100% sure

The easiest solution to this problem is to avoid the problem.

For example, if you have a "Subscribe" button or bell icon on your website and the user clicks it because he wants to subscribe to notifications, then he will probably click "Allow" on the browser permission prompt.

It's very unlikely that he tries to subscribe to notifications and then denies the permission soon after.

If you are using the Pushpad Javascript SDK for notifications, you can easily implement a custom button.

Solution 2: the double opt-in

Let's say that you want to show a prompt for notifications when a user visits your website (e.g. when he lands on your website after a search with Google).

If you display the browser permission prompt directly, it's possible that the user clicks "Block". In this case, as we already said, it's difficult to revert this choice.

A solution adopted by many websites is to display two prompts:

1. First, display a custom prompt built with HTML and CSS
2. Then, only if the user says "Allow" on the first prompt, display the real browser prompt.

In this way if a user is not interested, he clicks "No, thanks" on the first prompt... And you can always display it again after some time (the real permission prompt was never displayed).

If you are using the Pushpad Javascript SDK for notifications, you can easily implement a double prompt with 1 line of code.

Solution 3: inform the user about browser preferences

Even if the website cannot change the permission when it's "denied", the user can still reset it or change it from browser preferences.

However many users are not aware of this possibility.

A solution is to inform them with a message, when you detect that the permission is denied.

If you are using the Pushpad Javascript SDK for notifications, you can use a code like this:

pushpad('subscribe', function (isSubscribed) {
  if (isSubscribed) {
    alert("Thanks! You have successfully subscribed to notifications.");
  } else {
    alert("Notifications are blocked. Please open your browser preferences or click the lock near the address bar to change your notification preferences.");
  }
});

As you can see we display a meaningful help message and not just "notifications are blocked".

You can even add a link to a tutorial in the help center.

In this way the user can manually change / reset the permission from browser settings and then you will be able to subscribe him to notifications.