시작하기 전에

Shoplive Web 개발자 가이드는 Shoplive의 주요 기능을 Web 환경에서 구현하는 방법을 안내합니다.

Shoplive Player는 아래 세 가지 방식 중 하나로 구성할 수 있습니다.

• Shoplive Plugin을 통한 템플릿형 구성

• Shoplive Player만 단독으로 사용(setPlayer)하는 단독형 구성

• Shoplive 제공 페이지(shoplive.show)에서 재생

또한 카페24, 고도몰 등 호스팅 플랫폼을 사용하는 경우를 위해 간편한 연동 방식을 별도로 지원합니다.

• 쇼핑몰 플랫폼 간편 연동

Use Case

Shoplive Plugin 또는 Shoplive Player를 사용할 때는, Shoplive 웹 클라이언트를 삽입할 영역의 id 지정과 몇 가지 옵션 설정을 통해 연동을 마무리합니다.

• Shoplive Plugin 은 단순 플레이어가 아니라, 방송 제목·상품 목록, 다른 방송 목록 등 다양한 정보를 포함한 템플릿형 구성 요소로 제공됩니다. (div영역 크기에 따라 반응형으로 자동 레이아웃 조정)

• Shoplive Player(setPlayer)를 사용하여 플레이어를 원하는 div 에 표시되도록 사용 할 수 있습니다.

• 별도의 페이지 구성이 어려운 경우, Shoplive에서 제공하는 기본 방송 페이지(Shoplive.show)를 그대로 활용할 수 있습니다.

shoplive-overall-area 영역에 Shoplive Plugin을 사용하는 코드

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

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

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