쇼룸은 라이브, VOD, 클립 등의 콘텐츠를 큐레이션 별로 운영하고 한 곳에서 전시할 수 있는 기능을 제공합니다.

이 가이드를 통해 메이크샵으로 구축된 파트너사 홈페이지에 쇼룸을 설치해 연동할 수 있습니다.

📘
쇼룸 설치를 성공적으로 진행하기 위해서는,

소스라이브나 소스클립 파트너 계약을 완료하고 모비두 담당자에게 파트너 계정을 발급 받아야 합니다.

계정 발급 후, 회원 연동과 스크립트 삽입을 통해 플레이어를 설치한 후 사용할 수 있습니다.

쇼룸 설치

PC Web 연동

STEP 1. 메이크샵에 로그인합니다.

STEP 2. 디자인 > 디자인 스킨 관리 > 내 쇼핑몰 스킨 PC에서 디자인 편집을 클릭합니다.

STEP 3. 페이지 추가 를 클릭 후 팝업 화면에서 화면 선택은 개별 페이지 로 선택합니다.

📘
단, 페이지명은 쇼룸의 브라우저 탭 제목 영역에 동일한 이름으로 표시됩니다.
고객사에서 설정을 원하는 페이지명으로 설정합니다.

STEP 4. 추가한 개별페이지의 디자인 편집 영역에 아래의 코드를 붙여 넣은 후, 저장을 클릭합니다.

📘
아래 코드는 간편인증을 하여 전체 페이지를 보여주는 예시 코드입니다.
더 구체적인 설정을 하고 싶으신 경우, 쇼룸 기본 사용법 가이드를 참고해 주세요.

<!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, minimum-scale=1.0, user-scalable=no">
    <script type="text/javascript" charset="UTF-8" src="https://showroom.sauce.im/static/js/SauceShowroomLib.js"></script>
    <title>쇼룸</title>
</head>
<body>
    <div id="sauce-showroom"></div>
    <script>
        /* --------------------------------------------------------
         쇼룸 이벤트 설정
        -------------------------------------------------------- */
        window.sauceShowroom = {
            // 라이브 플레이어 이동 시 이벤트
            sauceShowroomMoveSauceLivePlayer: (jsonStr) => {
                let broadcastInfo;
        
                try {
                    broadcastInfo = JSON.parse(jsonStr);
                } catch (e) {
                    console.warn('해당 부분에서 에러가 발생하는 경우, 모비두 담당자에게 에러 정보와 함께 문의해 주세요.', e);
                    return;
                }  
                try {
                    // 라이브 플레이어가 임베딩된 페이지 이동
                    // 메이크샵 라이브설치에서 만들어진 page 주소의 id를 정확히 기입해주세요.
                    window.location.href= '/shop/page.html?id=1&broadcastId=' + broadcastInfo.broadcastId
                } catch (e) {
                    console.warn('라이브 플레이어 처리 중 에러가 발생했습니다.', e);
                }
            }
        }
    </script>
    <script>
        /* --------------------------------------------------------
         고객 이름 마스킹 함수 (선택 기능)
         필요 시 고객 이름을 가려서 표시할 수 있습니다. 예) 홍길동 → 홍길*
        -------------------------------------------------------- */
        function maskName(name) {
            if (name.length <= 2) return name;
            const firstTwo = name.substring(0, 2);
            const stars = '*'.repeat(name.length - 2);
            return firstTwo + stars;
        }
        /**
         * (선택) 커스텀 마스킹 예시도 포함되어 있으니 필요시 주석 해제하여 사용 가능
         */

        /* --------------------------------------------------------
         페이지 로드 시 실행되는 메인 로직
        -------------------------------------------------------- */
        window.addEventListener('DOMContentLoaded', async () => {
            // 고객 정보 세팅 (메이크샵 치환 코드)
            const memberId = "<!--/user_id/-->";
            const userName = "<!--/user_name/-->";

            // 쇼룸 초기화
            window.SauceShowroomLib.setInit({ partnerUniqueId: '파트너ID를 여기에 입력해주세요.' });
          
            // 테마 설정 (호출하지 않는 경우 기본 테마가 설정되므로, 커스텀 테마를 적용하고 싶으신 경우 설정해주세요.)
            // const themeId = '테마ID를 여기에 입력해주세요.';
            // window.SauceShowroomLib.setThemeUniqueId(themeId);
          
            // 고객 정보 연동하여 간편인증 (로그인시 동작)
            // 닉네임/ID 마스킹 미사용하는 경우
            // if (memberId && userName) window.SauceShowroomLib.setMemberObject({ memberId, nickname: userName });
            // 닉네임/ID 마스킹 사용하는 경우
            if (memberId  && userName) window.SauceShowroomLib.setMemberObject({ memberId, nickname: maskName(userName) });

            // 전체 페이지 보여주기
            window.SauceShowroomLib.load({ elementId: 'sauce-showroom' });
        });
    </script>
</body>
</html>

STEP 5. 페이지 주소 버튼을 클릭하여 현재 만든 페이지에서 직접 확인합니다.

이후, 쇼룸이 정상적으로 노출되면 연동 완료입니다.

모바일 연동

STEP 1. 메이크샵에 로그인합니다.

STEP 2. 디자인 > 디자인 스킨 관리 > 내 쇼핑몰 스킨 모바일에서 디자인 편집을 클릭합니다.

❗️
이지팩 스킨을 사용 시, 코드 삽입이 불가능합니다. 반드시 아래의 모바일 4.0 디자인으로 연동을 진행해주세요.
디자인 스킨 추가 메뉴 또는 디자인 스킨 관리에서 + 스킨 추가 버튼 눌러서 추가할 수 있습니다.

STEP 3. 페이지 추가 를 클릭 후 팝업 화면에서 화면 선택은 개별 페이지 로 선택합니다.

📘
단, 페이지명은 쇼룸의 브라우저 탭 제목 영역에 동일한 이름으로 표시됩니다.
고객사에서 설정을 원하는 페이지명으로 설정합니다.

STEP 4. 추가한 개별페이지의 디자인 편집 영역에 아래의 코드를 붙여 넣은 후, 저장을 클릭합니다.

📘
아래 코드는 간편인증을 하여 전체 페이지를 보여주는 예시 코드입니다.
더 구체적인 설정을 하고 싶으신 경우, 쇼룸 기본 사용법 가이드를 참고해 주세요.

<!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, minimum-scale=1.0, user-scalable=no">
    <script type="text/javascript" charset="UTF-8" src="https://showroom.sauce.im/static/js/SauceShowroomLib.js"></script>
    <title>쇼룸</title>
</head>
<body>
    <div id="sauce-showroom"></div>
    <script>
        /* --------------------------------------------------------
         쇼룸 이벤트 설정
        -------------------------------------------------------- */
        window.sauceShowroom = {
            // 라이브 플레이어 이동 시 이벤트
            sauceShowroomMoveSauceLivePlayer: (jsonStr) => {
                let broadcastInfo;
        
                try {
                    broadcastInfo = JSON.parse(jsonStr);
                } catch (e) {
                    console.warn('해당 부분에서 에러가 발생하는 경우, 모비두 담당자에게 에러 정보와 함께 문의해 주세요.', e);
                    return;
                }  
                try {
                    // 라이브 플레이어가 임베딩된 페이지 이동
                    // 메이크샵 라이브설치에서 만들어진 page 주소의 id를 정확히 기입해주세요.
                    window.location.href= '/shop/page.html?id=1&broadcastId=' + broadcastInfo.broadcastId
                } catch (e) {
                    console.warn('라이브 플레이어 처리 중 에러가 발생했습니다.', e);
                }
            }
        }
    </script>
    <script>
        /* --------------------------------------------------------
         고객 이름 마스킹 함수 (선택 기능)
         필요 시 고객 이름을 가려서 표시할 수 있습니다. 예) 홍길동 → 홍길*
        -------------------------------------------------------- */
        function maskName(name) {
            if (name.length <= 2) return name;
            const firstTwo = name.substring(0, 2);
            const stars = '*'.repeat(name.length - 2);
            return firstTwo + stars;
        }
        /**
         * (선택) 커스텀 마스킹 예시도 포함되어 있으니 필요시 주석 해제하여 사용 가능
         */

        /* --------------------------------------------------------
         페이지 로드 시 실행되는 메인 로직
        -------------------------------------------------------- */
        window.addEventListener('DOMContentLoaded', async () => {
            // 고객 정보 세팅 (메이크샵 치환 코드)
            const memberId = "<!--/user_id/-->";
            const userName = "<!--/user_name/-->";

            // 쇼룸 초기화
            window.SauceShowroomLib.setInit({ partnerUniqueId: '파트너ID를 여기에 입력해주세요.' });
          
            // 테마 설정 (호출하지 않는 경우 기본 테마가 설정되므로, 커스텀 테마를 적용하고 싶으신 경우 설정해주세요.)
            // const themeId = '테마ID를 여기에 입력해주세요.';
            // window.SauceShowroomLib.setThemeUniqueId(themeId);
          
            // 고객 정보 연동하여 간편인증 (로그인시 동작)
            // 닉네임/ID 마스킹 미사용하는 경우
            // if (memberId && userName) window.SauceShowroomLib.setMemberObject({ memberId, nickname: userName });
            // 닉네임/ID 마스킹 사용하는 경우
            if (memberId  && userName) window.SauceShowroomLib.setMemberObject({ memberId, nickname: maskName(userName) });

            // 전체 페이지 보여주기
            window.SauceShowroomLib.load({ elementId: 'sauce-showroom' });
        });
    </script>
</body>
</html>

STEP 5. 페이지 주소 버튼을 클릭하여 현재 만든 페이지에서 직접 확인합니다.

이후, 쇼룸이 정상적으로 노출되면 연동 완료입니다.

더 많은 정보 보기

➕
아래 타이틀을 클릭하고 더 많은 🔗연동 정보🔗를 확인해보세요.

플레이어와 회원 연동

상품 연동