Embedding Templates

You can embed any saved template from your Streamshapers Account as an iframe – perfect for previews on your website, client portals, streaming overlays, or integration into custom control panels.

Embedding is currently a beta feature

Let us know if you run into issues or have suggestions.

How to Get an Embed Link

To embed a template, it must be saved in your Streamshapers account.

Step-by-step:

1. Go to your Streamshapers Dashboard
2. Open a saved template
3. Click on Generate Embed
4. Configure your settings (see below)
5. Copy the generated iframe code to your website

Embed Configuration Options

When generating an embed link, you can configure:

• iframe Aspect ratio: Fixed (e.g. 1920×1080) or responsive
• Controls inside iframe: Show or hide basic playback controls (play, stop, next, update)

These settings will be reflected in the iframe URL as query parameters.

Basic example of how to embed a template into your website:

<iframe
  src="https://embed.streamshapers.com/abcdef123456?controls=true"
  width="100%"
  height="auto"
></iframe>

Controlling via JavaScript

You can control embedded templates using the postMessage API. This allows you to trigger actions like play, stop, or dynamic content updates from your own webpage or control panel.

Why this is awesome

By controlling your embedded templates via JavaScript, you can build your own custom control interfaces – for example:

• Add start/stop buttons to your website
• Dynamically update texts, scores, or images without reloading the page
• Sync graphics with live data (e.g. a scoreboard, schedule, or news ticker)
• Remotely trigger animations or transitions in response to events

This gives you full flexibility without touching the template itself – perfect for automation, live control, or interactive experiences.

Example:

Sending Commands to the Embedded Template

const iframe = document.querySelector('iframe');

// Start the animation
iframe.contentWindow.postMessage({ action: 'play' }, '*');

// Stop and reset
iframe.contentWindow.postMessage({ action: 'stop' }, '*');

// Go to the next animation step
iframe.contentWindow.postMessage({ action: 'next' }, '*');

// Simple update command for example when using external sources like google sheets
iframe.contentWindow.postMessage({ action: 'update' }, '*');

// Send new content to the template
iframe.contentWindow.postMessage({
  action: 'update',
  data: {
    _title: 'Live Now',
    _subtitle: 'From Berlin'
  }
}, '*');

Supported Actions

Action	Description
play	Starts the animation
stop	Stops and resets the template
next	Triggers the next step (if supported by the template)
update	Updates the template with or without given data

Example Embed in Action

Below is a live example of an embedded template. You can test how it behaves and responds to commands – just like it would on your own website.