Embed your live player on a Website

Add the Stage TEN Interactive Player to your website to enable live, interactive commerce.

Tip: Streaming to a Shopify storefront or the Shop App? Use these guides instead:

• Add live shows to your store

• Stream to the Shop App

Prerequisites:

• If you want to support Live Shopping, you must have installed the Stage TEN sales channel and connected your store to Stage TEN.

---

To go live on your website, you need to include your Interactive Player's unique embed code on that website where you want the stream to appear.

To do this, you can simply paste a basic embed, or if you're comfortable editing a bit of HTML code, you can use the enhanced embed provided below.

Option 1: Basic Embed

1. In the Pro Studio, click the Settings button at the top right of the screen, then Destinations.

2. Click the Stage TEN destination, then locate Embed broadcast.

3. Here you can Copy the code snippet for your channel's Interactive Player.

Option 2: Using Enhanced Embed

The enhanced code allows for additional configuration, including adding a placeholder image for when you are not live and updating button colours. You will need to paste and customize this code as described below.

1. Copy and paste the following template 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>
    // This function adjusts the height of the player element to fit its container and aspect ratio.
    const updateSize = () => {
      const stageTenWrapper = document.getElementById('stage-ten-wrapper')
      const currentWidth = stageTenWrapper.clientWidth
      // Adjust the 1000px value to control the switch between desktop and mobile layouts.
      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>

1. Modify line 4 of the template, and replace the PLACEHOLDERS (listed below) with your real values:

   1. CHANNEL_ID (Required) - This identifies your account. Follow the instructions for option 1 above to view your basic embed. Extract your channel ID from it as shown in this image:

      
   2. HORIZONTAL_IMAGE (Optional) - This image appears in your player's wide/horizontal layout when you are not live.

      • Image must already be uploaded to a hosting service so you can copy a public URL for it.

        • The must be encoded with a tool such as this URL Encoder.
      • Recommended: 16:9 aspect ratio. PNG, JPEG, or GIF.

   3. VERTICAL_IMAGE (Optional) - This image appears in your player's narrow/vertical layout when you are not live.

      • Image must already be uploaded to a hosting service so you can copy a public URL for it.

        • The must be encoded with a tool such as this URL Encoder.
      • Recommended: 16:9 aspect ratio. PNG, JPEG, or GIF.

   4. HEX_CODE (Optional) - This accent color is used in some of the player's buttons and elements.

      • Must be formatted as a hex code. For example, the code for green is 00FF00.

Tip: Hosting for Splash Images

You can upload images to your Shopify store (or get the url of an image from your store) by going to Content > Files. Find the image file, then copy the Link.

Alternatively, you can use a hosting service such as imgur to get a url for your image.

---

Embedding Interactive Replays

In addition to your live player, you can also share and embed the Interactive Replays of past livestreams. These mimic the experience of watching the stream live, and include replaying of chat messages, and featured product events, and allow the viewers to shop from the same products as were available in the livestream. Learn more about Interactive Replays.

1. In the Dashboard, navigate to Past Streams.
2. Find the livestream you want to embed, then click View Details.

3. Under Interactive Replay, click Manage.

4. If prompted, generate the Interactive Replay. This may take a few minutes, depending on the length of your stream.

5. Click the Embed tab, then Copy Code.

Just as with the live player, this embed code can be pasted in your website editor or modified as you see fit.

---

Note: Your website builder or tools may require additional configuration.

For example, some Wordpress sites require configuration to allow embeds with src urls outside of their own domain.

We recommend consulting the support resources and working closely with your web developers for guidance on how to proceed.

If you have any questions or require additional assistance, please contact Support ([e-mail])