Future Workspace

Embed Integration Showcase

Three parallel approaches to embedding the Future.co player. Each tile shows the rendered experience alongside the exact mechanism powering it so you can compare and reuse the code.

Script Embed

Drop-in loader via embed.js

Load <script src="https://future.co/embed.js" /> onto any page, point it at a container with data-future-workout, and the player materializes automatically.

<div
  data-future-workout="4bc821e6-353e-479e-bdb9-25ab76aebedd"
  data-width="100%"
  data-height="100%"
  style="aspect-ratio: 9 / 16; max-width: 600px; max-height: 1067px;"
></div>
<script src="https://future.co/embed.js" async></script>

Rendered Markup

Iframe Embed

Direct player iframe

Plug the player URL straight into an iframe for environments where scripts are off limits.

<div style="aspect-ratio: 9 / 16; max-height: 1067px;">
  <iframe
    src="https://future.co/embed/player?workoutId=4bc821e6-353e-479e-bdb9-25ab76aebedd"
    width="100%"
    height="100%"
    frameborder="0"
    allowfullscreen
    loading="lazy"
  ></iframe>
</div>

Rendered Markup

oEmbed

Provider metadata response

Fetch https://future.co/embed/oembed?url=https%3A%2F%2Ffuture.co%2Fembed%2Fplayer%3FworkoutId%3D4bc821e6-353e-479e-bdb9-25ab76aebedd to receive markup and metadata for dynamic embedding workflows.

fetch("https://future.co/embed/oembed?url=https%3A%2F%2Ffuture.co%2Fembed%2Fplayer%3FworkoutId%3D4bc821e6-353e-479e-bdb9-25ab76aebedd")
  .then((res) => res.json())
  .then((payload) => console.log(payload));

Response Payload

{
  "type": "rich",
  "version": "1.0",
  "title": "Future Workout",
  "provider_name": "Future",
  "provider_url": "https://future.co",
  "html": "<iframe src=\"https://future.co/embed/player?workoutId=4bc821e6-353e-479e-bdb9-25ab76aebedd\" width=\"100%\" height=\"600\" frameborder=\"0\" allowfullscreen></iframe>",
  "width": 800,
  "height": 600
}

Rendered Markup