The double opt-in 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?

Let’s start by saying that the prompt with native appearances, also called permission prompt or browser prompt, is required and it is displayed automatically by the browser whenever you try to subscribe a user to the notifications. There’s no way for a website to skip this permission prompt: that is a security measure provided by the browser and ensures that only the websites explicitly allowed by the users can send notifications.

The native permission prompt displayed by Chrome on a website that wants to send notifications.

Websites could simply display that permission prompt when you visit the website, however most websites first display another prompt, designed with HTML / CSS. Then, once you try to subscribe using this custom prompt, they display the actual permission prompt. Here’s an example of custom prompt:

A custom prompt for notifications designed with HTML / CSS. Once you click Allow this prompt will show the actual browser prompt.

So what are the advantages of using the double opt-in? Why display a custom prompt before the actual browser prompt?

First of all the browser prompt can be displayed only once: if the user dismisses that you will no longer be able to display it. The only solution for the user would be to go to the browser settings (e.g. by clicking on the lock icon near the address bar) and change the permission manually. This can potentially decrease the subscription rates, so it is a wise choice to use a custom prompt, which can be displayed multiple times, and then display the permission prompt when you are pretty sure that the user actually wants to subscribe.

Another reason for using a custom prompt is that some browsers block the permission prompt and return an error if you try to display it on page load or outside a user-triggered event. For example Firefox returns this error message:

The Notification permission may only be requested from inside a short running user-generated event handler.

Since displaying the permission prompt on page load, as soon as the user enters a website, is considered an annoying practice, browsers like Firefox and Safari block that. Basically the solution is to trigger the permission prompt from a callback, after a user click or other interaction with the page. And that’s where the custom prompt comes in handy: first the user clicks on the custom prompt and then, inside a callback for the click, the actual permission prompt is displayed.

Using a custom prompt can also be useful because you can provide more context and information to the user. While the browser prompt cannot be customized and the text is fixed, you are free to customize the text of your custom prompt. This gives more information to the user and improves the usability.

Before using a double opt-in, however, I would always consider doing some better integration specific for your website and your use case: for example include a button or checkbox directly in the page, where it is more appropriate and where it makes sense for the user. For example you can ask the users to enable the notifications when they start a chat, to keep them informed about incoming messages, or when they book a ticket, to keep them informed about any change.

Whether you decide to use the custom prompt or display the permission prompt directly, you can use a service like Pushpad that supports both. If you want to display the custom prompt you can use our Javascript Widget, which has many customization options, while if you want to trigger the permission prompt directly, on page load or after a click on a button, you can use our Javascript SDK. They are both described in the Getting started guide.

Leave a Reply

Your email address will not be published. Required fields are marked *