# 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 } ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.supademo.com/share/exports/export-to-scorm.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.