Exercise Embed

Display complete exercises without rebuilding the interface

Exercise Embed lets you show a complete exercise directly inside your product. Instead of recreating the layout, exercise visuals, and interaction states yourself, your app asks Workout API for an embed URL and renders it in an iframe.

This is useful for fitness apps, coaching platforms, member areas, workout plans, health blogs, and any product that needs a clean exercise view without owning the full presentation layer.

Recommended integration flow

The secure flow is:

Frontend -> Your backend route -> Workout API -> Your backend route -> Frontend

Your frontend should not call Workout API with a private API key. Create an internal route in your app, pass it the exercise ID, and let that server route call Workout API with your secret credentials.

Endpoint sequence

The embed flow uses an exercise code and a generated embed token. If your product already knows which exercise code to render, you can skip directly to token creation. Otherwise, start by listing or searching exercises:

GET /exercises
x-api-key: YOUR_API_KEY

Use the returned code, for example BARBELL_BENCH_PRESS, then create an exercise embed token:

POST /embed/exercises
x-api-key: YOUR_API_KEY
Content-Type: application/json

{
    "name": "Exercise embed for my app",
    "allowedOrigins": ["https://your-app.com"]
}

The API returns the raw token once, plus an embed URL and iframe snippet:

{
    "token": "raw_embed_token",
    "embedUrl": "https://api.workoutapi.com/embed/exercise/raw_embed_token",
    "iframeSnippet": "<iframe ...></iframe>"
}

To render a specific exercise, call the public iframe URL with the selected exercise code:

GET /embed/exercise/{token}?exerciseCode=BARBELL_BENCH_PRESS

Frontend usage

Once your backend has created the token, render the public embed URL like any other iframe. The raw token should be generated server-side, not by browser code:

<iframe
    src="https://api.workoutapi.com/embed/exercise/raw_embed_token?exerciseCode=BARBELL_BENCH_PRESS"
    title="Exercise embed"
    width="100%"
    height="500"
    frameborder="0"
    allowfullscreen
></iframe>

Why this matters for product teams

• Ship exercise detail screens faster.
• Keep a consistent visual presentation across your app and website.
• Avoid duplicating exercise media, rendering logic, and layout work.
• Let embedded exercise content benefit from API-side updates.
• Keep sensitive API credentials behind your own server route.

Next step

Pick the exercise your user should see, request its embed URL from your backend, then place that URL in an iframe wherever the exercise needs to appear.