基本的な実装方法

    基本的な実装方法


    記事の要約

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

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

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


    ステップ1:初期化

    ここでは、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>


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

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

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


    基本的な実装サンプル

    <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>