웹 페이지에 설치하기

[1단계] 공통 레이아웃(head 영역 등)에 다음 코드를 설치합니다.

3가지 코드 중 사용하려는 인증 방식에 따라 1개의 코드를 사용하세요. 캠페인 설정에서 ACCESS KEY를 찾을 수 있습니다.

1. 게스트(비로그인) 사용자로 보기

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


2. 일반 인증 사용하기 (일반 텍스트 형식의 USER_ID 및 USER_NAME)

<script type="text/javascript" src="https://static.shoplive.cloud/shoplive-shortform.js"></script>
<script>cloud.shoplive.initShortform({ accessKey: 'YOUR ACCESS KEY HERE', userObject: {userId: "USER_ID", userName: "USER_NAME"} });</script>

<!-- OR -->

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


3. JWT 토큰 사용하기

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

<!-- OR -->

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



[2단계] Shoplive Short-form이 설치될 웹페이지에 다음 코드를 설치합니다.

<div id="shoplive-shorts"></div>
<script defer >
  cloud.shoplive.setShortformCollection("shoplive-shortform", {template: "GRID2"} );
</script>



👍

Shoplive Short-form 목록의 레이아웃 설정은 숏폼 목록 레이아웃 변경하기 가이드를 참고해주세요.

🚧

Shoplive의 인터페이스를 임의로 수정하지 마세요.

Shoplive에서 제공하는 인터페이스를 임의로 수정할 경우 예기치 않은 오류가 발생할 수 있습니다.