GuidesAPI Reference

개발자 가이드 안내

Suggest Edits

Shoplive JS SDK 개발자 가이드는 Shoplive Player를 PC/Mobile 웹페이지에 설치할 수 있는 기본적인 방법과 화면 채팅에 표시되는 사용자 이름을 고객사 시스템과 연동하기 위한 인증 방식과 PIP(Picture-in-Picture), Preview 등 부가적인 기능을 구현하는 방식 등을 안내합니다.

Web 환경의 샵라이브 플레이어는 아래와 같은 방식을 통해 구현할 수 있습니다.

카페24, 고도몰 등 호스팅사를 통해 서비스하는 경우 이를 위한 간편 연동을 지원하고 있습니다.


사용예시

Shoplive Plugin이나 Shoplive Player 사용시 Shoplive 웹클라이언트가 삽입될 영역에 id를 지정하고 몇 가지의 옵션과 함께 스크립트를 호출하면 연동이 마무리됩니다.

  • Shoplive Plugin 을 사용시 플레이어 뿐만아니라 div 영역의 크기에 따라 방송의 제목, 관련 상품, 다른방송 목록 등 다양한 내용이 레이아웃을 위한 별도의 개발 없이 템플릿화 되어 제공됩니다.
  • 용도에 따라 순수한 Player영역만 원하는 div 에 표시되도록 Shoplive Player(setPlayer) 기능을 사용 할 수 있습니다. 레이아웃과 플레이어의 스타일 등을 원하는 방식으로 구현할 수 있습니다.
  • Shoplive플레이어가 표시될 웹 페이지가 준비되지 않은 경우, 제공되는 Shoplive.show 페이지를 통해 이미 준비된 형태의 방송 페이지를 사용 가능합니다.

shoplive-overall-area 영역에 Shoplive Plugin을 사용하는 코드와 화면에 적용된 모습

<div id="shoplive-overall-area"></div>
<script defer>cloud.shoplive.setOverall('shoplive-overall-area');</script>


Player만 player-div 영역에 표시하는 예시

<div id="player-div"></div>
<script defer>
  cloud.shoplive.setPlayer("shoplive-player", { campaignKey: "YOUR_CAMPAIGN_KEY" });
</script>

Updated 27 days ago