Shoplive Plugin 기본설치
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>
기본노출 예시
Updated 11 months ago