How to customize the default OneSignal Prompt Settings & Notify Button? enter image description here

I want to remove the notify button with a bell icon and change it with bootstrap alert that has a text message of "Do you want to subscribe to receive updates?" and just a two button with "Yes" or "No" options. When the user click "Yes" then subscribe the user. Basically I just want a subscribe button in the heading section of my page and not the button that OneSignal provide by dafault.

upvote
  flag
I want onesignal to automatically prompt the user to subscribe when they visit my website. How to do it? – Ankit
upvote
  flag
@Ankit by autoRegister: true, – Pedram

1 Answers 11

up vote 6 down vote accepted

Here is OneSignal's guide on customizing or removing the notify button: https://documentation.onesignal.com/docs/web-push-prompts#section-subscription-bell

How do I hide the notify button after subscribing, or only show it on certain pages?

The notify button init options takes in a displayPredicate function which is evaluated before the notify button is shown. To hide the notify button, this function must return the value false or a Promise that resolves to the value false. You may return any other value to show the notify button.

Here is an example hiding the notify button if the user is subscribed:

JavaScript

// Do NOT call init() twice
// This is just an example
OneSignal.push(["init", {
    /* Your other init options here */
    notifyButton: {
        /* Your other notify button settings here ... */
        enable: true,
        displayPredicate: function() {
            return OneSignal.isPushNotificationsEnabled()
                .then(function(isPushEnabled) {
                    /* The user is subscribed, so we want to return "false" to hide the notify button */
                    return !isPushEnabled;
                });
        },
    }
}]);

And here's the guide on using your own Link/UI for the subscription prompt: https://documentation.onesignal.com/docs/web-push-sdk-setup-https#section-4-customizing-user-subscription

Subscribing Users With a Link

Here is an example. It adds a link that, when clicked, prompts the user to subscribe to notifications. This link is shown only if the user is unsubscribed, and notifications are supported.

HTML

<body>
  <a href="#" id="subscribe-link" style="display: none;">Subscribe to Notifications</a>
  <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async="async"></script>
  <script>
    function subscribe() {
      OneSignal.push(["registerForPushNotifications"]);
      event.preventDefault();
    }

    var OneSignal = OneSignal || [];
    /* This example assumes you've already initialized OneSignal */
    OneSignal.push(function() {
      // If we're on an unsupported browser, do nothing
      if (!OneSignal.isPushNotificationsSupported()) {
        return;
      }
      OneSignal.isPushNotificationsEnabled(function(isEnabled) {
        if (isEnabled) {
          // The user is subscribed to notifications
          // Don't show anything
        } else {
          document.getElementById("subscribe-link").addEventListener('click', subscribe);
          document.getElementById("subscribe-link").style.display = '';
        }
      });
    });
  </script>
</body>
upvote
  flag
Thank you for answering this. Just in case, seems event.preventDefault(); won't execute in the code above. – julianm
upvote
  flag
@Gdeglin and all others, I want onesignal to automatically prompt the user to subscribe when they visit my website. How to do it? – Ankit
upvote
  flag
how to automatically prompt the users to subscribe to notifications? – Zameer Fouzan
upvote
  flag
autoRegister: true – Denis

Not the answer you're looking for? Browse other questions tagged or ask your own question.