Ctrlk
Contact Support

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 or by time spent and demo loaded.

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.

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.

spinner

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.

  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 <div>)

  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.

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.

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.

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.

Example event payload

PreviousExport to MP4/GIFNextMulti-Demo Sharing

Last updated

Was this helpful?