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 がログイン会員の ID・名前に置き換えます。
       このモジュールが描画されると .xans-member-var-id / .xans-member-var-name が作られ、
       SDK はその 2 つのクラスを探して読み取ります -->
<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 — 特定の配信 1 つをこの場所に -->
<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

// Web 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 を使います
});

<!-- 共通レイアウト — すべてのページに 1 回だけ(場所は各プラットフォームを参照) -->
<script src="https://static.shoplive.cloud/shoplive.js"></script>
<!-- 会員情報の要素 — プラットフォーム別(下の各プラットフォームを参照) -->
<script>
  cloud.shoplive.initPlugin({
    accessKey: 'YOUR_ACCESS_KEY',   // Admin の配信詳細からコピー
    platform: 'CAFE24'              // プラットフォームに合った値(imweb は省略)
  });
</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 }] }
});