라이브러리 기본 사용법

쇼룸의 위치와 보여줄 콘텐츠를 직접 설정하여 웹 페이지에 설치합니다.

함수 별 페이로드의 정의는 라이브러리 payload 정의를 참고해주세요.

전체 코드 예시

아래의 [1단계] 설정과 [2단계] 콘텐츠 보여주기가 모두 적용된 예시 코드입니다.
필요에 따라 주석을 제거하여 사용해 주세요.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <meta name="theme-color" content="#ff0000">
  <script src="https://showroom.sauce.im/static/js/SauceShowroomLib.js"></script>
  <title>쇼륨 라이브러리 예시</title>
</head>
<body>
    <div id="sauce-showroom"></div>
    <div id="sauce-showroom-banner-group"></div>
    <div id="sauce-showroom-recent-live"></div>
    <div id="sauce-showroom-scheduled-live"></div>
    <div id="sauce-showroom-live-calendar"></div>
    <div id="sauce-showroom-vod-curation"></div>
    <div id="sauce-showroom-clip-curation"></div>
    <script>
        window.addEventListener('load', () => {
            // 초기화
            window.SauceShowroomLib.setInit({ partnerUniqueId: '파트너ID를 여기에 입력해주세요.' });

            // 테마 설정 (호출하지 않는 경우 기본 테마가 설정되므로, 커스텀 테마를 적용하고 싶으신 경우 설정해주세요.)
            // const themeId = '테마ID를 여기에 입력해주세요.';
            // window.SauceShowroomLib.setThemeUniqueId(themeId);

            // 라이브 토큰 설정 (소스라이브 플레이어 진입 시, 해당 토큰 정보가 유효한 경우 로그인됩니다.)
            // const liveToken = '라이브 플레이어 진입 시 전달되는 JWT 토큰을 여기에 입력해주세요.';
            // window.SauceShowroomLib.setLiveToken(liveToken);

            // 전체 페이지 보여주기
            window.SauceShowroomLib.load({ elementId: 'sauce-showroom' });
          
            // 배너 보여주기
            // window.SauceShowroomLib.loadBanner({ 
            //     bannerGroupId: '배너 그룹ID를 여기에 입력해주세요.', 
            //     elementId: 'sauce-showroom-banner-group'
            // });
          
            // 최근 라이브 보여주기
            // window.SauceShowroomLib.loadRecentLive({ elementId: 'sauce-showroom-recent-live' });
          
            // 예정된 라이브 보여주기
            // window.SauceShowroomLib.loadScheduledLive({ elementId: 'sauce-showroom-scheduled-live' });

            // 라이브 캘린더 보여주기 
            // window.SauceShowroomLib.loadLiveCalendar({ elementId: 'sauce-showroom-live-calendar' });
          
            // VOD큐레이션 보여주기
            // window.SauceShowroomLib.loadVodCuration({ 
            //     curationId: 'VOD큐레이션ID를 여기에 입력해주세요.', 
            //     elementId: 'sauce-showroom-vod-curation'
            // });
          
            // CLIP큐레이션 보여주기
            // window.SauceShowroomLib.loadClipCuration({ 
            //     curationId: 'CLIP큐레이션ID를 여기에 입력해주세요.', 
            //     elementId: 'sauce-showroom-clip-curation'
            // });
        })
    </script>
</body>
<style>
html, body {
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
}
</style>
</html>

[1단계] 설정

라이브러리 스크립트 설정

<script type="text/javascript" src="https://showroom.sauce.im/static/js/SauceShowroomLib.js">

초기화

<script> 
    window.SauceShowroomLib.setInit({ partnerUniqueId: '파트너ID를 여기에 입력해주세요.' });
</script>

테마 설정

호출하지 않는 경우 기본 테마가 설정되므로, 커스텀 테마를 적용하고 싶으신 경우 설정해주세요.

<script> 
    window.SauceShowroomLib.setThemeUniqueId('테마ID를 여기에 입력해주세요.');
</script>

LIVE 토큰 설정

호출하는 경우 라이브 플레이어로 진입 시 설정한 JWT 토큰이 전달되고, 토큰이 유효한 경우 로그인됩니다.

<script> 
    window.SauceShowroomLib.setLiveToken('라이브 플레이어 진입 시 전달되는 JWT 토큰을 여기에 입력해주세요.');
</script>

[2단계] 콘텐츠 보여주기

전체 페이지 보여주기

<script> 
    window.SauceShowroomLib.load({ elementId: '쇼룸을 보여줄 위치의 요소ID를 여기에 입력해주세요.' });
</script>

배너 보여주기

<script> 
    window.SauceShowroomLib.loadBanner({ 
        bannerGroupId: '배너 그룹ID를 여기에 입력해주세요.', 
        elementId: '배너를 보여줄 위치의 요소ID를 여기에 입력해주세요.'
    });
</script>

최근 라이브 보여주기

<script> 
    window.SauceShowroomLib.loadRecentLive({ elementId: '최근 라이브를 보여줄 위치의 요소ID를 여기에 입력해주세요.' });
</script>

예정된 라이브 보여주기

<script> 
    window.SauceShowroomLib.loadScheduledLive({ elementId: '예정된 라이브를 보여줄 위치의 요소ID를 여기에 입력해주세요.' });
</script>

라이브 캘린더 보여주기

<script> 
    window.SauceShowroomLib.loadLiveCalendar({ elementId: '라이브 캘린더를 보여줄 위치의 요소ID를 여기에 입력해주세요.' });
</script>

VOD큐레이션 보여주기

<script> 
    window.SauceShowroomLib.loadVodCuration({ 
        curationId: 'VOD큐레이션ID를 여기에 입력해주세요.', 
        elementId: 'VOD큐레이션을 보여줄 위치의 요소ID를 여기에 입력해주세요.'
    });
</script>

CLIP큐레이션 보여주기

<script> 
    window.SauceShowroomLib.loadClipCuration({ 
        curationId: 'CLIP큐레이션ID를 여기에 입력해주세요.', 
        elementId: 'CLIP큐레이션을 보여줄 위치의 요소ID를 여기에 입력해주세요.'
    });
</script>