Stage TEN
Search
K

Setting up Interactive Player on Shopify

This article outlines the steps to successfully add the Stage TEN Interactive Player onto a Shopify Store webpage, enabling live, interactive commerce! All the steps listed below must be completed under the Shopify Store’s Admin Page.

What is the Stage TEN Interactive Player? Meet the Stage TEN Interactive Player
Click here for steps on how to configure your entry point for the Shop App.
Click here to learn how to add Shoppable VODs to your store.

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 ‘Obtain Channel ID’.
  1. 1.
    Go to Stage TEN Live Shopping, in the Shopify App Store.
  2. 2.
    Click Add App.
  3. 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.
Click here for steps on how to make products available.

Obtain Live Channel ID

The Live Channel Embed src is a URL unique to each Stage TEN account. Once the new Stage TEN section has been created for the store, we will use it there.
  1. 1.
    Go to the Stage TEN Sales Channel.
  2. 2.
    Locate Channel ID: within the Stage TEN Connection section.
  3. 3.
    Click Copy and paste this information somewhere where it is easily accessible for later:
Create New Section
Here we will create the new liquid section that will house the Stage TEN Interactive Player.
  1. 1.
    Go to the Online Store Sales Channel.
  2. 2.
    Click the ellipsis (...) next to the Customize button, then Edit code.
  3. 3.
    Locate the Sections folder and expand it.
  4. 4.
    Click on Add a new section.
  5. 5.
    With the liquid radio button selected, enter “stage-ten-player”
  6. 6.
    Click Done.
Paste Section Code
Before proceeding with the next steps, be sure to clear out the default code that is autogenerated with the newly created section.
  1. 1.
    In the empty section, paste the following code, then click Save.
{% schema %}
{
"name": "Stage TEN",
  "settings": [
    {
      "type": "text",
      "id": "channel-embed-code",
      "label": "Stage TEN channel embed src"
    },
    {
      "type": "paragraph",
      "content": "You can find your embed src in the Destinations settings in the Pro Studio. For example: https://play.stageten.tv/embed/a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5"
    },
    {
      "type": "text",
      "id": "accent-color",
      "label": "Accent color (Ex: 6f2d33) (Optional)"
    },
    {
      "type": "text",
      "id": "splash-image-url",
      "label": "Splash image URL (horizontal) (Optional)"
    },
    {
      "type": "text",
      "id": "splash-image-url-vert",
      "label": "Splash image URL (vertical) (Optional)"
    },
    {
      "type": "text",
      "id": "live-title",
      "label": "Live player title (Optional)"
    },
    {
      "type": "text",
      "id": "vod-group-title",
    "label": "Past Broadcast Recordings group title (Optional)"
    }
  ],
  "blocks": [ 
    {
      "name": "Live Card",
      "type": "live",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "aspect-ratio",
          "label": "Optimize for Video Aspect Ratio:",
          "options": [
            {
              "value": "horizontal",
              "label": "Horizontal (16:9)"
            },
            {
              "value": "vertical",
              "label": "Vertical (9:16)"
            }
          ],
          "default": "horizontal"
        }
      ]
    },
    {
    "name": "Past Broadcast Recording",
      "type": "vod-id",
      "settings": [
        {
          "type": "text",
          "id": "episode-id",
          "label": "Recording ID"
        },
        {
          "type": "paragraph",
        "content": "You can find the Recording ID in Pro Studio > Settings > Recordings > Embed Code. It is the last part of the recording's embed code src. For example: a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5"
        },
        {
          "type": "text",
          "id": "episode-title",
          "label": "Title to Display (Optional)"
        },
        {
          "type": "select",
          "id": "aspect-ratio",
          "label": "Optimize for Video Aspect Ratio:",
          "options": [
            {
              "value": "horizontal",
              "label": "Horizontal (16:9)"
            },
            {
              "value": "vertical",
              "label": "Vertical (9:16)"
            }
          ],
          "default": "horizontal"
        }
      ]
    }
  ],
  "presets": [
    {
    "name": "Stage TEN",
      "settings": {
        "channel-embed-code": "",
        "live-title": "Live Shopping",
        "vod-group-title": "Watch Past Broadcasts"
      },
      "blocks": [
        {
          "type": "live"
        }
      ]
    }
  ]
}
{% endschema %}{% capture splashImageParam %}{% if section.settings.splash-image-url != blank %}splashImageURL={{section.settings.splash-image-url}}&{% endif %}{% endcapture %}
{% capture splashImageParamVert %}{% if section.settings.splash-image-url-vert != blank %}splashImageURLVert={{ section.settings.splash-image-url-vert}}&{% endif %}{% endcapture %}
{% capture accentColorParam %}{% if section.settings.accent-color != nil %}{{ section.settings.accent-color | prepend: 'accentColor=' | append: '&' }}{% endif %}{% endcapture %}
{% capture liveEmbedSrc %}{{section.settings.channel-embed-code}}?{{splashImageParam}}{{splashImageParamVert}}{{accentColorParam}}{% endcapture %}{% for block in section.blocks %}
  {% case block.type %}
  {% when 'live' %}  
    <center><br><br>
        <h2>{{ section.settings.live-title }}</h2>                <div id="stage-ten-wrapper-live" style="width: 90%; position: relative">
          <iframe
            src={{liveEmbedSrc}}
            title="Stage TEN Live Player"
            allow="fullscreen; autoplay"
            frameborder="0"
            style="width: 100%; height: 100%; top:0; left:0; position: relative"
          >
          </iframe>
        </div>
      </center>
  {% endcase %}
{% endfor %}{% for block in section.blocks %}
  {% if block.type contains 'vod' %}
    <center><br>
        <h2>{{ section.settings.vod-group-title }}</h2>
    </center>
    {% break %}
  {% endif %}
{% endfor %}{% for block in section.blocks %}
  {% case block.type %}
    {% when 'vod-id' %}      {% capture wrapperId %}"{{'stage-ten-wrapper-' | append: block.settings.episode-id}}"{% endcapture %}
    {% capture embedSrc %}{{section.settings.channel-embed-code}}/vod/{{block.settings.episode-id}}?{{splashImageParam}}{{splashImageParamVert}}{{accentColorParam}}{% endcapture %}  
      <center>
        {% if block.settings.episode-title != blank %}
          <h4>{{block.settings.episode-title}}</h4>
        {% endif %}
        <div id={{wrapperId}} style="width: 90%; position: relative">
          <iframe
            src={{embedSrc}}
            title="Stage TEN Interactive Player"
            style="width: 100%; height: 100%; position: relative; left: 0; top: 0"
          allow="fullscreen"
            frameBorder="0"
          >
          </iframe>
        </div>
  </center><br><br>
  {% endcase %}
{% endfor %}<script>
  window.addEventListener('load', (event) => { 
    {% for block in section.blocks %}
      {% case block.type %}
        {% when 'live' %}
          updateSize("stage-ten-wrapper-live", "{{block.settings.aspect-ratio}}")
        {% when 'vod-id' %}
          updateSize("{{'stage-ten-wrapper-' | append: block.settings.episode-id}}", "{{block.settings.aspect-ratio}}") 
      {% endcase %}
    {% endfor %}
  })    window.addEventListener('resize', (event) => { 
    {% for block in section.blocks %}
      {% case block.type %}
        {% when 'live' %}
          updateSize("stage-ten-wrapper-live", "{{block.settings.aspect-ratio}}")
        {% when 'vod-id' %}
          updateSize("{{'stage-ten-wrapper-' | append: block.settings.episode-id}}", "{{block.settings.aspect-ratio}}") 
      {% endcase %}
    {% endfor %}
  })  function updateSize(wrapperId, aspectRatio) {
    var stageTenWrapper = document.getElementById(wrapperId)
    var currentWidth = stageTenWrapper.clientWidth
  if (aspectRatio == "horizontal") {
    if (currentWidth > 1233) {
      stageTenWrapper.style['height'] = Math.round(((currentWidth - 386) * 0.5625) + 24).toString() + 'px'
      }
      else if (currentWidth > 1000) {
      stageTenWrapper.style['height'] = Math.round(currentWidth * 0.5).toString() + 'px'
      } else {
      stageTenWrapper.style['height'] = 'calc(100vh - 50px)'
      }
    } else {
    if (currentWidth > 1000) {
      stageTenWrapper.style['height'] = 'min(calc(' + Math.round(currentWidth * 1.1).toString() + 'px - 600px), calc(100vh - 150px))'
      } else {
      stageTenWrapper.style['height'] = 'min(' + Math.round(currentWidth * (16/9)).toString() + 'px, calc(100vh - 50px))'
      }
    }
  }
</script>
Add Section to Store Site
Stage TEN Interactive Player can be embedded on your store’s main page or on its own dedicated page.
  1. 1.
    Return to the Online Store Sales Channel.
  2. 2.
    Click Customize under Themes.
  3. 3.
    Navigate to the Page where the Stage TEN player will reside.
  4. 4.
    Click Add Section in your Template.
  5. 5.
    Search for Stage TEN and click the Section to add it to your page.
  6. 6.
    Position the newly added Section.
  7. 7.
    Paste the Stage TEN channel embed src, along with the previously copied Channel ID into the Stage TEN channel embed src section.
    1. 1.
      For example: https://play.stageten.tv/embed/a1a1a1a1-b2b2-c3c3-d4d4-e5e5e5e5e5e5
  8. 8.
    click Save.
Configure Your Stage TEN Section
If you wish, you can customize the appearance of the section live player. You can also add or remove blocks from the section, and even create multiple sections to achieve your desired appearance.
  1. 1.
    The following settings are available:
    1. 1.
      Splash Image URL (Horizontal):
      1. 1.
        This is the horizontal holding card that will appear on your player, when you are not LIVE.
      2. 2.
        The image should be located from an accessible URL and must be encoded.
        1. 1.
          To encode the URL use this tool to paste it and encode: URL Encoder
      3. 3.
        PNG, JPEG, and GIF can be used here
      4. 4.
        The asset must be 16x9
    2. 2.
      Splash Image URL (Vertical):
      1. 1.
        This additional, vertical holding card will appear on your player when you are not LIVE.
      2. 2.
        Image should be located from an accessible URL and must be encoded.
        1. 1.
          To encode the URL use this tool to paste it and encode: URL Encoder
      3. 3.
        PNG, JPEG and GIF can be used here
      4. 4.
        Asset must be 9x16
    3. 3.
      Accent Color:
      1. 1.
        Allows you to customize the colours used on the Chat, SHOP and VOTE buttons
      2. 2.
        Uses HEX code, e.g. the code for green 00FF00.
    4. 4.
      Live Title:
      1. 1.
        If entered, this will be displayed above your live player block.
    5. 5.
      Past Recordings Group Title:
      1. 1.
        If entered, and the section contains any past broadcast recordings, this will be displayed above the first recording.
    6. 6.
      Aspect ratio
      1. 1.
        In order to optimize the spacing around your player, select whether you plan to broadcast in Horizontal or Vertical orientation.
  2. 2.
    Once the code has been updated click Save.
  3. 3.
    Click Exit at the top left of the screen.

Add Past Broadcast Recordings

Depending on your account's plan level, you may be able to embed shoppable recordings of past broadcasts.
  1. 1.
    To add a recording to your section, click Add Block, then choose the Past Broadcast Recording block.
  2. 2.
    Enter the recording ID in the settings for this block. To find the recording ID:
    1. 1.
      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.
    2. 2.
      The recording's embed code will appear, and you can copy the recording ID from the src. Make sure you copy only the portion after /vod/.
      1. 1.
        For example, in the following embed code, the recording ID is a69c56d6-4fbb-48ac-8d89-8b7a7f59d018.
<iframe
src="https://play.stageten.tv/embed/05a782df-94f9-49ab-827b-b5f5bacdfa10/vod/a69c56d6-4fbb-48ac-8d89-8b7a7f59d018"
title=""
allow="fullscreen"
frameborder="0"
style="width: 1410px; height: 600px; position: relative"
>
</iframe>
3. Paste this recording ID into the block settings, then click Save.
If you have any questions or require additional assistance, please contact Support ([email protected])