Guides
Start typing to search…

Collect page

1. Introduction

It is a service that shows the video and schedule of the live on the web of the company mall, and is provided in the form of a javascript library.

2. How to apply

STEP 1. Apply Java Script and Style to load from the page as follows.

<script src="https://{env}collection.sauceflex.com/static/js/SauceWebLib.js"></script>

Two environments are provided.

STEP 2. Add the <div> tag to the location you want to apply as id. The id does not have to be the same as in the example.

<div id="sauce_collect"></div>

STEP 3. Initialize the SauceLive collection library to render the collection page in the <div> tag you added above.

var sauce = SauceWebLib({
    // Enter the selector of the div tag added in B.
    id: 'sauce_collect',   
    //Please refer to the Token Generation item in the Server Interworking Guide section.
    accessToken: '',
    //Please enter the partnerId that you received through the AM in charge.
    partnerId: 'service1234',      
    //You can set whether the latest live area is exposed.
    /* type boolean (defaultValue:true)*/
    broadcast: true,   
    //You can set whether the Live Preview area is exposed.
    /* type boolean (defaultValue:true)*/
    schedule: true,    
    //You can set the live preview format to "Image Type", "Feed Type", and "List Type" to suit your partner's live broadcasting style
    /* type image | feed | list (defaultValue image) */
    scheduleType: "feed",      
    //You can set whether or not the curation category area is exposed.
    /* type boolean (defaultValue:true)*/
    curation: true,            
    //You can set whether or not the curation area is exposed.
    /* type boolean (defaultValue:true)*/
    curationDetail: true,  
    //Whether video thumbnails are automatically played
    /* type boolen (defaultValue:false)*/
    autoPlay:false,
    // Search bar exposure
    /* type boolen (defaultValue:true)*/
    searchBar:true,  
    // Bridge enabled
    /* type boolean (defaultVlaue:false) */    
    bridge:false,
    // Set up a new window for your broadcast card list
    // The default is to move the current window, and you can set new window movement according to webview, pc, and mobile values.
    /* type string (defaultVlaue:'') */        
    broadcastOpenLink:"webview,pc,mobile",
});

STEP 4. Check the page for application.

⚠️

When linking ⚠ ️ for the first time, the schedule or broadcast is not registered, so a blank screen is displayed.Please register your live broadcast or schedule and test it.

3. How to use the interface bridge

Please note only when using.

Library Settings

var sauce = SauceWebLib({
...
bridge:true,
});

If you use Iframe

  • Scripts to receive events

    • window.addEventListener(
  "message",
  function(e) {
   // use function
    console.log(event.data);
  }, }, false
);

  • At the time of entering the collection

    • // event.data
{
    key: 'flexCollectEnter',
    params: //no parameter
}

  • When you click on the broadcast

  • // event.data
{
    key: 'flexCollectMoveBroadcast',
    params: {
          broadcastUrl: string
   }
}

  • When clicking on a product

    • // event.data
{
    key: 'flexCollectMoveProduct',
    params: {
          productId: string, 
          productUrl: string, 
          broadcastUrl: stinrg 
   }
}

  • Click on the top banner

    • // event.data
{
    key: 'flexCollectMoveTopBanner',
    params: {
          bannerLinkUrl: string, 
   }
}

4. Example

How to check SAMPLE PAGE
You can see the draft when applying the sample page if you put the pseudonym in the form of a query string.

https://stage.collection.sauceflex.com/index.html?partnerId=${partnerId}&scheduleType=list& ... & ...
(PartnerId or later is not required.)

Full Example Code

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>SauceWebLib demo</title>
       <style>
            html, body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
       <div id="sauce_collect"></div>
        <script src="https://{env.}collection.sauceflex.com/static/js/SauceWebLib.js"></script>
        <script>
            SauceWebLib({
                id: 'sauce_collect',
                accessToken: 'session-key' //<= stage면 stage accessToken, prod이면 prod accessToken,  
                partnerId: 'service1234',
            });
        </script>
    </body>
</html>

🚦This document contains trade secrets and industrial technologies subject to protection under the Act on Unfair Competition Prevention and Trade Secrets Protection.

🚦Unauthorized disclosure, distribution, copying, or use of all or part of the information contained herein is strictly prohibited.

Updated 3 months ago