目次 x
    基本的な実装方法
      • 印刷する
      目次

      基本的な実装方法

        • 印刷する
        記事の要約

        基本的なインストール方法

        このページでは、次の機能を提供するShoplive Pluginのインストール方法を説明します。

        • Shoplive Pluginは、配信予定のライブ、進行中のライブ、および過去のライブをまとめて表示します。(キャンペーン設定で「APIプラグイン」公開オプションを有効にする必要があります。）

        • 進行中のライブがある場合、Shoplive Pluginは、Webサイトの全ページの右下隅に進行中のライブ配信のプレビューを表示します

        [ステップ1:初期化]

        • 初期化に加えて、ユーザー認証機能を使用するには、初期化：ユーザー認証を参照してください。

        • 初期化に加えて、クーポン連動機能のためにmessageCallbackを定義する必要がある場合は、messageCallbackを参照してください。

        ここでは、Shoplive Pluginをユーザー認証なし / 簡易認証 / JWT トークン認証で初期化する例をそれぞれ紹介します。

        Webページの共通レイアウト(head領域など)に希望する方式の初期化コードをインストールします。

        📘 共通レイアウトで初期化する必要があります

        ライブ配信をプレビュー形式で表示するライブミニプレビュー機能を有効にするには、次のコードをWebサイト内の全ページに挿入する必要があります。

        <script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>cloud.shoplive.init({ accessKey: 'YOUR ACCESS KEY HERE' });</script>

<!-- OR -->

//簡易認証
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>
  cloud.shoplive.init({ accessKey: 'YOUR ACCESS KEY HERE' });
  cloud.shoplive.setUserObject({userId: "USER_ID", userName: "USER_NAME"});
</script>

<!-- OR -->

//JWTトークン認証
<script type="text/javascript" src="https://static.shoplive.cloud/shoplive.js"></script>
<script>
  cloud.shoplive.init({ accessKey: 'YOUR ACCESS KEY HERE' });
  cloud.shoplive.setUserJWT("USER_JWT");
</script>

        HTML

        [ステップ2:プレイヤー、リストの表示]

        次のコードを使用して、Shoplive Pluginテンプレートを Web ページにインストールします。

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

        HTML

        基本的な実装サンプル

        <html>
  <head>
    <title>Shoplive - Simple Shoplive Plugin 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>cloud.shoplive.init({ accessKey: 'YOUR ACCESS KEY HERE' });</script>

    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        background-color: #333;
      }
      #shoplive-player {
        max-width: calc(100vh / 16 * 9 - 2px);
        margin: auto;
      }
      @media screen and (max-width: 480px) {
        #shoplive-player {
          max-width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div id="shoplive-overall-area"></div>
		<script defer>cloud.shoplive.setOverall('shoplive-overall-area');</script>
  </body>
</html>

        HTML

        What's Next