샘플 코드

Shoplive Player 설치 예시

messageCallback 을 사용하여 쿠폰 다운로드, 상품 클릭, 로그인이 필요한 기능 접근 이벤트가 발생하였을 시, 수행 동작 재정의 하고, 데스크탑과 모바일 사이즈에 모두 적용되는 스타일을 적용한 Shoplive Player를 표시합니다.

<html>
  <head>
    <title>Shoplive - Simple player example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover, shrink-to-fit=no" />
    <script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
    <script>
      const messageCallback = {
        DOWNLOAD_COUPON: function (payload) {
          // get Current Player
          const player = cloud.shoplive.getPlayer();
          // if, ONAIR player
          if (
            player.campaignStatus === "ONAIR" &&
            player.campaignKey === payload.campaignKey
          ) {
            if (navigator.clipboard && window.isSecureContext) {
              // HTTPS 환경: Clipboard API 사용
              navigator.clipboard.writeText(payload.coupon).then(function () {
                player.sendMessage("showDialog", {
                  title: "클립보드에 복사되었습니다",
                  message: payload.coupon,
                });
              }).catch(function (error) {
                console.error(error);
              });
            } else {
              // HTTP 환경: execCommand fallback
              const textarea = document.createElement("textarea");
              document.body.appendChild(textarea);
              textarea.value = payload.coupon;
              textarea.select();
              const successful = document.execCommand("copy");
              document.body.removeChild(textarea);
              if (successful) {
                player.sendMessage("showDialog", {
                  title: "클립보드에 복사되었습니다",
                  message: payload.coupon,
                });
              }
            }
          }
        },
        CLICK_PRODUCT: function (payload) {
          // 클릭한 상품 URL에 새로운 파라미터를 추가할 수 있습니다.
          const url = payload.url + "&parameter=" +"{your_parameter}";

          // 현재 창에서 상품 페이지로 이동합니다.
          location.href = url;
        },
        LOGIN_REQUIRED: function (payload) {
          alert("LOGIN_REQUIRED");
          location.href = "YOUR_LOGIN_PAGE_URL";
        },
      };
      cloud.shoplive.initPlugin({
        accessKey: "{YOUR_ACCESS_KEY}",
        messageCallback: messageCallback,
      });

      const userId = ""; // 필수 — 로그인한 사용자의 실제 고유 ID로 교체. 비로그인이면 빈 문자열 유지
      const userName = ""; // 선택 — 채팅창에 표시할 실제 사용자 이름으로 교체
      if (userId) {
        cloud.shoplive.setUserObject({ userId: userId, userName: userName });
      }
    </script>
  </head>
  <body>
    <div id="shoplive-player"></div>
    <script defer>
      cloud.shoplive.setPlayer("shoplive-player", { campaignKey: "YOUR_CAMPAIGN_KEY" });
    </script>
  </body>
</html>