Guides

Collect page

Suggest Edits

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
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
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 10 months ago