Update subscription categories after subscription

This live demo example shows how to update subscription categories after subscription process.

More detailed explanation about it can be found in documentation about changing subscription audiences and callbacks during subscription process.

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",
            loadSettings: true,
            step0: "waitClick",
            view: "slider",
            skinName: "slider",
        })

        sdk.SDKCaller.onPermissionAllowed(() => {
            // Domain permissions granted
            // We can show block that is used for customising subscription audiences
            console.log("onPermissionAllowed callback")
            document.querySelector('#show-when-permission-granted').style.display = 'block'
        });

        sdk.SDKCaller.onAlreadySubscribed(() => {
            // Domain permissions previously were already granted
            // We can show block that is used for customising subscription audiences
            console.log("onAlreadySubscribed callback")
            document.querySelector('#show-when-permission-granted').style.display = 'block'
        });

        sdk.SDKCaller.onPermissionCanAsk(() => {
            // Here we show element that is used for triggering subscription prompt
            console.log("onPermissionCanAsk callback")
            document.querySelector('#show-when-permission-not-granted').style.display = 'block'
        });

        sdk.SDKCaller.onPermissionCanNotAsk(() => {
            // Here we hide element that is used for triggering subscription prompt
            // Because we can not ask permissions
            console.log("onPermissionCanNotAsk callback")
            document.querySelector('#show-when-permission-not-granted').style.display = 'none'
        });

        // This will be called when buttons with subscriptions
        // to particular categories can be shown
        sdk.SDKCaller.onAudiencesCanBe((audiences) => {
            console.log("onAudiencesCanBe", audiences)

            // Define visibility of elements that are used
            // for switching subscription state for particular audience
            document.querySelector('#news-subscribed').style.display = audiences.includes('news')  ? 'block' : 'none';
            document.querySelector('#news-unsubscribed').style.display = audiences.includes('news')  ? 'none' : 'block';
            document.querySelector('#sport-subscribed').style.display = audiences.includes('sport')  ? 'block' : 'none';
            document.querySelector('#sport-unsubscribed').style.display = audiences.includes('sport')  ? 'none' : 'block';

        });

        document.querySelector('#news-subscribed').addEventListener('click', async () => {
            const audiences = await sdk.unsubscribeAudience('news');
            // Hide or show corresponding UI elements
            document.querySelector('#news-subscribed').style.display = audiences.includes('news')  ? 'block' : 'none';
            document.querySelector('#news-unsubscribed').style.display = audiences.includes('news')  ? 'none' : 'block';
        });

        document.querySelector('#news-unsubscribed').addEventListener('click', async () => {
            const audiences = await sdk.subscribeAudience('news');
            // Hide or show corresponding UI elements
            document.querySelector('#news-subscribed').style.display = audiences.includes('news')  ? 'block' : 'none';
            document.querySelector('#news-unsubscribed').style.display = audiences.includes('news')  ? 'none' : 'block';
        });

        document.querySelector('#sport-subscribed').addEventListener('click', async () => {
            const audiences = await sdk.unsubscribeAudience('sport');
            // Hide or show corresponding UI elements
            document.querySelector('#sport-subscribed').style.display = audiences.includes('sport')  ? 'block' : 'none';
            document.querySelector('#sport-unsubscribed').style.display = audiences.includes('sport')  ? 'none' : 'block';
        });

        document.querySelector('#sport-unsubscribed').addEventListener('click', async () => {
            const audiences = await sdk.subscribeAudience('sport');
            // Hide or show corresponding UI elements
            document.querySelector('#sport-subscribed').style.display = audiences.includes('sport')  ? 'block' : 'none';
            document.querySelector('#sport-unsubscribed').style.display = audiences.includes('sport')  ? 'none' : 'block';
        });

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

HTML

<div id="show-when-permission-granted" style="display: none;">
    <p>You granted permissions receiving push notifications from this domain.
        You can subscribe/unsubscribe to particular categories.</p>

    <button id="news-subscribed" style="display: none;">You are subscribed to News, click for unsubscribe</button>
    <button id="news-unsubscribed" style="display: none;" class="disabled">You are NOT subscribed to News, click for subscribe</button>

    <button id="sport-subscribed" style="display: none;">You are subscribed to Sport, click for unsubscribe</button>
    <button id="sport-unsubscribed" style="display: none;" class="disabled">You are NOT subscribed to Sport, click for subscribe</button>
</div>

<div id="show-when-permission-not-granted" style="display: none;">
    <button id="permission-prompt-button">Subscribe to push notifications</button>
</div>