> For the complete documentation index, see [llms.txt](https://docs.supademo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.supademo.com/share/exports/export-to-scorm.md). # Export to SCORM We provide a free browser-based tool that turns your Supademo link or iFrame embed into a SCORM 1.2 wrapper package you can upload to any SCORM-compatible LMS. When wrapping a Supademo demo, the generated package automatically tracks viewer progress and completion using Supademo's [embed events API](/share/embed/embed-events-api.md) or by time spent and demo loaded. {% hint style="info" %} **Free for everyone.** No Supademo plan or sign-in required. SCORM generation happens entirely in your browser: your embed code, URLs, and downloaded zip never touch Supademo's servers. {% endhint %} ### **Overview** A SCORM package is a `.zip` file an LMS unpacks and launches as a course module. The zip bundles a manifest, a launch page, and a small runtime script so the LMS can launch your content and track learner activity over the SCORM 1.2 API. This generator is different from typical "HTML to SCORM" converters: instead of bundling your content inside the zip, it wraps an iframe or URL in a thin SCORM 1.2 wrapper. Your demo, walkthrough, or page stays hosted wherever it lives. Update the demo any time without re-uploading the SCORM file. {% @supademo/embed demoId="cmp5ph1s900030j0pz72wbqd8" url="" %} **Use this tool when you need to:** * Deliver a Supademo interactive demo as a course module inside Cornerstone, Docebo, Moodle, TalentLMS, SCORM Cloud, LearnDash, Litmos, Absorb, or any other SCORM 1.2-compatible LMS * Report learner completion, score, and session time back to the LMS automatically * Wrap an existing URL or embedded experience (video, form, help center page) as an LMS course module without authoring SCORM content from scratch * Keep the underlying experience hosted and editable while the SCORM file stays static ### **Getting started** 1. Open the generator at [`supademo.com/tools/iframe-to-scorm`](https://supademo.com/tools/iframe-to-scorm). 2. Paste your Supademo link inside the textarea. The tool accepts: * A Supademo `/demo/` or `/embed/` link * The full Supademo iframe embed block (with surrounding `
`) 3. Configure the package: * **Course title** — the name your LMS displays on the module * **Course identifier** — the SCORM manifest identifier (auto-generated from the title) * **Aspect ratio + min height** — controls how the embed sizes responsively inside the LMS player * **Completion rule** — when the LMS should mark the module complete (see Completion rules) * **Show manual fallback button** — optionally adds a learner-facing "Mark complete" button for fallback or attestation 4. Click **Generate SCORM package**. A `.zip` downloads to your machine. 5. Upload the `.zip` to your LMS as a SCORM 1.2 course. The LMS unzips, reads `imsmanifest.xml`, launches `index.html`, and the wrapper begins reporting learner activity over the SCORM API. {% hint style="warning" %} **Test in your target LMS before rolling out.** SCORM behavior varies between platforms. Some LMSs restrict third-party iframes, popups, or cookies. Always upload your zip to your LMS, run a single test launch, and verify completion reports before assigning it to a cohort. {% endhint %} ### **Completion rules** Choose how the LMS module is marked complete. The default is **auto-complete on Supademo finish**, which uses real engagement signals from the Supademo embed. | Rule | When it fires | Best for | | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | **Auto-complete on Supademo finish** *(default)* |

When the embedded Supademo emits the Supademo:completed event (viewer reaches the final slide). Live progress (0–100%) also streams into cmi.core.score.raw as the viewer moves through slides.

Please note that your LLM would need to listen for these events.

| Any Supademo `/demo/` or `/embed/` URL. The most accurate option — completion reflects real engagement, not time or button clicks. | | **Complete after active viewing time** | After N seconds (default `30`) of *active* viewing. Tracking pauses if the embed scrolls off screen (via `IntersectionObserver`, ≥50% visibility) or the LMS tab goes to background (via `document.visibilityState`). | Supademo iframes (demos, videos) where you want to ensure the learner spent meaningful time on the content. | | **Complete when learner clicks a button** | When the learner clicks the "Mark complete" button rendered in the launch page. | Attestation flows, compliance modules, or content with no clear "finished" signal. Requires **Show manual fallback button** enabled. | | **Complete when launched** | The moment the SCORM module loads in the LMS. | Click-through, sign-off, or "viewed" tracking where opening the module is sufficient. | ### **Supademo event tracking** When the **Auto-complete on Supademo finish** rule is selected, the SCORM wrapper listens for `postMessage` events from the embedded Supademo iframe and translates them into SCORM API calls. The wrapper subscribes once on module load, filters for messages where `data.source === "Supademo"`, and handles each event type. | Supademo event | Trigger | SCORM API call | | ---------------------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `Supademo:load` | The Supademo demo finishes initializing in the iframe. | `LMSInitialize("")`, then `LMSSetValue("cmi.core.lesson_status", "incomplete")`. | | `Supademo:started` | The viewer first interacts with the demo (click or navigation). | No-op. Used as an engagement signal in future versions. | | `Supademo:slideChange` | The viewer navigates to a different slide. | No direct call; `Supademo:progress` is emitted alongside. | | `Supademo:progress` | Emitted with each `slideChange`, includes a percentage (`0–100`). | `LMSSetValue("cmi.core.score.raw", percentage)`, `score.min=0`, `score.max=100`, then `LMSCommit("")`. The LMS sees progress climb in real time. | | `Supademo:completed` | The viewer reaches the final slide. | `LMSSetValue("cmi.core.lesson_status", "completed")`, `LMSSetValue("cmi.core.score.raw", "100")`, `LMSSetValue("cmi.core.session_time", "HH:MM:SS")`, then `LMSCommit("")`. | | `Supademo:close` | The viewer presses ESC. | No-op. Session time is committed on the next `LMSCommit`. | {% hint style="info" %} **Progress reporting works for every completion rule.** Even if you pick `Complete after active viewing time` or `Manual button`, the wrapper still pipes `Supademo:progress` into the LMS score field for any Supademo embed. Only the **completion** trigger is gated by the selected rule. {% endhint %} **Example event payload** ```json { "source": "Supademo", "type": "Supademo:progress", "demoId": "cmp33sl3904h9gh7abylz7nl0", "currentSlide": 3, "totalSlides": 5, "percentage": 60 } ```