{"action":"created","issue":{"url":"https://api.github.com/repos/OneSignal/OneSignal-Website-SDK/issues/342","repository_url":"https://api.github.com/repos/OneSignal/OneSignal-Website-SDK","labels_url":"https://api.github.com/repos/OneSignal/OneSignal-Website-SDK/issues/342/labels{/name}","comments_url":"https://api.github.com/repos/OneSignal/OneSignal-Website-SDK/issues/342/comments","events_url":"https://api.github.com/repos/OneSignal/OneSignal-Website-SDK/issues/342/events","html_url":"https://github.com/OneSignal/OneSignal-Website-SDK/issues/342","id":312103454,"number":342,"title":"Custom code : Fire setSubscription ","user":{"login":"mvigneron","id":8959900,"avatar_url":"https://avatars3.githubusercontent.com/u/8959900?v=4","gravatar_id":"","url":"https://api.github.com/users/mvigneron","html_url":"https://github.com/mvigneron","followers_url":"https://api.github.com/users/mvigneron/followers","following_url":"https://api.github.com/users/mvigneron/following{/other_user}","gists_url":"https://api.github.com/users/mvigneron/gists{/gist_id}","starred_url":"https://api.github.com/users/mvigneron/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mvigneron/subscriptions","organizations_url":"https://api.github.com/users/mvigneron/orgs","repos_url":"https://api.github.com/users/mvigneron/repos","events_url":"https://api.github.com/users/mvigneron/events{/privacy}","received_events_url":"https://api.github.com/users/mvigneron/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-04-06T20:14:37Z","updated_at":"2018-04-23T21:10:31Z","closed_at":null,"author_association":"NONE","body":"Hi,\r\n\r\nI'm trying to develop a custom ui registration. \r\n\r\nI have a button \"Subscribe to Notifications / Unsubscribe from Notifications\". When I click on \"Subscribe to Notifications\", I would like to set subscription to true and change button to \"Unsubscribe from Notifications\". \r\nAnd so, When I click on \"Unsubscribe from Notifications\", I would like to set subscription to false and change button to \"Subscribe to Notifications\"\r\n\r\nI saw the doc https://documentation.onesignal.com/docs/web-push-custom-code-examples#section-custom-link-prompt\r\n\r\nFunction setSubscription(true) fire event \"subscriptionChange\"(just once after refresh page) but setSubscription(false) doesn't fire event \"subscriptionChange\"\r\n\r\nSo, what is the best way to do that without refresh page ?\r\n\r\nExample Code : \r\n\r\n```HTML\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <meta charset=\"utf-8\" />\r\n    <title>WebPush example</title>\r\n    <link rel=\"manifest\" href=\"/manifest.json\" />\r\n\t<script src=\"https://cdn.onesignal.com/sdks/OneSignalSDK.js\" async=\"\"></script>\r\n\t<script>\r\n\r\n        function onManageWebPushSubscriptionButtonClicked(event) {\r\n            getSubscriptionState().then(function(state) {\r\n                if (state.isPushEnabled) {\r\n                    /* Subscribed, opt them out */\r\n                    OneSignal.setSubscription(false);\r\n                } else {\r\n                    if (state.isOptedOut) {\r\n                        /* Opted out, opt them back in */\r\n                        OneSignal.setSubscription(true);\r\n                    } else {\r\n                        /* Unsubscribed, subscribe them */\r\n                        OneSignal.registerForPushNotifications();\r\n                    }\r\n                }\r\n            });\r\n            event.preventDefault();\r\n        }\r\n\r\n        function updateMangeWebPushSubscriptionButton(buttonSelector) {\r\n            var hideWhenSubscribed = false;\r\n            var subscribeText = \"Subscribe to Notifications\";\r\n            var unsubscribeText = \"Unsubscribe from Notifications\";\r\n\r\n            getSubscriptionState().then(function(state) {\r\n                var buttonText = !state.isPushEnabled || state.isOptedOut ? subscribeText : unsubscribeText;\r\n\r\n                var element = document.querySelector(buttonSelector);\r\n                if (element === null) {\r\n                    return;\r\n                }\r\n\r\n                element.removeEventListener('click', onManageWebPushSubscriptionButtonClicked);\r\n                element.addEventListener('click', onManageWebPushSubscriptionButtonClicked);\r\n                element.textContent = buttonText;\r\n\r\n                if (state.hideWhenSubscribed && state.isPushEnabled) {\r\n                    element.style.display = \"none\";\r\n                } else {\r\n                    element.style.display = \"\";\r\n                }\r\n            });\r\n        }\r\n\r\n        function getSubscriptionState() {\r\n            return Promise.all([\r\n                OneSignal.isPushNotificationsEnabled(),\r\n                OneSignal.isOptedOut()\r\n            ]).then(function(result) {\r\n                var isPushEnabled = result[0];\r\n                var isOptedOut = result[1];\r\n\r\n                return {\r\n                    isPushEnabled: isPushEnabled,\r\n                    isOptedOut: isOptedOut\r\n                };\r\n            });\r\n        }\r\n\r\n        var OneSignal = OneSignal || [];\r\n        OneSignal.push([\"init\", {\r\n            appId: \"APP_ID\",\r\n            autoRegister: false, /* Set to true to automatically prompt visitors */\r\n            notifyButton: {\r\n                enable: false, /* Required to use the Subscription Bell */\r\n                /* SUBSCRIPTION BELL CUSTOMIZATIONS START HERE */\r\n                size: 'large', /* One of 'small', 'medium', or 'large' */\r\n                theme: 'default', /* One of 'default' (red-white) or 'inverse\" (white-red) */\r\n                position: 'bottom-right', /* Either 'bottom-left' or 'bottom-right' */\r\n                offset: {\r\n                    bottom: '15px',\r\n                    left: '15px', /* Only applied if bottom-left */\r\n                    right: '15px' /* Only applied if bottom-right */\r\n                },\r\n                prenotify: true, /* Show an icon with 1 unread message for first-time site visitors */\r\n                showCredit: false, /* Hide the OneSignal logo */\r\n                text: {\r\n                    'tip.state.unsubscribed': 'Recevez les infos des commerces en temps réel',\r\n                    'tip.state.subscribed': \"Vous recevez les notifications\",\r\n                    'tip.state.blocked': \"Vous avez bloqué l'envoi de notification\",\r\n                    'message.prenotify': 'Cool ! Vous ne raterez aucune info !',\r\n                    'message.action.subscribed': \"Vous recevez les notifications\",\r\n                    'message.action.resubscribed': \"Cool ! Vous ne raterez aucune info !\",\r\n                    'message.action.unsubscribed': \"Pas de souci ! Vous ne recevrez plus les infos des commerces\",\r\n                    'dialog.main.title': 'Gestion des Notifications',\r\n                    'dialog.main.button.subscribe': 'Recevoir les notifications',\r\n                    'dialog.main.button.unsubscribe': 'Ne plus recevoir les infos',\r\n                    'dialog.blocked.title': 'Bloquer les notifications',\r\n                    'dialog.blocked.message': \"Suivez ces instructions pour réactiver les notifications\"\r\n                },\r\n                colors: { // Customize the colors of the main button and dialog popup button\r\n                    'circle.background': 'rgb(228,141,23)',\r\n                    'circle.foreground': 'black',\r\n                    'badge.background': 'rgb(228,141,23)',\r\n                    'badge.foreground': 'black',\r\n                    'badge.bordercolor': 'black',\r\n                    'pulse.color': 'black',\r\n                    'dialog.button.background.hovering': 'rgb(77, 101, 113)',\r\n                    'dialog.button.background.active': 'rgb(70, 92, 103)',\r\n                    'dialog.button.background': 'rgb(84,110,123)',\r\n                    'dialog.button.foreground': 'white'\r\n                }\r\n\r\n                /* HIDE SUBSCRIPTION BELL WHEN USER SUBSCRIBED */\r\n                /*displayPredicate: function() {\r\n                    return OneSignal.isPushNotificationsEnabled()\r\n                        .then(function(isPushEnabled) {\r\n                            return !isPushEnabled;\r\n                        });\r\n                }*/\r\n            },\r\n            /* Prompt option */\r\n            promptOptions: {\r\n                /* actionMessage limited to 90 characters */\r\n                actionMessage: \"Vous voulez recevoir les infos/promotions des commerces en temps réel ?\",\r\n                /* acceptButtonText limited to 15 characters */\r\n                acceptButtonText: \"Oui !\",\r\n                /* cancelButtonText limited to 15 characters */\r\n                cancelButtonText: \"Non Merci\"\r\n            },\r\n            /* Your other init options here */\r\n            welcomeNotification: {\r\n                \"title\": \"OneSpot - Notification\",\r\n                \"message\": \"Merci ! Vous ne raterez aucune info des commerces. Vous pouvez filtrer les notifs dans votre espace perso\",\r\n                // \"url\": \"\" /* Leave commented for the notification to not open a window on Chrome and Firefox (on Safari, it opens to your webpage) */\r\n            }\r\n        }]);\r\n        var buttonSelector = \"#my-notification-button\";\r\n\r\n        /* This example assumes you've already initialized OneSignal */\r\n        OneSignal.push(function() {\r\n            // If we're on an unsupported browser, do nothing\r\n            if (!OneSignal.isPushNotificationsSupported()) {\r\n                return;\r\n            }\r\n            updateMangeWebPushSubscriptionButton(buttonSelector);\r\n            OneSignal.on(\"subscriptionChange\", function(isSubscribed) {\r\n                /* If the user's subscription state changes during the page's session, update the button text */\r\n                console.log('subscriptionchange :' ,isSubscribed);\r\n                updateMangeWebPushSubscriptionButton(buttonSelector);\r\n            });\r\n            OneSignal.on('notificationPermissionChange', function(permissionChange) {\r\n                var currentPermission = permissionChange.to;\r\n                console.log('New permission state:', currentPermission);\r\n            });\r\n        });\r\n\t</script>\r\n</head>\r\n<body>\r\n    <h1>WebPush notification</h1>\r\n    <ul>\r\n        <li><a href=\"#\" id=\"my-notification-button\" style=\"display: none;\">Subscribe to Notifications</a></li>\r\n    </ul>\r\n</body>\r\n</html>\r\n```\r\n\r\nThanks"},"comment":{"url":"https://api.github.com/repos/OneSignal/OneSignal-Website-SDK/issues/comments/383724321","html_url":"https://github.com/OneSignal/OneSignal-Website-SDK/issues/342#issuecomment-383724321","issue_url":"https://api.github.com/repos/OneSignal/OneSignal-Website-SDK/issues/342","id":383724321,"user":{"login":"jkasten2","id":645861,"avatar_url":"https://avatars2.githubusercontent.com/u/645861?v=4","gravatar_id":"","url":"https://api.github.com/users/jkasten2","html_url":"https://github.com/jkasten2","followers_url":"https://api.github.com/users/jkasten2/followers","following_url":"https://api.github.com/users/jkasten2/following{/other_user}","gists_url":"https://api.github.com/users/jkasten2/gists{/gist_id}","starred_url":"https://api.github.com/users/jkasten2/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jkasten2/subscriptions","organizations_url":"https://api.github.com/users/jkasten2/orgs","repos_url":"https://api.github.com/users/jkasten2/repos","events_url":"https://api.github.com/users/jkasten2/events{/privacy}","received_events_url":"https://api.github.com/users/jkasten2/received_events","type":"User","site_admin":false},"created_at":"2018-04-23T21:10:31Z","updated_at":"2018-04-23T21:10:31Z","author_association":"OWNER","body":"@mvigneron The [`subscriptionChange`](https://documentation.onesignal.com/docs/web-push-sdk#section-subscription-change) event does not fire for `setSubscription` changes. This currently excluded.\r\n\r\nTo update the button without a page refresh you will need to call `updateMangeWebPushSubscriptionButton` from  `onManageWebPushSubscriptionButtonClicked`.\r\n```javascript\r\nfunction onManageWebPushSubscriptionButtonClicked(event) {\r\n  getSubscriptionState().then(function(state) {\r\n    if (state.isPushEnabled) {\r\n      /* Subscribed, opt them out */\r\n      OneSignal.setSubscription(false);\r\n    } else {\r\n      if (state.isOptedOut) {\r\n        /* Opted out, opt them back in */\r\n        OneSignal.setSubscription(true);\r\n      } else {\r\n        /* Unsubscribed, subscribe them */\r\n        OneSignal.registerForPushNotifications();\r\n      }\r\n    }\r\n    // HERE: Line added\r\n    updateMangeWebPushSubscriptionButton(\"#my-notification-button\");\r\n  });\r\n  event.preventDefault();\r\n}\r\n```"}}
{"actor":{"display_login":"jkasten2"}}