OneSignal Push Notifications Landing Page for manual subscribe and unsubscribe

i would like to know if its possible to have a manual subscribe/unsubscribe page for the onesignal web push service next to a existing wordpress setup.

Currently i have created one app id working for the blog on

https://example.com and https://www.example.com

Now is there a way to build a landing page for e.g at

https://www.example.com/push-landing

where users subscribe/unscribe for the same App ID ? So all notifications sent through the blog keeps getting recieved by users manual subscribed on the landing page?

The code below seems to work only for Safari yet, any idea why its not working on chrome/firefox?

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
<script>
    var useragentid = null;
    var OneSignal = window.OneSignal || [];
    OneSignal.push(["init", {
        appId: "e98e261d-b951-4335-accd-04887176b432",
        autoRegister: false,
        notifyButton: {
            enable: false 
        },
        persistNotification: false
    }]);
    //Firstly this will check user id 
    OneSignal.push(function() {
        OneSignal.getUserId().then(function(userId) {                
            if(userId == null){
                document.getElementById('unsubscribe').style.display = 'none';
            }
            else{
                useragentid = userId;
                document.getElementById('unsubscribe').style.display = '';
                OneSignal.push(["getNotificationPermission", function(permission){
                }]);
                OneSignal.isPushNotificationsEnabled(function(isEnabled) {
                    if (isEnabled){
                        document.getElementById('unsubscribe').style.display = '';
                        document.getElementById('subscribe').style.display = 'none';
                    }
                    else{
                      document.getElementById('unsubscribe').style.display = 'none';
                      document.getElementById('subscribe').style.display = '';
                    }
                });
            }
        });
    });
    //Secondly this will check when subscription changed
    OneSignal.push(function() {
        OneSignal.on('subscriptionChange', function (isSubscribed) {
            if(isSubscribed==true){
                OneSignal.getUserId().then(function(userId) {
                    useragentid = userId;
                }).then(function(){
                 // this is custom function
                // here you can send post request to php file as well.
                    OneSignalUserSubscription(useragentid);
                });
                document.getElementById('unsubscribe').style.display = '';
                document.getElementById('subscribe').style.display = 'none';
            }
            else if(isSubscribed==false){
                OneSignal.getUserId().then(function(userId) {
                    useragentid = userId;
                });
                document.getElementById('unsubscribe').style.display = 'none';
                document.getElementById('subscribe').style.display = '';
            }
            else{
                console.log('Unable to process the request');
            }
        });
    });
    function subscribeOneSignal(){
        if(useragentid !=null){
            OneSignal.setSubscription(true); 
        }
        else{
            OneSignal.registerForPushNotifications({
                modalPrompt: true
            });
        }
    }
    function unSubscribeOneSignal(){
        OneSignal.setSubscription(false);
    }
</script>
</head>
<div id="home-top" class="clearfix">
<p>Push Notifications</p>
<br>
<button id="subscribe" class="button" onclick="subscribeOneSignal()">Subscribe </button>
<button id="unsubscribe" class="button" onclick="unSubscribeOneSignal()">Unsubscribe </button>
</div>
<style>
.button {
    background-color: #008CBA;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;cursor: pointer;
}
</style>

</body>
</html>