Introduction

Using the Basic Collection Usage, you can easily implement the collection view shown in the image below.

Standard Collection View

The following is the basic code for implementing the standard collection view:

<script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
<script>
  // The partnerId must match the partner ID registered when signing up for Saucelive. (Required)
  const partnerId = "";
  window.SauceWebLib.setInit({ partnerId: '' });
  window.SauceWebLib.load() 
</script>

Customizing Display Sections

You can enable or disable specific UI components by referring to the following code examples:

1. Header Area – Logo & Search
   To control the visibility of the logo and search bar, refer to the example below.
   HTML

   <script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
   <script>
     //  The partnerId must match the partner ID registered when signing up for Saucelive. (Required)
     const partnerId = "";
     // The default value for the logo and search area is true.
     window.SauceWebLib.setInit({ partnerId: '' ,searchBar:false  });
     window.SauceWebLib.load() 
   </script>
   

2. Top Banner Area
   To enable or disable the top banner area, refer to the example below.
   HTML

   <script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
   <script>
     // The partnerId must match the partner ID registered when signing up for Saucelive. (Required)
     const partnerId = "";
     // The default value for the top banner area is true.
     window.SauceWebLib.setInit({ partnerId: '' ,topBanner:false  });
     window.SauceWebLib.load() 
   </script>
   

3. Replay Area (VOD)
   To enable or disable the live replay section, refer to the example below.
   HTML

   <script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
   <script>
     //  The partnerId must match the partner ID registered when signing up for Saucelive. (Required)
     const partnerId = "";
     // The default value for the latest live area is true.
     window.SauceWebLib.setInit({ partnerId: '' ,broadcast:false  });
     window.SauceWebLib.load() 
   </script>
   

4. Calendar Area
   To enable or disable the calendar section, refer to the example below.
   HTML

   <script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
   <script>
     // The partnerId must match the partner ID registered when signing up for Saucelive. (Required)
     const partnerId = "";
     // The default value for the calendar area is false.
     window.SauceWebLib.setInit({ partnerId: '' , broadcastTable:false });
     window.SauceWebLib.load() 
   </script>
   

5. **Live Preview Area
   To enable or disable the live preview area, refer to the example below.
   HTML

   <script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
   <script>
     // The partnerId must match the partner ID registered when signing up for Saucelive. (Required)
     const partnerId = "";
     // The default value for the preview area is true.
     // The default type is image. (scheduleType)
     // For more information about preview types, please refer to the link.
     window.SauceWebLib.setInit({ partnerId: '' ,schedule:false, scheduleType:'feed' });
     window.SauceWebLib.load() 
   </script>
   

6. Curation Category Area
   To enable or disable the curation category section, refer to the example below.
   HTML

   <script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
   <script>
     // The partnerId must match the partner ID registered when signing up for Saucelive. (Required)
     const partnerId = "";
     // The default value for the curation category area is true.
     window.SauceWebLib.setInit({ partnerId: '' ,curation:false });
     window.SauceWebLib.load() 
   </script>
   

7. Curation Detail Area
   To enable or disable the curation detail section, refer to the example below.
   HTML

   <script src="https://collection.sauceflex.com/static/js/SauceWebLib.js"></script>
   <script>
     // The partnerId must match the partner ID registered when signing up for Saucelive. (Required)
     const partnerId = "";
     // The default value for the curation detail area is true.
     window.SauceWebLib.setInit({ partnerId: '' , curationDetail:false });
     window.SauceWebLib.load() 
   </script>