Soft unsubscribe (disable subscription)

Each push subscriber can revoke permissions for receiving push notifications in his browser himself. For disabling push subscription without asking users to do it, you can use Notix SDK and provide this functionality directly on your website. But it's important to understand, that revoking permissions for domain and unsubscribing using Notix SDK are separate independent processes.

To unsubscribe a user you can use sdk.softUnsubscribe() method. For example call it when user clicks «unsubscribe» button.
Important:You should control appearance and location of «unsubscribe» button by yourself. 

document.querySelector('#unsubscribe-button').addEventListener("click", () => {
    sdk.softUnsubscribe();
});

For ability to draw or hide «unsubscribe» you should detect current subscription state. For this purpose serve following SDK methods:

  • onSubscriptionEnabled() – Is called when user granted permissions for receiving push notifications and didn't unsubscribed. It's normal live subscription that will receive push messages.
  • onSubscriptionDisabled() – Is called when user has permissions for domain, but subscription is disabled with sdk.softUnsubscribe() method.

For full list of Notix SDK callbacks that allow you to control your website appearance and behavior based on subscription statuses can be found here

.

Live demo example

Source code of this example

Sample HTML

<div id="show-when-permission-granted" style="display: none;">

    <div id="show-when-permission-enabled" style="display: none;">
        <h5>You are subscribed to push notifications now</h5>
        <button id="unsubscribe-button">Unsubscribe</button>
    </div>

    <div id="show-when-permission-disabled" style="display: none;">
        <h5>You are unsubscribed and will not receive messages</h5>
    </div>
</div>

<div id="show-when-permission-not-granted" style="display: none;">
    <h5>You are not granted permissions for this domain</h5>
    <button id="permission-prompt-button">Subscribe to push notifications</button>
</div>

JavaScript

<script>
    var s = document.createElement("script")
    s.src = "https://notix.io/ent/current/enot.min.js"
    s.onload = function (sdk) {
        sdk.startInstall({
            appId: "YOUR-APP-ID-HERE",
            step0: "waitClick",
            clickSelector: "#permission-prompt-button"
        })

        // Specify what user action should trigger unsubscribe
        // In this example clicking on button is implemented as trigger
        document.querySelector('#unsubscribe-button').addEventListener("click", () => {
            sdk.softUnsubscribe();
        });

        sdk.SDKCaller.onPermissionCanAsk(() => {
            console.log('onPermissionCanAsk callBack');
            // Show content for user that yet not give permissions for receiving push notifications
            document.querySelector('#show-when-permission-not-granted').style.display = 'block'
        });

        sdk.SDKCaller.onSubscriptionEnabled(() => {
            console.log('onSubscriptionEnabled callBack');
            document.querySelector('#show-when-permission-granted').style.display = 'block'
            document.querySelector('#show-when-permission-enabled').style.display = 'block';
            document.querySelector('#show-when-permission-not-granted').style.display = 'none'
        });

        sdk.SDKCaller.onSubscriptionDisabled(() => {
            console.log('onSubscriptionDisabled callBack');
            // Permissions for domain are granted
            document.querySelector('#show-when-permission-granted').style.display = 'block'

            // But they are disabled through Notix SDK
            document.querySelector('#show-when-permission-enabled').style.display = 'none';
            document.querySelector('#show-when-permission-disabled').style.display = 'block';
        });

    }
    document.head.append(s)
</script>

Related topics: