.png){kind=logo}
기본 설치
- 인쇄
기본 설치
- 인쇄
기사 요약
이 요약이 도움이 되었나요?
의견을 보내 주셔서 감사합니다.
이 페이지는 다음과 같은 기능을 제공하는 Shoplive Plugin을 설치하는 과정을 안내합니다.
.png "image(294).png")
Shoplive Plugin이 포함 된 페이지에 예정된 방송, 진행 중인 방송과 지난 방송을 보여줍니다. (캠페인 설정에서 플러그인 공개 옵션이 활성화된 경우)
진행 중인 방송이 있는 경우, Shoplive Plugin이 포함된 웹 페이지를 제외하고 다른 모든 웹 페이지의 오른쪽 아래에 미리 보기로 진행 중인 방송을 보여줍니다.
Plugin 초기화
초기화와 함께 사용자 인증을 해주세요.
초기화와 함께 쿠폰 기능 연동 등을 위한 이벤트 콜백 정의를 위해 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>플레이어와 목록에 표시
Shoplive Plugin Overall이 설치될 새 웹 페이지를 만들거나 기존 웹 페이지를 선택하여 다음 코드를 설치합니다.
<div id="shoplive-overall-area"></div>
<script defer>cloud.shoplive.setOverall('shoplive-overall-area');</script>전체 예시
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-overall-area {
max-width: calc(100vh / 16 * 9 - 2px);
margin: auto;
}
@media screen and (max-width: 480px) {
#shoplive-overall-area {
max-width: 100%;
}
}
</style>
</head>
<body>
<div id="shoplive-overall-area"></div>
<script defer>cloud.shoplive.setOverall('shoplive-overall-area');</script>
</body>
</html>