위사에 설치하기
WEB 설정하기
WISA 로그인
- WISA 계정에 로그인합니다.
(경로: https://www.wisa.co.kr/)
![](https://files.readme.io/d77b331-_.png)
기본 설정
- Shoplive Plugin 설치를 원하는 쇼핑몰에 접속합니다. 스킨을 편집할 경우 사용 스킨이 아닌 편집 스킨에 적용됩니다. 따라서 적용된 화면 또한 편집 스킨의 미리보기로 확인할 수 있습니다.
(경로: 관리자 접속> 디자인 > 디자인관리 > 스킨 관리)
![](https://files.readme.io/28da205-__.png)
- HTML 편집 카테고리의 상단공통페이지 편집에 접속합니다.
![](https://files.readme.io/c088b24-___.png)
- 가장 상단에 아래 코드를 입력합니다. 아래 코드 마지막 라인에 있는
ACCESS_KEY
부분에 Shoplive에서 제공한 Access key를 입력하고 저장합니다.
<div style="display: none;" ><span id="cloud-shoplive-user-id">{{$회원아이디}}</span><span id="cloud-shoplive-user-name">{{$회원명}}</span></div>
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>cloud.shoplive.init({ accessKey: 'ACCESS_KEY', platform: 'WISA' });</script>
![](https://files.readme.io/7c902ad-__.png)
ACCESS_KEY
는 방송 상세 정보에서 복사합니다.
![](https://files.readme.io/274c215-access_key.png)
이제 Shoplive Plugin 페이지의 기본 설정이 완료되었습니다. 진행 중인 방송이 있다면 프리뷰를 확인할 수 있습니다.
![](https://files.readme.io/8818821-__.png)
프리뷰가 보이지 않을 경우, Shoplive Admin 방송 상세 페이지에서 API·플러그인 을 ON으로 설정합니다.
![](https://files.readme.io/73d0b1e-api_.png)
Shoplive Plugin 페이지 설정
Shoplive Plugin 설치를 원하는 경로에 페이지를 추가할 수 있습니다.
- HTML 편집 카테고리의 추가 페이지 편집에 접속합니다.
![](https://files.readme.io/edc671f-__.png)
- 페이지 명을 입력하고 페이지를 추가합니다.
![](https://files.readme.io/30b9a6f-__.png)
- 추가된 페이지의 내용편집에 접속합니다.
![](https://files.readme.io/e591d6f-___.png)
- 기본 입력 화면인 Editor를 HTML 입력 화면으로 전환합니다.
![](https://files.readme.io/fd03e53-___HTML_.png)
- 아래 코드를 입력하고 확인을 클릭합니다.
<div id="shoplive-overall"></div>
<script defer>cloud.shoplive.setOverall('shoplive-overall');</script>
![](https://files.readme.io/a2d55a0-_____.png)
- 이제 원하는 탭과 Shoplive Plugin 페이지를 연결합니다. 페이지의 파일명을 클릭해 나타나는 페이지의 주소를 복사합니다.
![](https://files.readme.io/8035c0d-____.png)
- 상단공통페이지 편집으로 돌아가 원하는 탭에 복사한 페이지의 주소를 붙여넣고 저장합니다.
![](https://files.readme.io/45f4908-___.png)
이제 모든 설정이 끝났습니다. Shoplive Plugin과 함께 생생한 라이브 스트리밍을 즐겨보세요.
![](https://files.readme.io/6d9c5fb-___.png)
Mobile 설정하기
Mobile에서도 WEB 설정하기와 동일한 방법으로 진행합니다.
기본 설정
- 모바일의 스킨 관리 페이지에 접속합니다.
![](https://files.readme.io/337cef3-___.png)
- HTML 편집 카테고리의 상단공통페이지 편집에 접속합니다.
![](https://files.readme.io/2a8de37-____.png)
- 가장 상단에 아래 코드를 입력합니다. 아래 코드 마지막 라인에 있는
ACCESS_KEY
부분에 Shoplive에서 제공한 Access key를 입력하고 저장합니다.
<div style="display: none;" ><span id="cloud-shoplive-user-id">{{$회원아이디}}</span><span id="cloud-shoplive-user-name">{{$회원명}}</span></div>
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>cloud.shoplive.init({ accessKey: 'ACCESS_KEY', platform: 'WISA' });</script>
![](https://files.readme.io/5b42249-___.png)
이제 모바일 Shoplive Plugin 페이지의 기본 설정이 완료되었습니다. 진행 중인 방송이 있다면 프리뷰를 확인할 수 있습니다.
![](https://files.readme.io/8945811-__.png)
Shoplive Plugin 페이지 설정
Shoplive Plugin 설치를 원하는 경로에 페이지를 추가할 수 있습니다.
- HTML 편집 카테고리의 추가 페이지 편집에 접속해 속성수정을 클릭합니다.
![](https://files.readme.io/405ec04-____.png)
- 모바일페이지 사용 여부를 사용함으로 선택 후 수정을 클릭합니다.
![](https://files.readme.io/7815682-____.png)
- 기본 입력 화면인 PC 추가 페이지를 모바일 추가 페이지로 전환하고, 기본 입력 화면인 Editor를 HTML 입력 화면으로 전환합니다.
![](https://files.readme.io/1719566-____HTML_.png)
- 아래 코드를 입력하고 확인을 클릭합니다.
<div id="shoplive-overall"></div>
<script defer>cloud.shoplive.setOverall('shoplive-overall');</script>
![](https://files.readme.io/1661818-______.png)
- 이제 추가한 탭과 Shoplive Plugin 페이지를 연결합니다. 페이지의 파일명을 클릭해 나타나는 페이지의 주소를 복사합니다.
![](https://files.readme.io/80f072d-_____.png)
- 상단공통페이지 편집으로 돌아가 추가한 탭을 찾고, 복사한 페이지의 주소를 붙여넣습니다.
![](https://files.readme.io/bbbe7fc-_____.png)
이제 모든 설정이 끝났습니다. Shoplive Plugin과 함께 생생한 라이브 스트리밍을 즐겨보세요.
![](https://files.readme.io/efd5ffc-____.png)
Updated 7 months ago