Other Websites
      Back to home
      1. Help Center
      2. Set up your Destinations
      3. Other Websites

      Setting up Interactive Player on Websites

      This article outlines the steps to successfully add the Stage TEN Interactive Player onto any webpage, enabling live, interactive commerce! We've provided two options on how this can be accomplished.

      Note: looking to embed on a Shopify store? Use this guide instead.

      Add Interactive Player

      Install Sales Channel

      This step is only required if the Stage TEN Sales Channel is not installed on the Shopify Store.   You will need to accept the usage charges.  Note: There are no monthly charges. 

      If it already is, then proceed to ‘Using Basic Embed’.

      1. Go to Stage TEN Live Shopping, in the Shopify App Store.
      2. Click Add App.
      3. You will be prompted to create a Stage TEN account and then redirected automatically to your Stage TEN Dashboard.

      Note: Any products that will be featured during a live stream must be included in both the Stage TEN and Shop Sales Channels.

      Using Basic Embed

      The Live Channel Embed src is a URL unique to each Stage TEN account. There is a basic version and a more enhanced, configurable version.  The first set of instructions is for the basic code.

      1. Log into the Stage TEN Pro Studio.
      2. Click the cogwheel icon at the top right of the screen and then DESTINATIONS.
      3. Under the Stage TEN destination locate Embed broadcast to capture your account's embed code snippet.
      4. Click Copy and paste this information within the code of your website:
        1. The information should resemble this (note that this is just an example): 
          <iframe src="https://play.stageten.tv/embed/cd56ae07-7cf3-4d4c-bffa-bdeb1afccf00" title="Stage TEN Interactive Player" allow="fullscreen; autoplay" frameborder="0" style="width: 1410px; height: 600px"></iframe>

      It is important to note that certain web editors and services may necessitate additional configuration within their tools. To achieve this, we recommend consulting the support resources and working closely with your web developers for guidance on how to proceed.

      Using Enhanced Embed

      The enhanced code allows for additional configuration, including adding holding cards for when you are not live and updating button colours.

      1. Copy and paste the following code in your website editor.
       <center>
      <div id="stage-ten-wrapper" style="width: 100%; position: relative">
        <iframe
          src="https://play.stageten.tv/embed/CHANNEL_ID?splashImageURL=HORIZONTAL_IMAGE&splashImageURLVert=VERTICAL_IMAGE&accentColor=HEX_CODE"
          title="Stage TEN Interactive Player"
          style="width: 100%; height: 100%; position: relative; left: 0; top: 0"
          allow="fullscreen; autoplay"
          frameBorder="0"
        >
        </iframe>  <script>
          const updateSize = () => {
            const stageTenWrapper = document.getElementById('stage-ten-wrapper')
            const currentWidth = stageTenWrapper.clientWidth
            if (currentWidth > 1000) {
              // Desktop
              stageTenWrapper.style['height'] = 'min(calc(' + Math.round(currentWidth * 1.1).toString() + 'px - 600px), calc(100vh - 150px))'
            } else {
              // Mobile
              stageTenWrapper.style['height'] = 'min(' + Math.round(currentWidth * (16/9)).toString() + 'px, calc(100vh - 50px))'
            }
          }
          window.addEventListener('load', updateSize)
          window.addEventListener('resize', updateSize)
        </script> </div>
       </center>

      Updating Enhanced Code

      1. The following variables in the code snippet should be modified:

        1. Channel ID

          1. Your unique ID, connected to your account.

        2. splashImageURL:

          1. This is the horizontal holding card that will appear on your player, when you are not LIVE.

          2. The image should be located from an accessible URL and must be encoded.

            1. To encode the URL use this tool to paste it and encode: URL Encoder

          3. PNG, JPEG, and GIF can be used here

          4. The asset must be 16x9

        3. splashImageURLvert:

          1. This additional, vertical holding card will appear on your player when you are not LIVE.

          2. Image should be located from an accessible URL and must be encoded.

            1. To encode the URL use this tool to paste it and encode: URL Encoder

          3. PNG, JPEG and GIF can be used here

          4. Asset must be 9x16

        4. accentColor:

          1. Allows you to customize the colours used on the Chat, SHOP and VOTE buttons

          2. Uses HEX code, e.g. the code for green 00FF00.

      Add Past Broadcast Recordings

      Depending on your account's plan level, you may be able to embed recordings of past broadcasts.

      1. To access recordings go to the Pro Studio > Settings > Recordings. Find the recording you want to add, and click on Embed Code. If you don't see the Embed Code option, your current plan may not provide access to embedding Past Broadcast Recordings.
        1. Copy the recording’s embed code that appears.

      <iframe
        src="https://play.stageten.tv/embed/05a782df-94f9-49ab-827b-b5f5bacdfa10/vod/a69c56d6-4fbb-48ac-8d89-8b7a7f59d018"
        title=""
        allow="fullscreen; autoplay"
        frameborder="0"
        style="width: 1410px; height: 600px; position: relative"
      >
      </iframe>
      1. Paste this code in your website editor.

      If you have any questions or require additional assistance, please contact Support (support@stageten.tv)