Sending Push Notifications when products become available

If your website has products that sometimes are out of stock, you can send a Push Notification to visitors who were interested in the specific product and asked to inform them when it becomes available.

1. Check if browser supports Web Push?

You need to verify if visitor's browser supports Web Push Notifications. If it does not, then you can ask him to use a different browser (Chrome or Firefox, for example), or just hide this feature. To check it, you can use our library: 

<script type="text/javascript">
mt(function(mtsdk) {
  // Get push notification permission status
  // "unsupported" push notifications not supported
  // "default" visitor is ready to receive permission request to allow/block push 
  // "granted" visitor has allowed push notifications
  // "denied" visitor has blocked push notifications
  if(mtsdk.pushNotificationPermission == "unsupported") {
    //visitor is using browser that does not support browser notifications
    //we recommend to either disable feature or ask them to use a different browser
  }
});
</script>

2. Get visitors ID

To subscribe visitor to your product updates, you first need to get his unique ID from MaxTraffic's API. 

<script type="text/javascript">
mt(function(mtsdk) {
  // Get visitor unique Id
  // To test it, display it in Console
  console.log(mtsdk.visitorId);
});
</script>  

3. Check if visitor has granted permission to receive browser push notifications

<script type="text/javascript">
mt(function(mtsdk) {
  // Get push notification permission status
  // "unsupported" push notifications not supported
  // "default" visitor is ready to receive permission request to allow/block push
  // "granted" visitor has allowed push notifications
  // "denied" visitor has blocked push notifications
  if(mtsdk.pushNotificationPermission == "granted") {
    //visitor has granted permission to receive push notifications
  }
});
</script>

3.1. If user has denied permission to receive web push notifications

Show him instruction how to grant permission for your site:

<script type="text/javascript">
mt(function(mtsdk) {
  // Get push notification permission status
  // "unsupported" push notifications not supported
  // "default" visitor is ready to receive permission request to allow/block push
  // "granted" visitor has allowed push notifications
  // "denied" visitor has blocked push notifications
  if(mtsdk.pushNotificationPermission == "denied") {
    //visitor has denied permission to send him Push Notifications
    //show him instruction how to subscribe
    mtsdk.togglePushNotificationBlockedDialog();
  }
});
</script>

If you execute mtsdk.togglePushNotificationBlockedDialog(), it will activate this instruction on visitor's screen:

4. Check if visitor has subscribed to Product Updates

You need to check this in your own database. We would recommend to create a data table with 2 columns: user_id, product_id

If user has already subscribed to Product Updates, you can show it to him and also let him unsubscribe if he wants.

If he unsubscribes, then remove him from your data table. 

5. Subscribing visitor to Product Updates

If user wants to receive product updates, then just save his visitorId + productId in your own database.

<script type="text/javascript">
mt(function(mtsdk) {
  // Get push notification permission status
  // "unsupported" push notifications not supported
  // "default" visitor is ready to receive permission request to allow/block push
  // "granted" visitor has allowed push notifications
  // "denied" visitor has blocked push notifications
  if(mtsdk.pushNotificationPermission == "granted") {
    //visitor has granted permission to receive web push 
    //if visitor clicks on button to receive product updates
    //then add his info to your own database
  }
});
</script>

6. Get your MaxTraffic REST API key

To use REST API, you first need to get your REST API key in e.maxtraffic.com > Push Notifications > Settings > API.

7. Sending info about Product Updates

When a product that was out of stock, becomes available again, then you can do a query on your own database and select all visitors who subscribed to this specific product updates.

Then use MaxTraffic's REST API to send out a Push Notification to them. More info how to send a message with our REST API, is available here: dev.maxtraffic.com/#operation/addNotification