Pushpad Logo Pushpad

Pushpad Pro: Javascript SDK Examples

Some of the following examples use jQuery, but you can use vanilla Javascript as well. The SDK doesn't use jQuery.

Subscription on page load

Asking visitors to receive notifications as soon as they enter the website is quite common practice. Even if this solution doesn't always offer the best user experience and you should prefer other methods, this is definitely a widespread use case that can be implemented with just a few lines of code.

pushpad('init', myProjectId);
pushpad('subscribe');

Subscribe users to push notifications after login or signup

A scenario where the previous approach offers a good user experience is when you automatically ask to receive push notifications on a welcome page, after the user has signed up or logged in on your website. In this case it's also useful to add an id of the current user to the subscription so that you can target him later.

pushpad('init', myProjectId);
pushpad('subscribe', function (isSubscribed) {
  // if the user blocks push notifications for your website
  // you may want to display a notice somewhere
  if (!isSubscribed)
    alert('Please enable push notifications from your browser preferences to receive...');
}, { 
  uid: 'myUser1',
  uidSignature: 'mySignature'
});

Unsubscribe a user from push notifications after logout

When a user logs out from your website you may want to stop sending him notifications on that device.

If you want to stop all notifications:

pushpad('init', myProjectId);
pushpad('unsubscribe');

Another approach is to stop only the confidential notifications (e.g. notifications about the user account), but keep sending general news to that device (e.g. news about blog articles or new features). To do this, instead of removing the whole subscription, just remove the user ID from the subscription:

pushpad('init', myProjectId);
pushpad('unsubscribe', function () {}, { uid: true });

Button

Let's create a simple button to subscribe/unsubscribe the user from push notifications.

<button id="pushpad-button">Subscribe</button>
pushpad('init', myProjectId);

// optionally call 'uid' if the user is logged in to your website
pushpad('uid', 'myUser1', 'mySignature');

$(function () {
  var updateButton = function (isSubscribed) {
    var btn = $('#pushpad-button');
    if (isSubscribed) {
      btn.html('Unsubscribe');
      btn.addClass('subscribed');
    } else {
      btn.html('Subscribe');
      btn.removeClass('subscribed');
    }
  };
  // check whether the user is subscribed to the push notifications and
  // initialize the button status (e.g. display Subscribe or Unsubscribe)
  pushpad('status', updateButton);

  // when the user clicks the button...
  $('#pushpad-button').on('click', function(e) {
    e.preventDefault();

    // if he wants to unsubscribe
    if ($(this).hasClass('subscribed')) {
      pushpad('unsubscribe', function () { 
        updateButton(false);
      });

    // if he wants to subscribe
    } else {
      // try to subscribe the user to push notifications
      pushpad('subscribe', function (isSubscribed) { 
        if (isSubscribed) {
          // success
          updateButton(true);
        } else {
          // oops... the user has denied permission from the browser prompt
          updateButton(false);
          alert('You have blocked notifications from your browser preferences.');
        }
      });
    }
  });

  pushpad('unsupported', function () {
    $('#pushpad-button').prop('disabled', true);
    alert("Your browser doesn't support push notifications.");
  });
});

Notification preferences with checkboxes

Let's see how to build a form which allows the user to select which notifications wants to receive on the current device.

<label>
  <input type="checkbox" class="push-preference" data-tag="topic1">
  Topic1
</label>
<label>
  <input type="checkbox" class="push-preference" data-tag="topic2">
  Topic2
</label>
pushpad('init', myProjectId);

// get some information about the current subscription:
// we use it to initialize the checkboxes
pushpad('status', function (isSubscribed, tags) {

  // for each checkbox
  $('.push-preference').each(function () {
    var element = $(this);
    var tag = element.data('tag');

    // initialize the checkbox to the correct status: checked / unchecked
    if (isSubscribed && tags.indexOf(tag) != -1) {
      element.prop('checked', true);
    } else {
      element.prop('checked', false);
    }

    // listen for events on the checkbox
    element.on('change', function (e) {
      e.preventDefault();

      // when the checkbox is checked you must subscribe to push notifications
      if(element.is(':checked')) {
        // we'll check the checkbox again when we are absolutely sure that 
        // the subscription is successful
        element.prop('checked', false);

        pushpad('subscribe', function (isSubscribed) {
          if (isSubscribed) {
            element.prop('checked', true);
          } else {
            alert('You have blocked the notifications for this website. Please change your browser preferences and try again.');
          }
        }, { tags: [tag] });

      // when the checkbox is unchecked you must unsubscribe from push notifications
      } else {
        pushpad('unsubscribe', function () {
          element.prop('checked', false);
        }, { tags: [tag] });
      }
    });
  });

});