Guides

Collection Notification Feature

πŸ“˜

What is the Collection Notification Feature?

This feature requires API integration. Please contact your Mobidoo representative if integration is needed.

πŸ“¨ E-mail

πŸ”” Kakao Talk channel

Collection Notification Feature

This can be configured using bridge functions and only works when the user is logged in.

When the user clicks the notification button, the following function is triggered.
You can handle API integration by reading the provided parameters.


// Triggered when the user clicks the notification button.
// After registering the notification data via your API,
//dispatchEvent(window.flexCollectApplyCheckNotification(applyBroadcastObj))
//  to update the button UI across all modules.
 function flexCollectApplyForNotification(params){
        console.log('flexCollectApplyForNotification',params:NotificationParams)
        const applyBroadcastObj={ broadcastId:params.broadcastId  }  
        const response = fetch('YOUR_API' ).then()...
        if(response.isOk){
          dispatchEvent(window.flexCollectApplyCheckNotification(applyBroadcastObj))
        }
        
     }
// Triggered when the user clicks a subscribed (notification-on) button.
// After canceling the subscription via your API,
// dispatchEvent(window.flexCollectCancelCheckNotification(applyBroadcastObj))
// to reflect the cancellation in the UI across all modules.
 function flexCollectCancelForNotification(params){
         console.log('flexCollectCancelForNotification',params)
         const canceledBroadcastObj={ broadcastId:params.broadcastId  }
         const response = fetch('YOUR_API' ).then()...
         if(response.isCancel){
          dispatchEvent(window.flexCollectCancelCheckNotification(applyBroadcastObj))
        }
     }

Parameter Definition for Notification Bridges

FieldTypeDescription
memberIdStringmember ID
programmingStartDtStringBroadcast start time (e.g., UTC"2022-02-01T06:34:00.000Z")
programmingEndDtStringBroadcast end time (e.g., UTC"2022-02-02T06:34:00.000Z")
broadcastIdStringBroadcast ID
accessTokenStringJWT TOKEN

Example: Modular Notification Setup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='sauce_collect'></div>
    <div id='sauce_curation_1'></div>
    <div id='sauce_curation_2'></div>
<script type="text/javascript" src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
<script>

 // This function is triggered when the user clicks the notification button.
 // the broadcast ID as an object, as shown below, dispatchEvent(window.flexCollectApplyCheckNotification()) 
 // If confirmed, the notification will be marked as applied.
function flexCollectApplyForNotification(params){
        console.log('flexCollectApplyForNotification',params)
        const applyBroadcastObj={ broadcastId:params.broadcastId  }  
        if( window.confirm('Would you like to subscribe to notifications for this broadcast?')){
            dispatchEvent(window.flexCollectApplyCheckNotification(applyBroadcastObj))
        }
    }
 // This function is triggered when the user clicks to cancel a notification.
 // the broadcast ID as an object, as shown below, dispatchEvent(window.flexCollectCancelCheckNotification()) 
 // If confirmed, the notification will be removed.
function flexCollectCancelForNotification(params){
         console.log('flexCollectCancelForNotification',params)
         const canceledBroadcastObj={ broadcastId:params.broadcastId  }
         if( window.confirm('Would you like to cancel the notification?')){
            dispatchEvent(window.flexCollectCancelCheckNotification(canceledBroadcastObj))
        }
    }
  
  window.addEventListener('DOMContentLoaded',()=>{   
     window.SauceWebLib.setInit({partnerId:'uiux' , accessToken:'JWT'})
     window.SauceWebLib.loadCalendar({elementId:'sauce_curation_1'})
     window.SauceWebLib.loadSchedule({scheduleType:'feed',elementId:'sauce_curation_2'})
   })
</script>
</body>
</html>