Guides

Bridge Integration

πŸ“˜

What is Library Bridge Configuration?

This feature allows you to override default behaviors with custom actions for specific events.

// Example: In the default behavior, clicking a broadcast card navigates to the broadcast URL.
 function flexCollectMoveBroadcast(params){
         console.log('flexCollectMoveBroadcast',params)
     }
// Once declared, clicking a broadcast card logs the data to the console instead,
// and the default navigation behavior is cancelled.

Example Code

Bridge configuration works the same way as in the basic usage or modular usage of the library.
Once you declare the bridge functions, simply follow the standard library setup as usual.

<html>
  <head>
    <title>sauce live example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover, shrink-to-fit=no" />
    <script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
  </head>
  <body>
  <div id='curation'></div>
  </body>
  <script>
    // Automatically triggered on page load.
    // function flexCollectEnter(){
    //   console.log('flexCollectEnter')
    // }
    //  Triggered when the login button is clicked.
    // function flexCollectLogin(){
    //   console.log('flexCollectLogin')
    // }
    // Triggered when a broadcast card is clicked.
    // function flexCollectMoveBroadcast(params){
    //   console.log('flexCollectMoveBroadcast',params)
    // }
    //   Triggered when a product is clicked.
    // function flexCollectMoveProduct(params){
    //   console.log('flexCollectMoveProduct',params)
    // }
    //  Triggered when the top banner is clicked.
    // function flexCollectMoveTopBanner(params){
    //   console.log('flexCollectMoveTopBanner',params)
    // }
    // Triggered when a user applies for a broadcast notification.
    // function flexCollectApplyForNotification(params){
    //   console.log('flexCollectApplyForNotification',params)
    // }
    // Triggered when a user cancels a broadcast notification.
    // function flexCollectCancelForNotification(params){
    //   console.log('flexCollectCancelForNotification',params)
    // }
    // Triggered when a custom broadcast button is clicked.
    // function flexCollectBroadcastCustomButton(params){
    //   console.log('flexCollectBroadcastCustomButton', params)
    // }
    // Library initialization β€” works the same as in basic or modular setup.
   window.addEventListener('load',()=>{
     window.SauceWebLib.setInit({ partnerId:  'partnerId' });
     window.SauceWebLib.load('curation');
     // or window.SauceWebLib.loadCuration({curationId:'XXXX',elementId:'curation' });
    }) 

  </script>
</html>