GuidesAPI Reference

Shoplive Player 기본설치

Suggest Edits

이 페이지는 Standalone 형식의 Shoplive Player를 사용하는 과정을 안내합니다. 정형화된 Shoplive Plugin의 구성을 사용하지 않는 경우 Shoplive Player를 통해 원하는 형태로 페이지를 구성할 수 있습니다.

  • Shoplive Player의 위치와 레이아웃을 직접 설정하여 웹 페이지에 설치합니다.
  • 컨테이너 레이아웃의 스타일을 직접 지정합니다.
  • campaignKey를 지정하여 특정 캠페인을 실행합니다.
  • isFullScreen 옵션을 사용하여 항상 전체화면으로 실행할 수 있습니다.

[1 단계 초기화 ]

  • 초기화와 함께 사용자 인증 기능을 사용하려면 사용자 초기화: 사용자 인증를 참고하세요.
  • 초기화와 함께 쿠폰 기능 연동을 위해 messageCallback 정의가 필요하면 messageCallback 를 참고하세요

별도 사용자 인증이나 messageCallback 정의 없이 플레이어를 초기화 하기 위해 공통 레이아웃(head 영역 등)에 다음 코드를 설치합니다. 다음 코드는 진행 중인 방송을 미리보기 형태로 보여주는 라이브미니프리뷰 기능을 위해 모든 페이지에 삽입되어야 합니다.

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>cloud.shoplive.init({ accessKey: 'YOUR ACCESS KEY HERE' });</script>


[2단계 Shoplive Player 설치 하기]

setPlayer를 통해 실행할 campaign을 선택하고 Shoplive Player의 위치와 레이아웃을 설정하여 웹 페이지에 설치한 뒤, 컨테이너 레이아웃의 스타일을 지정합니다.

기본 사용법

<style>
  #shoplive-player {
    max-width: 360px;
    height: 612px;
    margin: auto;
  }
</style>
<div id="shoplive-player"></div>
<script defer>
  cloud.shoplive.setPlayer("shoplive-player", { campaignKey: "YOUR_CAMPAIGN_KEY" });
</script>

컨테이너 사이즈와 무관하게 Full screen 모드로 설치하기

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

Shoplive Player 설치 예시

아래는 데스크탑 화면과 모바일 사이즈 모두 지원하는 Shoplive Player 설치 예시입니다.

<html>
  <head>
    <title>Shoplive - Simple player example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover, shrink-to-fit=no" />
    <script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
    <script>
      var messageCallback = {
        DOWNLOAD_COUPON: function(payload) {
          console.log('User clicks coupon. coupon code :  ' + payload.coupon);
        } 
      }
      cloud.shoplive.init({ accessKey: "YOUR_ACCESS_KEY", messageCallback: messageCallback });
    </script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        background-color: #333;
      }
      #shoplive-player {
        max-width: calc(100vh / 16 * 9 - 2px);
        margin: auto;
      }
      @media screen and (max-width: 480px) {
        #shoplive-player {
          max-width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div id="shoplive-player"></div>
    <script defer>
      cloud.shoplive.setPlayer("shoplive-player", { campaignKey: "YOUR_CAMPAIGN_KEY" });
    </script>
  </body>
</html>

다음단계:

Updated 3 months ago