Shoplive 플레이어 설치하기

설치 준비 - 기본 설정

Shoplive Plugin 설치하기(일반 웹페이지)의 [1단계]를 참고하여, 기본설정을 마칩니다.

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>

UI 표시 여부 설정

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

Simple Player full example

아래는 데스크탑 화면과 모바일 사이즈 모두 지원하는 가장 심플한 플레이어 설치의 예시입니다.

<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>