이 가이드에서는 Shoplive Player의 독립형 형식 사용에 대한 지침을 제공합니다. 샵라이브 플러그인의 구조화된 구성을 사용하지 않는 경우 샵라이브 플레이어를 통해 원하는 형태로 페이지를 구성할 수 있습니다.
플레이어의 위치와 레이아웃을 설정하여 웹 페이지에 샵라이브 플레이어를 설치합니다.
컨테이너 레이아웃의 스타일을 직접 지정합니다.
campaignKey를 지정하여 특정 캠페인을 실행합니다.
isFullScreen 옵션을 사용하여 항상 전체 화면으로 실행할 수 있습니다.
1단계: 초기화
사용자 인증 또는 messageCallback 정의없이 플레이어를 초기화하려면 공통 레이아웃 (예 : 헤드 영역)에 다음 코드를 설치하십시오. 이 코드는 라이브 방송을 미리보기 형식으로 표시하는 라이브미니프리뷰 기능을 위해 모든 페이지에 삽입해야 합니다.
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>cloud.shoplive.init({ accessKey: 'YOUR ACCESS KEY HERE' });</script>
2단계: 샵라이브 플레어어 설치
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>
전체 화면 모드 예제
<div id="shoplive-player"></div>
<script defer>
var config = { campaignKey: "YOUR_CAMPAIGN_KEY", isFullScreen: true }
cloud.shoplive.setPlayer("shoplive-player", config);
</script>
전체 예제
다음은 데스크톱과 모바일 크기를 모두 지원하는 샵라이브 플레이어를 설치하는 방법의 예입니다.
<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>
.png){kind=logo}
