Basic Usage

You can configure the position of the Showroom and the content to be displayed, then embed it into your web page.

For definitions of each function's payload, please refer to Payload Definition.

Full Code Example

Below is a sample code that includes both [Step 1] Setup and [Step 2] Displaying Content.
Please remove the comments as needed before use.

<!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>Showroom Library Example</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', () => {
            // Initial
            window.SauceShowroomLib.setInit({ partnerUniqueId: 'Enter your partner ID here.' });

            // Theme Configuration (If not set, the default theme will be applied. Configure this only if you want to apply a custom theme.)
            // const themeId = 'Enter your theme ID here.';
            // window.SauceShowroomLib.setThemeUniqueId(themeId);

            // Member Token Configuration (If the provided token is valid, the user will be logged in upon entering the Saucelive player.)
            // const memberToken = 'Enter the JWT token to be passed when accessing the live player.';
            // window.SauceShowroomLib.setMemberToken(memberToken);
          
            // Simple Authentication (Token generation and setup feature. Use customer-managed user information to generate and set the member token. If the generated token is valid, the user will be logged in upon entering the Saucelive player.)
            // const userInfo = {
            //     age: 'etc', // age, 10s: '10', 20s: '20', 30s: '30', ... , other: 'etc'
            //     gender: 'e', // gender, male: 'm', Female: 'w', other: 'e'
            //     memberId: 'specific ID', // user Identification ID
            //     nickname: 'nickname' // nickname
            // };
            // window.SauceShowroomLib.setMemberObject(userInfo);

            // Show Full Page
            window.SauceShowroomLib.load({ elementId: 'sauce-showroom' });
          
            // Show Banner Page
            // window.SauceShowroomLib.loadBanner({ 
            //     bannerGroupId: 'Enter the banner group ID here.', 
            //     elementId: 'sauce-showroom-banner-group'
            // });
          
            // Show Recent Live
            // window.SauceShowroomLib.loadRecentLive({ elementId: 'sauce-showroom-recent-live' });
          
            // Show Upcoming Live
            // window.SauceShowroomLib.loadScheduledLive({ elementId: 'sauce-showroom-scheduled-live' });

            // Show Live Calendar
            // window.SauceShowroomLib.loadLiveCalendar({ elementId: 'sauce-showroom-live-calendar' });
          
            // Show VOD Curation
            // window.SauceShowroomLib.loadVodCuration({ 
            //     curationId: 'Enter the VOD curation ID here.', 
            //     elementId: 'sauce-showroom-vod-curation'
            // });
          
            // Show CLIP Curation
            // window.SauceShowroomLib.loadClipCuration({ 
            //     curationId: 'Enter the CLIP curation ID here.', 
            //     elementId: 'sauce-showroom-clip-curation'
            // });
        })
    </script>
</body>
<style>
html, body {
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
}
</style>
</html>

[STEP 1.] Setting

Library Script Setup

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

Initialization

<script> 
    window.SauceShowroomLib.setInit({ partnerUniqueId: 'Enter your partner ID here.' });
</script>

Theme Configuration

If this function is not called, the default theme will be applied. Configure this setting only if you wish to apply a custom theme.

<script> 
    window.SauceShowroomLib.setThemeUniqueId('Enter your theme ID here.');
</script>

Member Token Settings

If this function is called, the specified JWT token will be passed when entering the live player. If the token is valid, the user will be logged in automatically.
To enable login functionality for live content, please use Member Token Configuration or Easy Authentication.

<script> 
    window.SauceShowroomLib.setMemberToken(' Enter the JWT token to be passed when entering the live player.');
</script>

Easy Authentication

When called, a JWT token is generated using the specified user information. This token is then passed when entering the live player. If the token is valid, the user will be logged in automatically.
To enable login functionality for live features, please use either Member Token Setup or Easy Authentication.

<script> 
    const userInfo = {
        age: 'age', // age, 10s: '10', 20s: '20', 30s: '30', ...
        gender: 'gender', // gender, male: 'm', female: 'w', other: 'e'
        memberId: 'Idnetification ID', // user identification ID
        nickname: 'nickname' // nickname
    };
    window.SauceShowroomLib.setMemberObject(userInfo);
</script>

[STEP 2.] Displaying Contents

Show Full Page

<script> 
    window.SauceShowroomLib.load({ elementId: 'Enter the element ID where the showroom should be displayed.' });
</script>

Show Banners

<script> 
    window.SauceShowroomLib.loadBanner({ 
        bannerGroupId: 'Enter the Banner Group ID here.', 
        elementId: 'Enter the element ID where the banners should be displayed.'
    });
</script>

Show Recent Live

<script> 
    window.SauceShowroomLib.loadRecentLive({ elementId: 'Enter the element ID where recent live broadcasts should be displayed.' });
</script>

Show Upcoming Live

<script> 
    window.SauceShowroomLib.loadScheduledLive({ elementId: 'Enter the element ID where upcoming live broadcasts should be displayed.' });
</script>

Show Live Calendar

<script> 
    window.SauceShowroomLib.loadLiveCalendar({ elementId: 'Enter the element ID where the live calendar should be displayed.' });
</script>

Show VOD Curation

<script> 
    window.SauceShowroomLib.loadVodCuration({ 
        curationId: 'Enter the VOD Curation ID here', 
        elementId: 'Enter the element ID where the VOD curation should be displayed.'
    });
</script>

Show CLIP Curation

<script> 
    window.SauceShowroomLib.loadClipCuration({ 
        curationId: 'Enter the CLIP Curation ID here.', 
        elementId: 'Enter the element ID where the CLIP curation should be displayed.'
    });
</script>