How to allow users to manage their push preferences from my website?

You can integrate a custom toggle switch into your website to manage web push notifications easily (opt-in and opt-out).

By default, users can manage their push preferences from their browser settings on desktop and mobile (see more here).

Instead of making your users dive into their browser settings, you can give them the option to disable/enable push notifications directly from your website using a toggle switch.

Example of a notifications switch button on a website

The following steps will help you set up this button on your website.

1

Getting users' opt-in status

First, you need to get the users' opt-in status to update the status of the button. You can use this method :

batchSDK(function (api) {api.isSubscribed()});
2

Update the opt-in status

Gif showing a toogle button switching from off to on

Depending on the action your users perform, you will need to call different methods when users click your toggle switch.

Turning off push notifications:

batchSDK(function(api) {api.unsubscribe();});

Turning on push notifications:

batchSDK(function(api) {api.subscribe();});

Here is an example of how you could implement a toggle switch using these methods:

<input type="checkbox" id="toggle" onclick="validate();" />
<script type="text/javascript">
      function validate() {
        if (document.getElementById("toggle").checked) {
          batchSDK(function(api) {api.subscribe();});
        } else {
          batchSDK(function(api) {api.unsubscribe();});
        }
      }
    </script>

Last updated

Was this helpful?