라이브러리 설치

쇼룸 라이브러리 스크립트를 삽입하고 setInit 으로 파트너 ID를 등록하는 단계입니다. 여기까지 하면 콘텐츠 표시 함수를 호출할 수 있습니다.

라이브러리 설치 — 쇼룸 WEB

⏱ 예상 소요 시간: 5분

📋 사전 조건: 파트너 ID

스크립트 삽입

콘텐츠를 표시할 페이지에 스크립트를 넣습니다. 번들 하나에 모든 기능이 들어 있습니다.

html

<script src="https://showroom.sauce.im/static/js/SauceShowroomLib.js"></script>

💡 스테이지 환경. 운영 도메인 앞에 stage. 를 붙입니다 — https://stage.showroom.sauce.im/static/js/SauceShowroomLib.js

⚠️ 이 스크립트가 실행된 뒤에야 window.SauceShowroomLib 가 생깁니다. async·defer 를 붙이면 뒤따르는 인라인 스크립트가 먼저 실행되어 undefined 를 참조합니다.

초기화

파트너 ID를 등록합니다. 모든 요청과 브릿지 페이로드에 이 값이 실립니다.

javascript

window.SauceShowroomLib.setInit({ partnerUniqueId: '파트너 ID' })

파라미터	타입	필수	설명
partnerUniqueId	String	필수	모비두 담당자에게 전달받은 파트너 ID. 값이 없으면 콘솔에 `파트너ID를 설정해주세요.` 를 남기고 초기화가 중단됩니다

⚠️ setInit 전에는 window.SauceShowroomLib 에 setInit 하나만 있습니다. 나머지 함수는 setInit 이 실행될 때 채워지므로, 그 전에 호출하면 is not a function 오류가 납니다.

설치 확인

전체 페이지를 한 번 표시해 스크립트와 파트너 ID가 맞는지 확인합니다.

html

<div id="sauce-showroom"></div>

<script src="https://showroom.sauce.im/static/js/SauceShowroomLib.js"></script>
<script>
  window.SauceShowroomLib.setInit({ partnerUniqueId: '파트너 ID' })
  window.SauceShowroomLib.load({ elementId: 'sauce-showroom' })
</script>

지정한 요소 안에 어드민에서 공개로 설정한 콘텐츠가 순서대로 나타납니다.
아무것도 나타나지 않으면 브라우저 콘솔을 확인합니다. 경고 문구별 원인은 콘솔 경고와 문제 해결에 있습니다.
콘텐츠를 골라서 배치하려면 콘텐츠 모듈의 개별 함수를 씁니다.

어드민 스크립트 복사

어드민에 붙여 쓸 수 있는 스크립트가 준비돼 있습니다.

버튼	복사되는 것
전체 스크립트	어드민에 등록된 콘텐츠 전체를 표시하는 스크립트
개별 스크립트	선택한 콘텐츠 하나를 표시하는 스크립트

💡 위치는 어드민 쇼룸 설정 > 스크립트 보기입니다. 자세한 절차는 쇼룸 관리에 있습니다.

다음 단계

사용자 인증 — 회원 정보를 쇼룸에 전달하는 두 방식

→

Updated about 4 hours ago

Did this page help you?