Guides

모아보기 페이지 설치하기 v1.0.0

Suggest Edits

1. 소개

자사몰 웹에 라이브를 진행했던 영상 및 편성표를 보여주는 서비스로, javascript library 형태로 제공됩니다.

2. 적용 방법

STEP 1. 자바 스크립트와 스타일을 페이지에서 불러올 수 있도록 다음과 같이 적용합니다.

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

다음 두 가지 환경이 제공됩니다.

STEP 2. 적용하려는 위치에
테그를 id와 같이 추가합니다. id 가 꼭 예제와 같을 필요는 없습니다.

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

STEP 3. 위에서 추가한
테그에 모아보기 페이지가 렌더링 되도록 소스플렉스(소스라이브) 모아보기 라이브러리를 초기화 합니다.

var sauce = SauceWebLib({
    // B에서 추가한 div 테그의 selector 를 입력합니다.
    id: 'sauce_collect',   
    // 서버 연동 가이드 부분에 있는 토큰생성 항목을 참고해주세요.    
    accessToken: '',
    // 담당 AM을 통해 전달 받으신 partnerId 를 입력해주세요.      
    partnerId: 'service1234',      
    //최신 라이브 영역의 노출여부를 설정할 수 있습니다.
    /* type boolean (defaultValue:true)*/
    broadcast: true,   
    //라이브 미리보기 영역의 노출여부를 설정할 수 있습니다.
    /* type boolean (defaultValue:true)*/
    schedule: true,    
    //파트너사 라이브 방송 스타일에 맞게 라이브 미리보기 형식을 "이미지형" "피드형" "리스트형"으로 설정할 수 있습니다.
    /* type image | feed | list (defaultValue image) */
    scheduleType: "feed",      
    //큐레이션 카테고리 영역의 노출여부를 설정할 수 있습니다.
    /* type boolean (defaultValue:true)*/
    curation: true,            
    //큐레이션 영역의 노출 여부를 설정할 수 있습니다.
    /* type boolean (defaultValue:true)*/
    curationDetail: true,  
    //비디오 썸네일 자동재생 여부
    /* type boolen (defaultValue:false)*/
    autoPlay:false,
    // 검색바 노출여부
    /* type boolen (defaultValue:true)*/
    searchBar:true,  
    // 방송카드 리스트 새창이동 설정
    // 기본은 현재창 이동이며, 새창이동을 webview,pc,mobile값에 따라 설정할 수 있습니다.
    /* type string (defaultVlaue:'') */        
    broadcastOpenLink:"webview,pc,mobile",
});

STEP 4. 페이지에서 적용된 내용을 확인합니다.

⚠️

최초 연동 시에는 편성표나 방송이 등록되어 있지 않기 때문에, 빈 화면이 출력 됩니다.
라이브 방송이나 편성표 등록을 하고 테스트 진행해 보세요.


SAMPLE PAGE 확인방법
위속성을 query 스트링 형태로 넣어주면 sample페이지 적용시 시안을 볼 수 있습니다.
 
https://stage.collection.sauceflex.com/index.html?partnerId=${partnerId}&scheduleType=list& ... & ...
(partnerId 이후는 필수값이 아닙니다.)

전체 예제 코드

<!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>

🚦본 문서는 부정 경쟁 방지 및 영업 비밀 보호에 관한 법령에 따라 보호의 대상이 되는 영업 비밀, 산업 기술을 포함합니다.

🚦본 문서에 포함된 정보의 전부 또는 일부를 무단으로 제 3자에게 공개, 배포, 복사 또는 사용하는 것은 엄격히 금지됩니다.

Updated 9 months ago