Guides

플레이어와 회원 연동

이 가이드에서는 메이크샵으로 구축된 파트너사 홈페이지에 소스라이브 플레이어와 회원 연동을 설정하는 과정에 대해 설명합니다.

이미 메이크샵을 이용 중이라면, 간단한 코드 삽입으로 회원 연동과 플레이어 설치 후 라이브를 진행할 수 있습니다.

📘

연동을 성공적으로 진행하기 위해서는,

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


소스라이브 플레이어 설치와 회원 연동

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" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
    <title>소스라이브</title>
</head>
<body>
    <div id="player"></div>
    <script>
        /* --------------------------------------------------------
         ✅ STEP 1: 방송 ID 자동 조회 함수
         partnerId만 입력하면 최신 방송 ID를 자동으로 가져옵니다.
        -------------------------------------------------------- */
        async function getBroadcastId() {
            const partnerId = "partner_id"; // 필수 입력값으로, 모비두에서 발급받은 파트너 ID를 partner_id 대신 입력하세요.

            if (!partnerId) {
                console.warn('파트너 ID가 설정되지 않았습니다. 방송 ID를 자동으로 확인하기 위해 파트너 ID를 입력해주세요.');
                return null;
            }

            try {
                const broadcastResponse = await fetch(`https://api.sauceflex.com/V1/front/broadcast?partnerId=${partnerId}`);
                const broadcastData = await broadcastResponse.json();

                if (broadcastData?.response?.items?.length > 0) {
                    const broadcast = broadcastData.response.items[0];
                    return broadcast.broadcastId;
                } else {
                    console.warn('방송 데이터를 찾을 수 없습니다.');
                    return null;
                }
            } catch (error) {
                console.error('방송 ID 조회 중 오류가 발생했습니다:', error);
                return null;
            }
        }

        /* --------------------------------------------------------
         ✅ STEP 2: 고객 이름 마스킹 (선택 기능)
         필요 시 고객 이름을 가려서 표시할 수 있습니다. 예) 홍길동 → 홍길*
        -------------------------------------------------------- */
        function maskName(name) {
            if (name.length <= 2) return name;
            const firstTwo = name.substring(0, 2);
            const stars = '*'.repeat(name.length - 2);
            return firstTwo + stars;
        }

        /**
         * (선택) 커스텀 마스킹 예시도 포함되어 있으니 필요시 주석 해제하여 사용 가능
         */

        /* --------------------------------------------------------
         ✅ STEP 3: (선택) 각 기능별 커스터마이징 함수 등록
         배너, 상품, 공유, 리워드 등 클릭 시 기본 동작을 바꾸고 싶을 때 사용
         주석을 해제하고 원하는 방식으로 수정해서 사용하세요.
         자세한 설명은 아래 문서 참고:
         - 브릿지 payload 정보: https://docs.sauce.im/docs/saucelive-payload
        -------------------------------------------------------- */
     // let config = {
         // sauceflexMoveBanner: () => {},
         // sauceflexMoveProduct: () => {},
         // sauceflexOnShare: () => {},
         // sauceflexMoveReward: () => {},
         // sauceflexMoveExit: () => {},
         // sauceflexMoveCoupon: () => {},
         // sauceflexMoveLogin: () => {},
     // };

        /* --------------------------------------------------------
         ✅ STEP 4: 페이지 로드 시 실행되는 메인 로직
        -------------------------------------------------------- */
        window.addEventListener('DOMContentLoaded', async () => {
            const url = new URL(location.href);

            // 4-1. 방송 ID 설정
            const defaultBroadcastId = await getBroadcastId();
            const broadcastId = url.searchParams.get("broadcastId") ?? defaultBroadcastId;

            // 4-2. 고객 정보 세팅 (메이크샵 치환 코드)
            const memberId = "<!--/user_id/-->";
            const userName = "<!--/user_name/-->";

            if (!broadcastId) {
                console.warn('broadcastId를 찾을 수 없습니다. URL 파라미터로 broadcastId를 전달하거나, partnerId를 설정해주세요.');
                return;
            }

            // 4-3. 플레이어 초기화
            window.SauceLiveLib.setInit({ broadcastId, id: 'player', platform: 'MAKESHOP' });
             <!--/if_login/-->
            // 4-4. 고객 정보 연동 (로그인시 동작)
            if (memberId) window.SauceLiveLib.setMemberObject({ nickName: userName, memberId });
            // 4-5. (선택) 닉네임/ID 마스킹 사용 시 아래 주석 해제
            // if (memberId) window.SauceLiveLib.setMemberObject({ nickName: maskName(userName), memberId });
            // if (memberId) window.SauceLiveLib.setMemberObject({ nickName: maskName(memberId), memberId });

             <!--/else/-->
            // 4-6. 고객 정보가 없을 경우 초기화 처리 (미로그인시 동작)
            if (!memberId) window.SauceLiveLib.setMemberToken('');
             <!--/end_if/-->


            // 4-7. (선택) 개별 기능 커스터마이징 활성화
            // window.SauceLiveLib.setPlatformBridge(config);

            // 4-8. (선택) 플로팅 기능 제거 예시
            /*
            let config = {
                sauceflexMoveBanner: (payload) => {
                    window.location.href = payload.linkUrl;
                },
                sauceflexMoveProduct: (payload) => {
                    window.location.href = payload.linkUrl;
                }
            };
            window.SauceLiveLib.setPlatformBridge(config);
            */

            // 4-9. 플레이어 로딩 시작
            window.SauceLiveLib.load();
        });

    </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" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
    <title>소스라이브</title>
</head>
<body>
    <div id="player"></div>
    <script>
        /* --------------------------------------------------------
         ✅ STEP 1: 방송 ID 자동 조회 함수
         partnerId만 입력하면 최신 방송 ID를 자동으로 가져옵니다.
        -------------------------------------------------------- */
        async function getBroadcastId() {
            const partnerId = "partner_id"; // 필수 입력값으로, 모비두에서 발급받은 파트너 ID를 partner_id 대신 입력하세요.

            if (!partnerId) {
                console.warn('파트너 ID가 설정되지 않았습니다. 방송 ID를 자동으로 확인하기 위해 파트너 ID를 입력해주세요.');
                return null;
            }

            try {
                const broadcastResponse = await fetch(`https://api.sauceflex.com/V1/front/broadcast?partnerId=${partnerId}`);
                const broadcastData = await broadcastResponse.json();

                if (broadcastData?.response?.items?.length > 0) {
                    const broadcast = broadcastData.response.items[0];
                    return broadcast.broadcastId;
                } else {
                    console.warn('방송 데이터를 찾을 수 없습니다.');
                    return null;
                }
            } catch (error) {
                console.error('방송 ID 조회 중 오류가 발생했습니다:', error);
                return null;
            }
        }

        /* --------------------------------------------------------
         ✅ STEP 2: 고객 이름 마스킹 (선택 기능)
         필요 시 고객 이름을 가려서 표시할 수 있습니다. 예) 홍길동 → 홍길*
        -------------------------------------------------------- */
        function maskName(name) {
            if (name.length <= 2) return name;
            const firstTwo = name.substring(0, 2);
            const stars = '*'.repeat(name.length - 2);
            return firstTwo + stars;
        }

        /**
         * (선택) 커스텀 마스킹 예시도 포함되어 있으니 필요시 주석 해제하여 사용 가능
         */

        /* --------------------------------------------------------
         ✅ STEP 3: (선택) 각 기능별 커스터마이징 함수 등록
         배너, 상품, 공유, 리워드 등 클릭 시 기본 동작을 바꾸고 싶을 때 사용
         주석을 해제하고 원하는 방식으로 수정해서 사용하세요.
         자세한 설명은 아래 문서 참고:
         - 브릿지 payload 정보: https://docs.sauce.im/docs/saucelive-payload
        -------------------------------------------------------- */
     // let config = {
         // sauceflexMoveBanner: () => {},
         // sauceflexMoveProduct: () => {},
         // sauceflexOnShare: () => {},
         // sauceflexMoveReward: () => {},
         // sauceflexMoveExit: () => {},
         // sauceflexMoveCoupon: () => {},
         // sauceflexMoveLogin: () => {},
     // };

        /* --------------------------------------------------------
         ✅ STEP 4: 페이지 로드 시 실행되는 메인 로직
        -------------------------------------------------------- */
        window.addEventListener('DOMContentLoaded', async () => {
            const url = new URL(location.href);

            // 4-1. 방송 ID 설정
            const defaultBroadcastId = await getBroadcastId();
            const broadcastId = url.searchParams.get("broadcastId") ?? defaultBroadcastId;

            // 4-2. 고객 정보 세팅 (메이크샵 치환 코드)
            const memberId = "<!--/user_id/-->";
            const userName = "<!--/user_name/-->";

            if (!broadcastId) {
                console.warn('broadcastId를 찾을 수 없습니다. URL 파라미터로 broadcastId를 전달하거나, partnerId를 설정해주세요.');
                return;
            }

            // 4-3. 플레이어 초기화
            window.SauceLiveLib.setInit({ broadcastId, id: 'player', platform: 'MAKESHOP' });
             <!--/if_login/-->
            // 4-4. 고객 정보 연동 (로그인시 동작)
            if (memberId) window.SauceLiveLib.setMemberObject({ nickName: userName, memberId });
            // 4-5. (선택) 닉네임/ID 마스킹 사용 시 아래 주석 해제
            // if (memberId) window.SauceLiveLib.setMemberObject({ nickName: maskName(userName), memberId });
            // if (memberId) window.SauceLiveLib.setMemberObject({ nickName: maskName(memberId), memberId });

             <!--/else/-->
            // 4-6. 고객 정보가 없을 경우 초기화 처리 (미로그인시 동작)
            if (!memberId) window.SauceLiveLib.setMemberToken('');
             <!--/end_if/-->


            // 4-7. (선택) 개별 기능 커스터마이징 활성화
            // window.SauceLiveLib.setPlatformBridge(config);

            // 4-8. (선택) 플로팅 기능 제거 예시
            /*
            let config = {
                sauceflexMoveBanner: (payload) => {
                    window.location.href = payload.linkUrl;
                },
                sauceflexMoveProduct: (payload) => {
                    window.location.href = payload.linkUrl;
                }
            };
            window.SauceLiveLib.setPlatformBridge(config);
            */

            // 4-9. 플레이어 로딩 시작
            window.SauceLiveLib.load();
        });

    </script>
</body>
</html>



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

📘

성공적으로 회원 연동과 플레이어 설치를 완료 했다면 라이브 준비하기 에서 라이브를 준비하는 과정을 확인하고 실제 라이브 편성하기를 해볼 수 있습니다.

더 많은 정보 보기

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