Example: Soft unsubscribe using UI element

This example shows how to softly unsubscribe user (disable push notifications) without revoking permissions

Javascript code listing

   <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
        })

        const unsubscribeBell = document.querySelector('#unsubscribeBell');

        sdk.SDKCaller.onAlreadySubscribed(() => {
            unsubscribeBell.style.display = 'block'
        });

        sdk.SDKCaller.onPermissionCanNotAsk(() => {
            unsubscribeBell.style.display = 'block'
        });

        sdk.SDKCaller.onSubscriptionDisabled(() => {
            unsubscribeBell.style.display = 'none'
        });

        unsubscribeBell.addEventListener('click', () => sdk.softUnsubscribe())
  }
  document.head.append(s)
</script>

CSS styles (just for example)

    <style>
    .unsubscribeBell {
        display: none;
        position: fixed;
        right: 20px;
        bottom: 15px;
    }

    .unsubscribeBell:hover .unsubscribeBell__message {
        opacity: 1;
    }

    .unsubscribeBell__message {
        position: relative;
        bottom: 16px;
        background-color: #171D2E;
        color: #fff;
        border-radius: 4px;
        padding: 12px;
        opacity: 0;
        transition: 0.2s ease-in-out;
        animation: fadeInRevert .2s ease-in-out;
        animation-delay: 3.8s;
        animation-fill-mode: forwards;
    }

    .unsubscribeBell__message:after {
        content: "";
        position: absolute;
        top: 14px;
        right: -7px;
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-left: 7px solid #171D2E;
        border-bottom: 7px solid transparent;
    }

    .unsubscribeBell__icon {
        border: none;
        width: 48px;
        height: 48px;
        background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2IiByeD0iMTgiIGZpbGw9IiMwMDU4MkIiLz4KPHBhdGggZD0iTTE4LjA4OTIgNC41SDE3LjkxMDhDMTIuMzgyMiA0LjUgNy44NzUgOS4wMjQyNiA3Ljg3NSAxNC41NzM4VjI2LjIyNjJIOC4xODMwNUMxMS4wMzY1IDI2LjIyNjIgMTMuMDMwNyAyMy45NjQxIDEzLjAzMDcgMjAuNzA5MlYxNC41NzM4QzEzLjAzMDcgMTIuMTk3NyAxNC45OTI1IDkuNjU4OTYgMTcuOTI3IDkuNjU4OTZIMTguMDg5MkMyMC45NTg5IDkuNjU4OTYgMjIuOTUzMSAxMi4yNDY2IDIyLjk1MzEgMTQuNTczOFYyMC43MDkyQzIyLjk1MzEgMjMuOTY0MSAyNC45NjM1IDI2LjIyNjIgMjcuODE3IDI2LjIyNjJIMjguMTI1VjE0LjU3MzhDMjguMTI1IDkuMDI0MjYgMjMuNjM0IDQuNSAxOC4wODkyIDQuNVoiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xOC4wMDgxIDI3LjY5MTJDMTYuNzkyMiAyNy42OTEyIDE1LjU5MjQgMjcuNjI2MSAxNC40MDg4IDI3LjUxMjJDMTQuNDczNyAyOS40NDg4IDE2LjA2MjYgMzAuOTk0OSAxOC4wMDgxIDMwLjk5NDlDMTkuOTUzNyAzMC45OTQ5IDIxLjU0MjUgMjkuNDQ4OCAyMS42MDc0IDI3LjUxMjJDMjAuNDIzOSAyNy42MjYxIDE5LjIyNDEgMjcuNjkxMiAxOC4wMDgxIDI3LjY5MTJaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K);
        box-shadow: 0 3px 8px 0 rgba(34, 60, 80, 0.2);
        background-repeat: no-repeat;
        background-size: 75%;
        background-position: 50%;
        border-radius: 50%;
        margin-left: 15px;
        cursor: pointer;
        background-color: #00582B;
        padding: initial;
    }
</style>
    <div class="unsubscribeBell" id="unsubscribeBell">
        <span class="unsubscribeBell__message">You are subscribed, click for unsubscribe</span>
    <button class="unsubscribeBell__icon"></button>
</div>