1. 소개

파트너사 자사몰 웹사이트에 클립 콘텐츠 영상을 큐레이션 별로 전시해주는 서비스로, javascript library 형태로 제공됩니다.

2. 적용 방법

STEP 1. head 태그 내에 소스클립 라이브러리 스크립트 태그를 다음과 같이 추가합니다.

프로덕션 환경의 경우

<script src="https://showcase.sauceclip.com/static/js/SauceClipLib.js"></script>

스테이지 환경의 경우

<script src="https://stage.showcase.sauceclip.com/static/js/SauceClipLib.js"></script>

STEP 2. 페이지 내 적용하려는 위치에 태그를 다음과 같이 추가합니다.

<div id="sauce_clip"></div>

STEP 3. STEP2에서 추가한 태그에 전시 페이지가 렌더링 되도록 함수를 실행합니다.

📘
파트너ID에는 계정정보 가져오기 API를 통해서 확인한 파트너ID를 입력해 주세요.

<script>
  window.SauceClipLib({ partnerId: '000' });
</script>

STEP4. 페이지 내에 적용된 것을 확인합니다.

📘

등록된 큐레이션이 없는 경우, 빈 화면이 출력됩니다.

큐레이션 내에 공개 상태의 클립이 없는 경우에 빈 화면이 출력됩니다.

3. 예제 코드

스테이지 환경으로 예시 페이지에 전시하는 예제 코드입니다.

📘
파트너ID 입력이 필요합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
  />
  <script src="https://stage.showcase.sauceclip.com/static/js/SauceClipLib.js"></script>
  <title>[스테이지] 소스클립 전시 데모</title>
</head>
<body>
  <header>
    <section class="left">
      <a href="https://sauce.im">
        <img alt="logo" src="https://sauce.im/_next/image?url=%2Fimages%2Flogos%2Forange_logo.png&w=256&q=75" width="120" height="30" decoding="async" loading="lazy" style="color:transparent">
      </a>
    </section>
    <section class="center"></section>
    <section class="right">
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </section>
  </header>
  <main>
    <div id="sauce_clip"></div>
  </main>
  <script>
    window.SauceClipLib({ partnerId: '000' })
   </script>
</body>
<style>
  html, body {
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
  }
  header {
    display: flex;
    justify-content: space-between;
    padding: 32px;
    border-bottom: 2px solid rgba(0, 0, 0, 0.20);
    width: 100%;
    height: 98px;
  }
  header .right ul {
    list-style: none;
    display: flex;
    gap: 8px;
  }
  header .right ul li {
    width: 60px;
    height: 30px;
    border-radius: 8px;
    background-color: #e6e6e6;
  }
  main {
    width: 100%;
  }
</style>
</html>