Guides

플레이어 플로팅 구현

Suggest Edits

이 가이드에서는 카페24로 구축된 파트너사 홈페이지 내 개별 페이지에 플레이어 플로팅 기능을 설정하는 방법을 안내합니다.

📘

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

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


개별 페이지에 플로팅 구현

STEP 1. 카페24에 대표운영자로 로그인합니다.

STEP 2. 디자인 (PC/모바일) > 디자인 대시보드 > 디자인 보관함 > PC탭에서 플레이어 플로팅을 적용할 디자인을 선택 후 복사합니다. 실제 운영 중인 페이지에 영향을 주지 않도록 복사본에 먼저 적용해봅니다.


STEP 3. 복사된 디자인의 디자인 편집 버튼을 클릭해 스마트 디자인 Easy 화면으로 이동합니다.


STEP 4. 하단의 HTML 수정을 클릭해 스마트 디자인 화면으로 이동합니다.

STEP 5. 아래의 코드를 삽입하는 단계입니다.

STEP 5-1. 왼쪽 하단에서 공통 레이아웃(layout.html)을 클릭해 파일을 선택합니다.

STEP 5-2. 내부 @js(/js/common.js) 하단에 아래의 코드를 추가합니다.

STEP 5-3. 이후 body 아래에 빈 div 를 추가 후 저장합니다.

📘

공통 레이아웃을 사용하지 않는 경우, 상품 상세 페이지에서 사용 중인 레이아웃 페이지에 추가합니다.

...
     <!--@js(/js/common.js)-->
    <script type="text/javascript" defer id="sauce-live-lib" src="https://player.sauceflex.com/static/js/SauceLiveLib.js"></script>
    <script>
        function setSauceCookie(n, v, e) {
            if (v === undefined || v === 'undefined' || v === null) return; 
            document.cookie = `${n}=${v}; expires=${new Date(Date.now() + e * 1000).toUTCString()}; path=/`;
        }

        function getSauceCookie(n) {
            const value = document.cookie.split('; ').find(r => r.startsWith(n + '='))?.split('=')[1] ?? null;
            return value === 'undefined' ? null : value; 
        }

        // 플로팅 확대 버튼 클릭시 플레이어 연동된 페이지로 이동처리 로직입니다.
        function sauceflexFloatingModeFullscreen() {
            const url = new URL(location.href);
            const broadcastId = url.searchParams.get("broadcastId") || getSauceCookie('saucelive_id');
            window.location.href = '/saucelive/saucelive.html?broadcastId=' + broadcastId;
        }

        // 플로팅 닫기 클릭시 링크 이동 및 새로고침되어도 플로팅은 동작하지 않습니다.
        function sauceflexFloatingModeExit() {
            setSauceCookie('saucelive_id', '', -10);
            const sauce_live = document.getElementById('player');
            sauce_live?.remove();
        }

        const init = (broadcastId) => {
            if (!broadcastId || broadcastId === 'undefined') return;
            setSauceCookie('saucelive_id', broadcastId, 3600);
            window.SauceLiveLib.setInit({ broadcastId });

            // 플로팅 버튼 커스터마이징 가능
            // exit, fullscreen, mute 중 원하는 버튼을 선택하여 사용해주세요
            // window.SauceLiveLib.setFloatingType({ type: 'basic' ,buttonList:['exit'] })

            // 플로팅 위치 커스터마이징 가능
            // top left, top right, bottom left, bottom right 중 원하는 위치를 선택하여 사용해주세요
            // 미세 조정 설정시 offsetX, offsetY 를 추가해서 사용해주세요
            // window.SauceLiveLib.setFloatingType({ type: 'basic' ,position:{ position: 'top left', offsetX: 0, offsetY: 0 } })

            // 플로팅 드래그 제한 영역 커스터마이징 가능 restrictionArea 을 추가해서 사용해주세요
            // element: HTMLElement 혹은 elementId: string 을 추가해서 사용해주세요
            // HTMLElement 에 실질적인 사이즈가 지정되어있어야합니다.
            // window.SauceLiveLib.setFloatingType({ type: 'basic' ,restrictionArea:{ element: HTMLElement } })

            // 플로팅 사이즈 커스터마이징 가능 size 을 추가해서 사용해주세요
            // window.SauceLiveLib.setFloatingType({ type: 'basic' ,size:{width:'300px',height:'200px'} })

            window.SauceLiveLib.setFloatingType({ type: 'basic' });
            window.SauceLiveLib.load();
        };

        const loadScript = () => {
            return new Promise((resolve, reject) => {
                const script = document.getElementById('sauce-live-lib');
                script.onload = () => resolve(script);
                script.onerror = () => reject(new Error('Failed to load script'));
            });
        };

        loadScript().then(() => {
            const url = new URL(location.href);
            const broadcastId = url.searchParams.get("broadcastId") || getSauceCookie('saucelive_id');
            init(broadcastId);
        });
    </script>
</head>
<body>
    <div id='sauce_live'></div>
</body>
</html>


STEP 6. 코드를 적용한 디자인을 대표 디자인으로 설정합니다.

STEP 7. 상품 상세 페이지 URL 끝에 라이브ID를 추가해 접속했을 때, 플레이어가 플로팅 형태로 노출되면 설정 완료입니다.


더 많은 정보 보기


➕

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

Updated about 10 hours ago

What’s Next

V1.0