How to embed a SCORM course in Squarespace.

You built the portfolio site on Squarespace because it looks sharp out of the box. Now you want your sample module on it — the interactive Storyline piece that actually shows the work. So you try the obvious thing: open a page, look for somewhere to drop the SCORM .zip, and… there isn't one. Squarespace will happily host a PDF or an image. It will not run your course.

That's not a bug, and you don't need a workaround plugin (Squarespace barely has plugins anyway). You need one good link to a player that already runs the module — and a five-minute decision about how to put it on the page.

Squarespace gives you the page. It can't give you the runtime. Host the course, then point a button at it.— the whole article in one line

Host it, then point Squarespace at the URL.

A SCORM package is a .zip that expects to talk to a JavaScript runtime — the thing that answers LMSInitialize()and records completion, score, and bookmarking. Squarespace serves files; it doesn't inject that runtime. So the play is always two steps: host the package somewhere that runs it, then point Squarespace at the launch URL.

Publish from Storyline, Rise, or Captivate, upload the package to a host that serves the player (Training OS gives you a stable HTTPS launch URL), and — before you open Squarespace — load that URL in a plain browser tab. If audio, completion, and resume work there, they survive the embed. If they don't, fix it at the host first. Squarespace can't repair a broken launch.

For a portfolio or a service site, treat that hosted URL as the single source of truth for launch. Whether you wrap it in a button or an iframe, the same link is doing the work — which is exactly what you want when you re-skin the page six months from now.

Two ways to put it on the page.

Once the URL works, Squarespace gives you exactly two good options. Ranked by how rarely they break on you:

<iframe
  src="https://app.trainingos.com/m/your-module"
  width="100%"  height="760"
  allow="fullscreen"
  title="Sample module — interactive SCORM demo"
></iframe>

Where Squarespace fights you.

If the embed misbehaves, it's almost always one of three Squarespace-specific things — in order of how often they bite:

1. The Code block ate your iframe.

Squarespace sanitizes Code block markup, so it can strip or rewrite <iframe>attributes when you save. If the embed renders empty — or collapses to zero height — simplify the attributes, re-paste, and re-check. If it keeps vanishing, that's your sign to use the new-tab button instead.

2. The editor preview lies to you.

The in-editor preview runs a different context than your published page. An embed can look perfect while you're editing and break the moment it's live. Always confirm on the published URL, logged out, before you call it done — the editor caches its own render of the Code block, so a refresh inside Squarespace tells you nothing about what a visitor sees.

3. The mobile breakpoint clips the player.

Squarespace stacks sections tightly on phones, and a fixed-height iframe gets cropped at the bottom — learners lose the "next" button or the submit screen, then email you that the course "won't let them finish." Bump the height, add section padding, or fall back to a link-only pattern for small viewports. On a portfolio that hiring managers open from their phone, the button is the safer default every time.

Before you hit publish.

Run this once, from a logged-out incognito window:

• The button or iframe loads the module on the live site — not the editor preview.
• Audio plays, completion fires, and resume works if your package relies on them.
• It looks right on a phone — narrow Squarespace layouts crop iframes; bump the height or fall back to the button.
• Re-open the link after any template or design change; updates love to reset block settings.

Same separation-of-concerns logic carries to other site builders, too — if you also keep work on a WordPress site, the WordPress embed walkthrough covers the plugin-and-caching gotchas, and the deeper guide to hosting SCORM ranks every place that can serve the runtime in the first place.

Frequently asked questions.