기본 사용법

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

함수 별 페이로드의 정의는 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 memberToken = '라이브 플레이어 진입 시 전달되는 JWT 토큰을 여기에 입력해주세요.';
            // window.SauceShowroomLib.setMemberToken(memberToken);
          
            // 간편인증 (멤버토큰 생성 및 설정 기능, 소스라이브 플레이어 진입 시, 해당 정보로 생성한 토큰 정보가 유효한 경우 로그인됩니다.)
            // const userInfo = {
            //     age: '10', // 나이, 10대: '10', 20대: '20', 30대: '30', ...
            //     gender: 'e', // 성별, 남성: 'm', 여성: 'w', 기타: 'e'
            //     memberId: '특정ID', // 유저 식별 ID
            //     nickname: '닉네임' // 닉네임
            // };
            // window.SauceShowroomLib.setMemberObject(userInfo);

            // 전체 페이지 보여주기
            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>

멤버 토큰 설정

호출하는 경우, 라이브 플레이어로 진입 시, 설정한 JWT 토큰이 전달되고, 토큰이 유효한 경우 로그인됩니다.
라이브 관련 로그인 기능을 사용하고 싶으신 경우, 멤버 토큰 설정이나 간편 인증을 사용해 주세요.

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

간편 인증

호출하는 경우 설정한 유저 정보로 JWT 토큰을 생성하고, 라이브 플레이어로 진입 시, 생성된 JWT 토큰이 전달되고, 토큰이 유효한 경우 로그인됩니다.
라이브 관련 로그인 기능을 사용하고 싶으신 경우, 멤버 토큰 설정이나 간편 인증을 사용해 주세요.

<script> 
    const userInfo = {
        age: '나이', // 나이, 10대: '10', 20대: '20', 30대: '30', ...
        gender: '성별', // 성별, 남자: 'm', 여자: 'w', 기타: 'e'
        memberId: '식별ID', // 유저 식별 ID
        nickname: '닉네임' // 닉네임
    };
    window.SauceShowroomLib.setMemberObject(userInfo);
</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>