카페24 몰에 소스라이브 플레이어 웹 SDK와 쇼룸을 붙이면 라이브 방송을 몰 안에서 보여 줄 수 있습니다.

• 공통 레이아웃에 코드 두 조각을 붙이면, 라이브 중인 방송이 몰의 모든 페이지에 작은 창(플로팅)으로 뜹니다. 상품을 눌러 다른 페이지로 옮겨도 방송이 끊기지 않습니다.
• 몰에 로그인한 고객은 회원으로 채팅에 참여합니다.
• 쇼룸 페이지 하나를 메뉴에 연결하면 진행 중인 방송 · 예정 방송 · 다시보기를 한 곳에서 보여 줍니다. 고객이 방송을 누르면 페이지를 옮기지 않고 그 자리에서 열립니다.
• 방송 링크(쇼룸 페이지 주소 뒤에 ?ssBid=방송 ID)를 알림톡 · 문자 · SNS에 넣으면, 고객이 링크 하나로 그 방송까지 바로 들어옵니다.

1. 플레이어 설치

STEP 1. 카페24에 대표운영자로 로그인합니다.

STEP 2. 디자인 (PC/모바일) > 디자인 보관함 > PC 탭에서 지금 쓰는 대표 디자인을 선택하고 복사합니다. 운영 중인 몰 화면에 영향을 주지 않고, 문제가 생기면 이 복사본으로 되돌릴 수 있습니다.

STEP 3. 복사한 디자인의 디자인 편집을 클릭합니다. 스마트디자인 Easy 화면이 열리면 왼쪽 아래 HTML 수정을 클릭해 스마트디자인 편집창으로 이동합니다.

STEP 4. 편집창 왼쪽 전체화면보기에서 레이아웃 > 기본 레이아웃 > 공통 레이아웃(layout.html)을 엽니다.

STEP 5. Ctrl+F(Mac은 ⌘+F)로 common.js를 찾습니다. PC 디자인에서는 <!--@js(/js/common.js)--> 줄이, 모바일 디자인에서는 <!--@js(/layout/basic/js/common.js)--> 줄이 나옵니다. 그 줄 바로 아래에 아래 코드를 붙여 넣습니다. '파트너 ID'는 따옴표는 그대로 두고 발급받은 파트너 ID로 바꿉니다.

<!-- 소스라이브 플레이어 시작 -->
<script>(function(w,n){var s=w[n]=w[n]||{};s.Player=s.Player||function(){(s.Player.q=s.Player.q||[]).push(arguments)}})(window,'SauceLive');</script>
<script async src="https://player.sauceflex.com/static/web-sdk/saucelive-player.min.js"></script>
<script>SauceLive.Player('init', { partnerId: '파트너 ID', platform: 'cafe24' });</script>
<!-- 소스라이브 플레이어 끝 -->

STEP 6. 같은 파일에서 <body로 시작하는 줄을 찾아, 그 줄 바로 아래에 아래 코드를 고치지 않고 붙여 넣은 뒤 저장을 클릭합니다. 로그인한 고객을 회원으로 인식하는 코드이며, 몰 화면에는 보이지 않습니다.

<!-- 소스라이브 플레이어 로그인 시작 -->
<div module="Layout_stateLogon" data-slp="member" style="display:none">
  <span data-slp-field="id">{$id}</span>
  <span data-slp-field="nickname">{$nick}</span>
  <span data-slp-field="name">{$name}</span>
  <span data-slp-field="grade">{$group_name}</span>
</div>
<!-- 소스라이브 플레이어 로그인 끝 -->

2. 쇼룸 페이지 만들기

STEP 1. 스마트디자인 편집창 왼쪽 아래 폴더추가를 클릭하고, 폴더명에 showroom을 입력한 뒤 저장을 클릭합니다.

STEP 2. 화면추가를 클릭하고 showroom 폴더를 선택합니다. 파일명에 index.html을 입력한 뒤 저장을 클릭합니다.

STEP 3. 추가한 index.html에 아래 코드를 붙여 넣고 저장을 클릭합니다. '파트너 ID'는 플레이어 설치 때와 같은 값으로 바꿉니다.

<!--@layout(/layout/basic/layout.html)-->
<div id="sauce-showroom"></div>
<!-- 소스 쇼룸 시작 -->
<script src="https://showroom.sauce.im/static/js/SauceShowroomLib.js"></script>
<script>
  SauceShowroomLib.setInit({ partnerUniqueId: '파트너 ID' });
  SauceShowroomLib.setPlatform('cafe24');
  SauceShowroomLib.setPlayerModalEnabled(true);
  SauceShowroomLib.load();
</script>
<!-- 소스 쇼룸 끝 -->

STEP 4. 몰 메뉴에 라이브 항목을 추가하고 링크를 /showroom/index.html로 지정합니다. [확인 필요: 카페24 메뉴 추가 경로]

3. 확인하고 적용하기

STEP 1. 디자인 보관함에서 복사한 디자인의 미리보기를 클릭합니다. 라이브 중인 방송이 있으면 몰 화면 구석에 작은 플레이어가 뜹니다. 쇼룸 페이지에서 방송을 누르면 그 자리에서 방송이 열립니다.

STEP 2. 확인을 마쳤으면 복사한 디자인을 선택하고 대표 디자인 설정을 클릭합니다. 이때부터 고객 화면에 적용됩니다.

방송 링크 만들기

방송마다 링크 하나를 만들어 알림톡 · 문자 · SNS · 메인 배너에 넣습니다. 쇼룸 페이지 주소 뒤에 ?ssBid=와 방송 ID를 붙이면 됩니다.

https://몰주소/showroom/index.html?ssBid=방송 ID

고객이 링크로 들어오면 쇼룸 페이지가 열리면서 그 방송이 바로 재생됩니다. 방송 ID는 [확인 필요: 소스 어드민에서 방송 ID를 확인하는 메뉴 경로]에서 확인합니다.