소스클립 플레이어 라이브러리를 통해서 플로팅 기능을 사용할 수 있습니다.

기본 플로팅

처음 로드 시부터 플레이어가 플로팅 형태로 노출됩니다. 아래는 상품 페이지에 라이브러리를 랜딩했을 때의 예시입니다.

아래 코드에서 예시 확인이 가능합니다.

예시 코드

<!doctype html>
<html lang="ko">
  <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    //(스테이지 환경 사용시 stage.player.sauceclip... 로 변경하시면 됩니다.)
    <script  src="https://player.sauceclip.com/static/js/SauceClipPlayerLib.js"></script>
  </head>
  <body>
    
    <div id="root"></div>
  </body>
  <script>
 window.addEventListener('DOMContentLoaded',()=>{
      window.SauceClipPlayerLib.setInit({ partnerUniqueId: '파트너ID', clipId: '클립ID' ,elementId:'root' })  
       window.SauceClipPlayerLib.setFloatingType({ type:'basic' , size :0.3})
      window.SauceClipPlayerLib.load()
    })
  </script>
</html>

상품 클릭 시 플로팅

첫 랜딩 시에는 기본 클립 플레이어로 진입하며, 이후 상품 이동 시 브릿지 함수를 통해 해당 상품 페이지가 메인으로 인식됩니다.
이후 플로팅 상태에서는 기본 기능인 정지/재생 토글 대신, 플로팅 취소 기능을 실행하면 아래와 같이 동작합니다.

현재 브릿지 실행은 payload 기능 정의 링크 문서에서 정리된 브릿지 목록을 함수로 구현하면, 원래의 기능은 취소되고 지정된 함수가 대신 실행됩니다.

아래 코드에서 예시 확인이 가능합니다.

예시 코드

<!doctype html>
<html lang="ko">
  <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
        //(스테이지 환경 사용시 stage.player.sauceclip... 로 변경하시면 됩니다.)
    <script src="https://player.sauceclip.com/static/js/SauceClipPlayerLib.js"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    // 상품 클릭시의 브릿지 함수 (기본 링크 이동 기능이 취소됩니다)
    function sauceclipMoveProduct (params) {
      // 플로팅 상태로 변경하는 함수입니다.
      window.SauceClipPlayerLib.setFloatingType({ type:'basic' })
      // 어드민에서 등록한 상품 링크 페이지를 받을수 있습니다.
      // linkUrl 이 모바일 링크가 아닐 경우 플로팅시의 URL 이 PC 로 뜰 가능성이 있습니다. 
      window.SauceClipPlayerLib.setFloatingProductLinkUrl(params.linkUrl)
    }
    // 플레이어의 정지/재생 상태의 변경시의 브릿지 함수 
   function sauceclipTogglePlay (){
      // 플로팅 상태를 취소합니다.
      window.SauceClipPlayerLib.resetFloatingType()
   }

    window.addEventListener('DOMContentLoaded',()=>{
      window.SauceClipPlayerLib.setInit({ partnerUniqueId: '파트너ID', clipId: '클립ID' ,elementId:'root' })  

      window.SauceClipPlayerLib.load()
    })
  </script>
</html>