OneSignal subscribe user through web page using web-push-sdk
Is there a way in one signal web-push-sdk to add user manually and unsubscribe?
I tried this in my subscribeOneSignal() function but nothing happening.
OneSignal.push(function() {
OneSignal.registerForPushNotifications();
});
I have simple html page where I have two buttons one "Subscribe" and other is "Unsubscribe", now when user click on Subscribe button he should add at one signal and when he clicked on "Unsubscribe" button he shouldn't receive the notifications.
<!DOCTYPE html>
<html>
<head>
<link rel="manifest" href="/manifest.json">
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(["init", {
appId: "345345-asdf-345",
autoRegister: false,
notifyButton: {
enable: true
}
}]);
function subscribeOneSignal(){
OneSignal.push(function() {
OneSignal.registerForPushNotifications();
});
OneSignal.push(function() {
OneSignal.registerForPushNotifications({
modalPrompt: true
});
});
}
function unSubscribeOneSignal(){
//unsubscribe functionality goes here
}
</script>
</head>
<body>
<p>OneSingle Testing</p>
<br>
<button onclick="subscribeOneSignal()">Subscribe </button>
<button onclick="unSubscribeOneSignal()">Unsubscribe </button>
</body>
</html>
Answer
Here is solution, It may help someone else.
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async></script>
<script>
var useragentid = null;
var OneSignal = window.OneSignal || [];
OneSignal.push(["init", {
appId: "345345-asdf-345",
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>
<div id="home-top" class="clearfix">
<p>OneSingle Testing</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>