OneSignal 自定义提示设置和通知按钮

Question

如何自定义默认的 OneSignal 提示设置和通知按钮？

我想删除带有铃铛图标的通知按钮，并将其更改为 bootstrap 警报，其中包含一条文本消息 "Do you want to subscribe to receive updates?" 和两个按钮 "Yes" 或 "No" 选项。当用户点击 "Yes" 然后订阅用户。基本上我只想在我的页面的标题部分有一个订阅按钮，而不是 OneSignal 由 dafault 提供的按钮。

Answer 1

以下是 OneSignal 关于自定义或删除通知按钮的指南：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;
                });
        },
    }
}]);

这里是使用您自己的 Link/UI 订阅提示的指南：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>

OneSignal 自定义提示设置和通知按钮

OneSignal Custom Prompt Settings & Notify Button

javascript

jquery

onesignal