Shoplive Web Player SDK 연동 가이드

<script src="https://static.shoplive.cloud/shoplive.js"></script>
<script>
  cloud.shoplive.initPlugin({ accessKey: 'YOUR_ACCESS_KEY' });
</script>

<div id="shoplive-player"></div>
<script>
  cloud.shoplive.setPlayer("shoplive-player", { campaignKey: "YOUR_CAMPAIGN_KEY" });
</script>

<script src="https://static.shoplive.cloud/shoplive.js"></script>
<script>
  cloud.shoplive.initPlugin({ accessKey: 'YOUR_ACCESS_KEY' });
</script>

<div id="shoplive-player"></div>
<script>
  cloud.shoplive.setPlayer("shoplive-player", {
    campaignKey: "YOUR_CAMPAIGN_KEY"
  });
</script>

cloud.shoplive.setPlayer("shoplive-player", {
  campaignKey: "YOUR_CAMPAIGN_KEY",
  ui: { viewerCount: true, likeCount: true, backButton: true, shareButton: true }
});

cloud.shoplive.initPlugin({
  accessKey: 'YOUR_ACCESS_KEY',
  shareUrl: 'https://my-shop.com/live'   // 선택 — 생략하면 현재 페이지 주소
});

cloud.shoplive.setPlayer("shoplive-player", {
  campaignKey: "YOUR_CAMPAIGN_KEY",
  isFullScreen: true
});

cloud.shoplive.destroyPlayer("shoplive-player");

https://www.shoplive.show/v1/player.html?ak={access_key}&ck={campaign_key}&tk={사용자정보}

<div id="shoplive-overall-area"></div>
<script>
  cloud.shoplive.setOverall('shoplive-overall-area');
</script>

cloud.shoplive.setOverall('shoplive-overall-area', {
  campaignListsOnly: true,
  campaignStatus: ['ONAIR', 'CLOSED'],   // 이 순서대로 정렬됩니다
  tags: ['sale', 'new'],
  tagSearchOperator: 'OR',               // 'OR' 하나라도 일치 · 'AND' 모두 일치
  displayTags: ['sale', 'new', 'best'],  // 목록 위에 필터 탭으로 노출
  campaignList: { layout: 'HORIZONTAL' } // 'GRID'(기본) | 'HORIZONTAL'
});

cloud.shoplive.setOverall('shoplive-overall-area', {
  sectionTitles: {
    onair:  '지금 라이브',
    ready:  '방송 예정',
    closed: '지난 방송',
    all:    '전체 방송'
  }
});

cloud.shoplive.destroyOverall('shoplive-overall-area', true);

<button id="open-live">라이브 보기</button>
<script>
  document.getElementById('open-live').addEventListener('click', function () {
    cloud.shoplive.showFeaturedPlayerModal({ campaignKey: 'YOUR_CAMPAIGN_KEY' });
  });

  // 코드로 닫기
  // cloud.shoplive.dismissLayerModalPlayer();
</script>

// 간편 인증 — userId만 필수, 나머지는 선택
const userObject = {
  userId: "",     // 필수 — 로그인한 사용자의 고유 ID. 빈 값이면 비로그인(게스트) 상태로 처리됨
  userName: "",   // 선택 — 채팅에 표시될 이름. 미지정 시 캠페인 설정에 따라 입력 강제/임의 생성. 금칙어는 *로 대체되어 표시
  gender: "",     // 선택 — "m" | "f" | 미지정 시 빈 값
  age: "",        // 선택 — 통계에는 5세 단위로 그룹화되어 표시됨
  userScore: "",  // 선택 — -100~100 정수. 이벤트 추첨 제한 등의 기준으로 활용 가능
  userType: "",   // 선택 — 입장 제한(Entry Type) 설정 시 참조되는 값
  profile: "",    // 선택 — 채팅 목록 프로필 이미지 URL, 권장 64x64px
  custom: "",     // 선택 — 자유 형식 데이터, 최대 1KB
  canBid: true    // 선택 — 경매 입찰 자격 (부록 A · 옥션)
};

// 방법 1 — initPlugin() 호출에 바로 포함
cloud.shoplive.initPlugin({ accessKey: "YOUR_ACCESS_KEY", userObject });

// 방법 2 — initPlugin() 이후 별도 호출 (로그인 정보가 나중에 확정될 때)
cloud.shoplive.initPlugin({ accessKey: "YOUR_ACCESS_KEY" });
cloud.shoplive.setUserObject(userObject);


// JWT 인증도 방식은 동일 — 아래 5단계에서 만든 토큰을 전달
cloud.shoplive.initPlugin({ accessKey: "YOUR_ACCESS_KEY", userJWT: "USER_JWT" });
// 또는
cloud.shoplive.setUserJWT("USER_JWT");


// 로그아웃 · 사용자 정보 초기화 — 설정한 사용자 정보를 지우고 게스트 상태로 돌아갑니다
cloud.shoplive.logout();
// 또는 넘긴 값을 null 로: cloud.shoplive.setUserObject(null) / cloud.shoplive.setUserJWT(null)

<!-- 1. SDK 로드 -->
<script src="https://static.shoplive.cloud/shoplive.js"></script>

<!-- A. Cafe24 — 스킨에 로그인 상태 모듈이 없을 때만 추가합니다.
       {$id} {$name} 은 Cafe24 가 로그인 회원의 아이디·이름으로 바꿔 줍니다.
       이 모듈이 렌더되면 .xans-member-var-id / .xans-member-var-name 이 만들어지고,
       SDK 는 그 두 클래스를 찾아 읽습니다 -->
<div module="Layout_stateLogon" style="display:none;">{$id} {$name}</div>

<!-- B. WISA · 고도몰 · Shopify — 회원 정보를 이 id 로 출력합니다.
       중괄호 안은 쇼핑몰 솔루션이 제공하는 회원 변수로 바꿔 넣으세요
         · 고도몰 : {=gSess.memId} / {=gSess.memNm}
         · WISA   : {{$회원아이디}} / {{$회원명}}
       비로그인 상태에서는 값이 비므로 게스트로 동작합니다 -->
<div style="display:none;">
  <span id="cloud-shoplive-user-id">MEMBER_ID</span>
  <span id="cloud-shoplive-user-name">NICKNAME</span>
</div>

<script>
  // 2. platform 만 넘깁니다 — setUserObject 는 호출하지 않습니다
  cloud.shoplive.initPlugin({
    accessKey: 'YOUR_ACCESS_KEY',
    platform: 'CAFE24'      // 'CAFE24' | 'WISA' | 'GODOMALL' | 'SHOPIFY'
  });
</script>

// Node.js — 고객사 서버에서 해싱합니다 (salt·알고리즘은 항상 같게)
const crypto = require('crypto');

function hashUserId(raw) {
  return crypto.createHash('sha256')
    .update(raw + 'YOUR_SALT')
    .digest('hex');
}

const userId = hashUserId('MEMBER_ID');   // userObject.userId 나 JWT 의 userId 로 씁니다

// Java — jjwt. signWith 이 base64 문자열을 알아서 디코딩합니다
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import java.util.Date;

String base64EncodedSecretKey = "YOUR_BASE64_SECRET_KEY";   // Shoplive 담당자가 전달
long expiration = System.currentTimeMillis() + 12 * 60 * 60 * 1000L;   // 12시간

String jwt = Jwts.builder()
    .signWith(SignatureAlgorithm.HS256, base64EncodedSecretKey)
    .setExpiration(new Date(expiration))
    .setIssuedAt(new Date())
    .claim("userId", "MEMBER_ID")     // 필수
    .claim("name", "NICKNAME")        // 선택 — 채팅 표시 이름
    .claim("userScore", 10)           // 선택
    .claim("userType", "VIP")         // 선택
    .compact();

// Node.js — jsonwebtoken. secretKey 를 직접 디코딩해서 넘겨야 합니다
const jwt = require('jsonwebtoken');

const base64EncodedSecretKey = 'YOUR_BASE64_SECRET_KEY';   // Shoplive 담당자가 전달
const secret = Buffer.from(base64EncodedSecretKey, 'base64');   // ← 디코딩 필요

const token = jwt.sign(
  {
    userId: 'MEMBER_ID',   // 필수
    name: 'NICKNAME',      // 선택 — 채팅 표시 이름
    userScore: 10,         // 선택
    userType: 'VIP'        // 선택
  },
  secret,
  { algorithm: 'HS256', expiresIn: '12h' }
);

const messageCallback = {
  ON_UID_ISSUED: function (payload) {
    // payload.uid — 플레이어가 발급한 게스트 식별값 · payload.campaignKey — 어느 방송인지
    const stored = localStorage.getItem('shoplive_uid');
    if (stored !== payload.uid) {
      localStorage.setItem('shoplive_uid', payload.uid);
    }
  }
};
cloud.shoplive.initPlugin({ accessKey: 'YOUR_ACCESS_KEY', messageCallback });

const messageCallback = {
  DOWNLOAD_COUPON: function (payload) {
    console.log('쿠폰 클릭. coupon code: ' + payload.coupon);
    fetch('YOUR_COUPON_API')
      .then(function (res) { return res.json(); })
      .then(function (res) {
        if (res.success) {
          alert('쿠폰을 다운로드 받았습니다.');
          // 응답을 기다리는 사이 플레이어가 닫혔을 수 있어 여기서 집습니다 (미션 5)
          const player = cloud.shoplive.getPlayer(payload.campaignKey);
          if (player) player.sendMessage('removeCoupon');
        } else {
          alert('쿠폰이 모두 소진되었습니다.');
        }
      });
  },
  // CLICK_PRODUCT는 선택 — 정의 안 하면 기본 동작(새창 이동)을 그대로 사용합니다.
  // 현재 창 이동 등 다르게 동작시키고 싶을 때만 아래처럼 추가하세요.
  // CLICK_PRODUCT: function (payload) {
  //   location.href = payload.url;
  // },
  LOGIN_REQUIRED: function (payload) {
    // 게스트가 로그인 필요한 기능에 접근했을 때
  },
};
cloud.shoplive.initPlugin({
  accessKey: "YOUR_ACCESS_KEY",
  messageCallback
});

const messageCallback = {
  ON_PLAYER_STARTED: function (payload) {
    analytics.track('live_player_started', { campaignKey: payload.campaignKey });
  },
  ON_PLAYER_MODAL_HIDDEN: function (payload) {
    // 모달이 닫혔으니 고객사 페이지 상태를 되돌린다
    document.body.classList.remove('live-open');
  }
};
cloud.shoplive.initPlugin({ accessKey: 'YOUR_ACCESS_KEY', messageCallback });

EVENT_LOG: function (payload) {
  console.log(payload.name, payload.feature, payload.parameter);
  // 예: payload.name이 'like_button', 'share_button', 'chat_send_button', 'coupon' 등
}

EVENT_LOG: function (payload) {
  if (payload.name === 'player_active_seconds') {
    const p = payload.parameter;
    // 누적 시청 시간은 SDK 가 계산해 보내 줍니다 (밀리초)
    analytics.track('live_watch', {
      campaignKey: payload.campaignKey,
      mode: p.mode,                       // LIVE / REPLAY / PREVIEW
      seconds: Math.floor(p.activatedDuration / 1000)
    });
  }
}

<!-- 공통 레이아웃(모든 페이지가 공유하는 head 영역)에 한 번만 -->
<script src="https://static.shoplive.cloud/shoplive.js"></script>
<script>
  cloud.shoplive.initPlugin({ accessKey: 'YOUR_ACCESS_KEY' });
</script>

// 초기화 시 자동 노출을 끈다
cloud.shoplive.initPlugin({
  accessKey: 'YOUR_ACCESS_KEY',
  useAutoPreview: false
});

// 원하는 시점에 직접
cloud.shoplive.showLiveMiniPreview();     // 띄우기
cloud.shoplive.dismissLiveMiniPreview();  // 닫기

cloud.shoplive.setOnClickLiveMiniPreview(function (campaign) {
  // campaign 에는 campaignKey · title · campaignStatus 등이 들어 있습니다
  location.href = '/live?ck=' + campaign.campaignKey;
});

// shareUrl 을 지정했다면 — 받는 쪽에서 직접 열어 줍니다
const ck = new URLSearchParams(location.search).get('ck');
if (ck) {
  cloud.shoplive.showFeaturedPlayerModal({ campaignKey: ck });
  // 또는 cloud.shoplive.setPlayer('shoplive-player', { campaignKey: ck });
}

<div id="live-card"></div>
<script>
  cloud.shoplive.setLivePreview('live-card', {
    campaignKey: 'YOUR_CAMPAIGN_KEY',
    onClick: function (campaign) {
      cloud.shoplive.showFeaturedPlayerModal({ campaignKey: campaign.campaignKey });
    }
  });
</script>

<div id="on-air-cover"></div>
<script>
  cloud.shoplive.setOnAirCover('on-air-cover');
</script>

<!-- 1. SDK 로드 -->
<script src="https://static.shoplive.cloud/shoplive.js"></script>

<!-- 2. 플레이어가 들어갈 자리 -->
<div id="shoplive-player"></div>

<!-- 3. (선택) 플레이어를 조작할 고객사 UI — 여기서는 플레이어 밖의 음소거 버튼 -->
<button type="button" id="mute-btn">음소거</button>

<script>
  // 4. 초기화하고 플레이어를 띄웁니다 (미션 1)
  cloud.shoplive.initPlugin({ accessKey: 'YOUR_ACCESS_KEY' });
  cloud.shoplive.setPlayer('shoplive-player', { campaignKey: 'YOUR_CAMPAIGN_KEY' });

  // 5. (선택) 명령을 보냅니다 — 여기서는 밖의 버튼을 눌렀을 때
  document.getElementById('mute-btn').addEventListener('click', function () {
    const player = cloud.shoplive.getPlayer('YOUR_CAMPAIGN_KEY');
    if (!player) return;              // 아직 안 떴다면 아무것도 하지 않습니다
    player.sendMessage('mute');
  });
</script>

const messageCallback = {
  DOWNLOAD_COUPON: function (payload) {
    fetch('YOUR_COUPON_API', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ coupon: payload.coupon })
    })
      .then(function (res) { return res.json(); })
      .then(function (res) {
        // 응답을 기다리는 사이 플레이어가 닫혔을 수 있으므로 여기서 다시 집습니다
        const player = cloud.shoplive.getPlayer(payload.campaignKey);
        if (!player) return;

        if (res.success) {
          player.sendMessage('showDialog', {
            title: '쿠폰 발급 완료',
            message: '쿠폰 번호 ' + payload.coupon + ' 이(가) 발급되었습니다.'
          });
          player.sendMessage('removeCoupon');   // 받은 쿠폰은 화면에서 치운다
        } else {
          player.sendMessage('showToast', { message: '쿠폰이 모두 소진되었습니다.' });
        }
      })
      .catch(function () {
        const player = cloud.shoplive.getPlayer(payload.campaignKey);
        // 실패했을 때 아무것도 하지 않으면 시청자는 눌러도 반응이 없다고 느낍니다
        if (player) player.sendMessage('showToast', { message: '잠시 후 다시 시도해 주세요.' });
      });
  }
};

cloud.shoplive.initPlugin({ accessKey: 'YOUR_ACCESS_KEY', messageCallback });

https://my-shop.com/live?utm_source=instagram&utm_medium=banner&utm_campaign=spring_sale

<script src="https://static.shoplive.cloud/shoplive.js"></script>
<script>
  cloud.shoplive.initPlugin({ accessKey: 'YOUR_ACCESS_KEY' });

  // 로그인 사용자라면 시청할 때와 "같은" userId 를 넣습니다 (3단계 참고)
  cloud.shoplive.setUserObject({ userId: 'MEMBER_ID' });

  cloud.shoplive.sendConversionEvent({
    accessKey: 'YOUR_ACCESS_KEY',   // 필수
    eventType: 'purchase',          // 필수 — 'purchase'(구매 완료) / 'cartIn'(장바구니 담기)
    orderId: 'UNIQUE_ORDER_ID',     // 고객사 주문번호
    products: [
      { productId: 'PRODUCT_ID_1', sku: 'PRODUCT_SKU_1', purchaseUnitPrice: 10000, purchaseQuantity: 1, currency: 'KRW' },
      { productId: 'PRODUCT_ID_2', sku: 'PRODUCT_SKU_2', purchaseUnitPrice: 15000, purchaseQuantity: 2, currency: 'KRW' }
    ]
  });
</script>

<script src="https://static.shoplive.cloud/shoplive.js"></script>
<script>
  cloud.shoplive.initPlugin({ accessKey: 'YOUR_ACCESS_KEY' });

  const orderId = '{$order_id}';   // Cafe24 가 실제 주문번호로 바꿔 줍니다

  // 회원 주문이라면 시청할 때와 같은 userId 를 넣습니다
  // cloud.shoplive.setUserObject({ userId: 'MEMBER_ID' });

  cloud.shoplive.sendConversionEvent({
    accessKey: 'YOUR_ACCESS_KEY',
    eventType: 'purchase',
    orderId: orderId,
    products: [
      // Cafe24 API 로 조회한 주문 상품을 { productId, sku, purchaseUnitPrice, purchaseQuantity, currency } 형태로 채웁니다
    ]
  });
</script>

const script = document.createElement('script');
script.src = 'https://static.shoplive.cloud/shoplive.js';
script.async = true;
document.head.appendChild(script);

script.onload = function () {
  cloud.shoplive.initPlugin({ accessKey: 'YOUR_ACCESS_KEY' });

  analytics.subscribe('checkout_completed', function (event) {
    const checkout = event.data.checkout;

    // 회원 주문이면 시청할 때와 같은 기준으로 userId 를 넣습니다
    const customerId = checkout.order.customer && checkout.order.customer.id;
    if (customerId) {
      cloud.shoplive.setUserObject({ userId: String(customerId) });
    }

    cloud.shoplive.sendConversionEvent({
      accessKey: 'YOUR_ACCESS_KEY',
      eventType: 'purchase',
      orderId: checkout.order.id,
      products: checkout.lineItems.map(function (item) {
        return {
          productId: item.variant.product.id,
          sku: item.variant.sku,
          purchaseUnitPrice: parseFloat(item.variant.price.amount),
          purchaseQuantity: item.quantity,
          currency: item.variant.price.currencyCode
        };
      })
    });
  });
};

<script src="https://static.shoplive.cloud/shoplive.js"></script>
<script>
  // ── 미션 3 · 사용자 상호작용 처리
  const messageCallback = {
    DOWNLOAD_COUPON: function (payload) {
      // 고객사 쿠폰 발급 API 를 부르고, 성공했을 때만 화면에서 쿠폰을 치운다 (미션 5)
      fetch('YOUR_COUPON_API', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ coupon: payload.coupon })
      })
        .then(function (res) { return res.json(); })
        .then(function (res) {
          // 응답을 기다리는 사이 플레이어가 닫혔을 수 있어 여기서 집는다
          const player = cloud.shoplive.getPlayer(payload.campaignKey);
          if (!player) return;
          if (res.success) {
            player.sendMessage('removeCoupon');
          } else {
            player.sendMessage('showToast', { message: '쿠폰이 모두 소진되었습니다.' });
          }
        });
    },
    LOGIN_REQUIRED: function () {
      location.href = '/login?returnTo=' + encodeURIComponent(location.href);
    },
    ON_CLICK_CAMPAIGN_LIST_ITEM: function (payload) {
      // 기본 동작은 모달 열기입니다. 자체 방송 상세 페이지로 보내고 싶을 때만 이렇게 재정의합니다
      // (모달로 열리는 기본 동작을 그대로 쓸 거라면 이 콜백을 등록하지 마세요)
      location.href = '/live/' + payload.campaign.campaignKey;
    }
  };

  // ── 미션 1 · 초기화 (미션 4 · 공유 URL 지정)
  cloud.shoplive.initPlugin({
    accessKey: 'YOUR_ACCESS_KEY',
    messageCallback: messageCallback,
    shareUrl: 'https://my-shop.com/live'
  });

  // ── 미션 2 · 로그인 사용자라면 연결 (게스트라면 이 블록 전체를 건너뜁니다)
  cloud.shoplive.setUserObject({ userId: 'YOUR_HASHED_USER_ID', userName: 'YOUR_USER_NAME' });

  // 이 페이지에 고정으로 띄울 방송
  const PAGE_CAMPAIGN_KEY = 'YOUR_CAMPAIGN_KEY';
</script>

<!-- ── 미션 1 · 방법 A — 특정 방송 하나를 이 자리에 -->
<div id="shoplive-player"></div>
<script>
  cloud.shoplive.setPlayer('shoplive-player', {
    campaignKey: PAGE_CAMPAIGN_KEY,
    ui: { shareButton: true }
  });
</script>

<!-- ── 미션 1 · 방법 C — 대표 방송 + 목록을 템플릿으로 (방법 A 와 택일) -->
<!--
<div id="shoplive-overall-area"></div>
<script>
  cloud.shoplive.setOverall('shoplive-overall-area');
</script>
-->

<!-- ── 미션 4 · 공유 링크로 들어온 경우 그 방송을 연다 -->
<script>
  const ck = new URLSearchParams(location.search).get('ck');
  // 이 페이지에 이미 떠 있는 방송이면 모달을 겹쳐 열지 않는다
  if (ck && ck !== PAGE_CAMPAIGN_KEY) {
    cloud.shoplive.showFeaturedPlayerModal({ campaignKey: ck });
  }
</script>

<script src="https://static.shoplive.cloud/shoplive.js"></script>
<script>
  cloud.shoplive.initPlugin({ accessKey: 'YOUR_ACCESS_KEY' });

  // 방송을 볼 때와 "같은" userId 여야 전환으로 이어집니다
  cloud.shoplive.setUserObject({ userId: 'YOUR_HASHED_USER_ID' });

  cloud.shoplive.sendConversionEvent({
    accessKey: 'YOUR_ACCESS_KEY',
    eventType: 'purchase',
    orderId: 'UNIQUE_ORDER_ID',
    products: [{
      productId: 'PRODUCT_ID',
      sku: 'PRODUCT_SKU',
      purchaseUnitPrice: 10000,
      purchaseQuantity: 1,
      currency: 'KRW'
    }]
  });
</script>

const messageCallback = {
  // 플레이어가 시작되거나 브랜드 정보가 바뀔 때 — 현재 사용자의 좋아요 상태를 알려 준다
  ON_CHANGED_BRAND_FAVORITE: function (payload) {
    const player = cloud.shoplive.getPlayer(payload.campaignKey);
    if (!player) return;
    player.sendMessage('SEND_COMMAND_MESSAGE', {
      command: 'SET_BRAND_FAVORITE',
      payload: { identifier: payload.identifier, favorite: true }
    });
  },
  // 시청자가 버튼을 눌렀을 때 — 고객사 서버에 저장한다
  ON_CLICK_BRAND_FAVORITE_BUTTON: function (payload) {
    const { identifier, favorite } = payload;
    fetch('YOUR_FAVORITE_API', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ identifier, favorite })
    });
  }
};

cloud.shoplive.initPlugin({ accessKey: 'YOUR_ACCESS_KEY', messageCallback });

CLICK_PRODUCT_CART: function (payload) {
  addToMyCart(payload).then(function () {
    // 담는 사이 플레이어가 닫혔을 수 있어 여기서 집는다 (미션 5)
    const player = cloud.shoplive.getPlayer(payload.campaignKey);
    if (!player) return;
    player.sendMessage('SEND_COMMAND_MESSAGE', {
      command: 'SET_PRODUCT_CART_ON',
      payload: { products: [{ sku: payload.sku, isCartOn: true }] }
    });
  });
}

cloud.shoplive.initPlugin({
  accessKey: 'YOUR_ACCESS_KEY',
  webClientSettings: {
    useRemind: true
  }
});

cloud.shoplive.initPlugin({
  accessKey: 'YOUR_ACCESS_KEY',
  listCampaignIdsForRemindButton: ['2262194', '2262195']
});

ON_CLICK_REMIND_CAMPAIGN: function (payload) {
  const campaignKey = payload.campaign.campaignKey;
  if (payload.isReminded) {
    subscribeToMyPush(campaignKey);     // 알림 신청
  } else {
    unsubscribeFromMyPush(campaignKey); // 알림 해제
  }
}

ON_AUCTION_WINNER_CHECKOUT_CLICKED: function (payload) {
  // payload.auction.winnerCheckoutScheme 에 Admin 에서 설정한 결제 주소가 옵니다
  const scheme = payload.auction && payload.auction.winnerCheckoutScheme;
  location.href = scheme || ('/checkout?sku=' + payload.product.sku);
}

/orderform.html   /login.html   /basket.html   /navercheckout

// 웹 PIP 로 전환하면서 지정한 주소로 이동합니다
cloud.shoplive.navigateWithPIP('/product/1', 'YOUR_CAMPAIGN_KEY');

// iOS — WKWebView 를 만들 때
let configuration = WKWebViewConfiguration()
configuration.allowsInlineMediaPlayback = true
let webView = WKWebView(frame: rect, configuration: configuration)

// Android — WebView 생성 후
webView.settings.mediaPlaybackRequiresUserGesture = false

cloud.shoplive.initPlugin({
  accessKey: 'YOUR_ACCESS_KEY',
  useAMD: true,
  AMDLoader: require   // 생략하면 window.require 를 씁니다
});

<!-- 공통 레이아웃 — 모든 페이지에 한 번만 (위치는 플랫폼별 안내 참고) -->
<script src="https://static.shoplive.cloud/shoplive.js"></script>
<!-- 회원 정보 엘리먼트 — 플랫폼별 (아래 각 플랫폼 참고) -->
<script>
  cloud.shoplive.initPlugin({
    accessKey: 'YOUR_ACCESS_KEY',   // Admin 방송 상세에서 복사
    platform: 'CAFE24'              // 플랫폼에 맞는 값 (아임웹은 생략)
  });
</script>

<!-- 방송 목록 페이지 — 이 페이지의 HTML 영역에 -->
<div id="shoplive-overall"></div>
<script defer>cloud.shoplive.setOverall('shoplive-overall');</script>

<div module="Layout_stateLogon" style="display:none;">{$id} {$name}</div>

<div style="display:none;">
  <span id="cloud-shoplive-user-id">{=gSess.memId}</span>
  <span id="cloud-shoplive-user-name">{=gSess.memNm}</span>
</div>

<div style="display:none;">
  <span id="cloud-shoplive-user-id">{{$회원아이디}}</span>
  <span id="cloud-shoplive-user-name">{{$회원명}}</span>
</div>

<div style="display:none;">
  <span id="cloud-shoplive-user-id"><!--/user_id/--></span>
  <span id="cloud-shoplive-user-name"><!--/user_name/--></span>
</div>
<script>cloud.shoplive.initPlugin({ accessKey: 'YOUR_ACCESS_KEY', platform: 'MAKESHOP' });</script>

<script src="https://static.shoplive.cloud/shoplive.js"></script>
<script>
  cloud.shoplive.initPlugin({ accessKey: 'YOUR_ACCESS_KEY' });
  if (window.MEMBER_UID) {            // imweb 이 로그인 회원에게 넣어 두는 회원 번호
    cloud.shoplive.setUserObject({ userId: window.MEMBER_UID });
  }
</script>

<script src="https://static.shoplive.cloud/shoplive.js"></script>
<script>
  cloud.shoplive.initPlugin({ accessKey: 'YOUR_ACCESS_KEY', platform: 'SHOPIFY' });
  {% if customer %}
  cloud.shoplive.setUserObject({ userId: "{{ customer.id }}", userName: "{{ customer.first_name }}" });
  {% endif %}
</script>

<div id="shoplive-overall"></div>
<script defer>
  document.addEventListener('DOMContentLoaded', function () {
    cloud.shoplive.setOverall('shoplive-overall');
  });
</script>

const player = cloud.shoplive.getPlayer();

player.sendMessage('SEND_COMMAND_MESSAGE', {
  command: 'SET_PRODUCT_CART_ON',
  payload: { products: [{ sku: 'PRODUCT_SKU', isCartOn: true }] }
});