Contents x
    Basic Integration
      • Print
      Contents

      Basic Integration

        • Print
        Article summary

        This guide provides instructions on using the Shoplive Player's Standalone format. If you do not use the structured configuration of the Shoplive Plugin, you can configure the page in the desired form through the Shoplive Player.

        • Install the Shoplive Player on the web page by setting the location and layout of the Shoplive Player.

        • Specify the style of the container layout by yourself.

        • Run a specific campaign by specifying the campaignKey.

        • You can always run it in full screen by using the isFullScreen option.

        Step 1: Initialization

        • To use the user authentication feature with initialization, refer to User Authentication.

        • If you need to define messageCallback for coupon function integration in addition to initialization, please refer to messageCallback.

        To initialize the player without user authentication or messageCallback definition, install the following code in the common layout (such as the head area). This code must be inserted on all pages for the Live Mini Preview feature, which shows live broadcasts in a preview form.

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

        Step 2: Install Shoplive Player

        To install the Shoplive Player on a web page, select the campaign to run through setPlayer, and then set the position and layout of the Shoplive Player. Finally, specify the style of the container layout.

        Basic example

        <style>
  #shoplive-player {
    max-width: 360px;
    height: 612px;
    margin: auto;
  }
</style>
<div id="shoplive-player"></div>
<script defer>
   cloud.shoplive.setPlayer("shoplive-player", { campaignKey: "YOUR_CAMPAIGN_KEY" });
</script>

        Full-Screen mode example

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

        Sample code

        The following is an example of how to install the Shoplive Player that supports both desktop and mobile sizes.

        <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>
      var messageCallback = {
        DOWNLOAD_COUPON: function(payload) {
          console.log('User clicks coupon. coupon code :  ' + payload.coupon);
        } 
      }
      cloud.shoplive.init({ accessKey: "YOUR_ACCESS_KEY", messageCallback: messageCallback });
    </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-player"></div>
    <script defer>
      cloud.shoplive.setPlayer("shoplive-player", { campaignKey: "YOUR_CAMPAIGN_KEY" });
    </script>
  </body>
</html>

        What's Next