WEB 개발 가이드

Overview 소스클립 플레이어로 할 수 있는 것

스크립트 한 줄로 자사몰 페이지에 숏폼 클립을 붙입니다.
재생·댓글·상품·공유는 플레이어 안에 들어 있어, 자사몰은 실행과 이벤트 처리만 맡습니다.

소스클립 플레이어 실행 화면 — 세로 영상 위에 상품·댓글·공유가 표시된다

숏폼 클립 재생 — 위아래 스와이프로 클립이 이어집니다
댓글 — 회원이 댓글·답글·좋아요를 남깁니다. 소스 JWT 토큰이 필요합니다
상품 연결 — 클립에 붙은 상품을 눌러 자사몰 상품 페이지로 보냅니다
공유 — 클립 주소를 시청자가 외부로 공유합니다
채널 이동 — 클립에 등록한 채널 주소로 보냅니다
플로팅 재생 — 다른 페이지로 이동해도 작은 창으로 재생이 이어집니다
링크 버튼 — 어드민에서 설정한 버튼으로 원하는 주소로 보냅니다

Step 0 플레이어 첫 실행

스크립트를 삽입하고 파트너 ID와 클립 ID로 초기화한 뒤 load 를 호출합니다.

html

<div id="sauce_clip_player"></div>

<script src="https://player.sauceclip.com/static/js/SauceClipPlayerLib.js"></script>
<script>
  window.SauceClipPlayerLib.setInit({
    partnerUniqueId: '파트너 ID',
    clipId: '클립 ID'
  })
  window.SauceClipPlayerLib.load()
</script>

📌 마운트할 <div> 가 스크립트보다 위에 있어야 합니다. 스크립트를 <head> 에 두는 구성이면 DOMContentLoaded 안에서 호출합니다.

Step 1 연동 방식

두 방식은 플레이어를 어디에 두는지가 다릅니다. 브릿지 이벤트는 두 방식 모두에서 쓸 수 있습니다.

방식	플레이어 위치	쓰는 경우
라이브러리	자사몰 페이지 안의 `<div>`	페이지 레이아웃 안에 플레이어를 넣거나 플로팅으로 띄울 때
URL 연동	소스클립 도메인의 전용 페이지	배너·목록에서 플레이어 페이지로 넘길 때 앱 웹뷰로 열 때

📘 앱에서 여는 경우 URL 연동 방식으로 웹뷰에 띄우고 브릿지 이벤트를 구현합니다. 이동과 관련된 동작은 웹뷰 안에서 브릿지 이벤트 없이 처리되지 않습니다.

Step 2 시작 전 준비

준비물	어디서	쓰이는 곳
파트너 ID	모비두 담당자에게 전달받은 값 계정 정보 가져오기 API 로도 확인	`setInit` · `partnerUniqueId` 쿼리
클립 ID	어드민 클립 목록 클립 목록 조회 API 로도 확인	`setInit` · `clipId` 쿼리
컨피그 설정	모비두 담당자에게 요청	닫기 동작·댓글 등 플레이어 기본 동작

Step 3 가이드

📦

라이브러리 연동

스크립트 삽입 · 초기화 · 플로팅 플레이어 · 클립 링크 유지

🌐

URL 연동

플레이어 주소 · 파라미터 · 앱 웹뷰

🔀

브릿지 이벤트 연동

상품 클릭 · 공유 · 닫기 · 채널 이동

🛠

고급·문제해결

에러 가이드 · 콘솔 경고 메시지