.png){kind=logo}
시작하기 전에
- 인쇄
시작하기 전에
- 인쇄
기사 요약
이 요약이 도움이 되었나요?
의견을 보내 주셔서 감사합니다.
Shoplive Web 개발자 가이드는 Shoplive의 주요 기능을 Web 환경에서 구현하는 방법을 안내합니다.
Shoplive Player는 아래 세 가지 방식 중 하나로 구성할 수 있습니다.
분류 | PLUGIN | SETPLAYER | SHOPLIVE.SHOW |
|---|---|---|---|
구성 형태 | 템플릿형 | 플레이어 단독형 | URL 제공형 |
설치 방법 | 자바스크립트 코드 임베드 | 자바스크립트 코드 임베드 | URL 이용 |
방송 목록 자동 표시 | 가능 | 미지원 | 미지원 |
방송 미리보기 기능 (방송 배너) | 자동(수동 선택 가능) | 수동 | 미지원 |
화면 위치, 커스텀 | 거의 불가 | 자유롭게 가능 | 미지원 |
사용자 인증 설정 방식 | 임베드 코드 내 JS | 임베드 코드 내 JS | URL의 tk 파라미터 |
이벤트 후킹 | init 코드에서 정의 | init 코드에서 정의 | 불가 (게스트 로그인 유도, 쿠폰 자동 발급 처리 불가) |
연동 필요 값 | Access Key | Access Key, Campaign Key | Access Key, Campaign Key |
대표 활용처 | 브랜드 사이트 라이브 탭 | 이벤트 전용 페이지, 특정 라이브 캠페인 전용 기획전 | 광고 소재 랜딩 |
또한 카페24, 고도몰 등 호스팅 플랫폼을 사용하는 경우를 위해 간편한 연동 방식을 별도로 지원합니다.
Use Case
Shoplive Plugin 또는 Shoplive Player를 사용할 때는, Shoplive 웹 클라이언트를 삽입할 영역의 id 지정과 몇 가지 옵션 설정을 통해 연동을 마무리합니다.
Shoplive Plugin 은 단순 플레이어가 아니라, 방송 제목·상품 목록, 다른 방송 목록 등 다양한 정보를 포함한 템플릿형 구성 요소로 제공됩니다. (
div영역 크기에 따라 반응형으로 자동 레이아웃 조정)Shoplive Player(setPlayer)를 사용하여 플레이어를 원하는
div에 표시되도록 사용 할 수 있습니다.별도의 페이지 구성이 어려운 경우, Shoplive에서 제공하는 기본 방송 페이지(Shoplive.show)를 그대로 활용할 수 있습니다.
shoplive-overall-area 영역에 Shoplive Plugin을 사용하는 코드
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>
cloud.shoplive.initPlugin({ accessKey: 'YOUR ACCESS KEY HERE' });
</script>
<div id="shoplive-overall-area"></div>
<script defer>cloud.shoplive.setOverall('shoplive-overall-area');</script>.png "image(291).png")
Shoplive Player만 player-div 영역에 표시하는 예시
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>
cloud.shoplive.initPlugin({ accessKey: 'YOUR ACCESS KEY HERE' });
</script>
<div id="shoplive-player"></div>
<script defer>
cloud.shoplive.setPlayer("shoplive-player", { campaignKey: "YOUR_CAMPAIGN_KEY" });
</script>.png "image(292).png")