GuidesAPI Reference
Guides

Shoplive Plugin 기본설치

Suggest Edits

Shoplive Plugin 기본 설치 방법

이 페이지는 다음과 같은 기능을 제공하는 Shoplive Plugin 을 설치하는 과정을 안내합니다.

  • Shoplive Plugin이 포함 된 페이지에 예정된 방송, 진행 중인 방송과 지난 방송을 보여줍니다. (캠페인 설정에서 플러그인 공개 옵션이 활성화된 경우)
  • 진행 중인 방송이 있는 경우, Shoplive Plugin이 포함된 웹 페이지를 제외하고 다른 모든 웹 페이지의 오른쪽 아래에 미리 보기로 진행 중인 방송을 보여줍니다.

[1 단계 초기화 ]

  • 초기화와 함께 사용자 인증을 위해 초기화: 사용자 인증를 참고하세요.
  • 초기화와 함께 쿠폰 기능 연동 등을 위한 이벤트 콜백 정의를 위해 messageCallback 를 참고하세요

아래는 각 사용자 인증없이 초기화 / 간편인증으로 초기화 / JWT토큰을 사용한 인증으로 초기화 하는 예시입니다.

공통 레이아웃(head 영역 등)에 원하는 방식의 초기화 코드를 설치합니다.

📘

공통 레이아웃 영역에서 초기화해야 합니다.

다음 코드는 진행중인 방송을 미리보기 형태로 보여주는 라이브미니프리뷰 기능을 위해 모든 페이지에 삽입되어야 합니다.

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

<!-- OR -->

//간편인증
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>
  cloud.shoplive.init({ accessKey: 'YOUR ACCESS KEY HERE' });
  cloud.shoplive.setUserObject({userId: "USER_ID", userName: "USER_NAME"});
</script>

<!-- OR -->

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


[2단계 플레이어와 목록 표시하기]

Shoplive Plugin Overall이 설치될 새 웹 페이지를 만들거나 기존 웹 페이지를 선택하여 다음 코드를 설치합니다.

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

Full example

1, 2단계를 합친 코드 예시입니다.

<html>
  <head>
    <title>Shoplive - Simple Shoplive Plugin 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>cloud.shoplive.init({ accessKey: 'YOUR ACCESS KEY HERE' });</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-overall-area"></div>
		<script defer>cloud.shoplive.setOverall('shoplive-overall-area');</script>
  </body>
</html>

기본노출 예시

2000

Updated 10 months ago