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
To send notification using MaxTraffic user ID (mtsdk.visitorId), you need to use parameter to_uids