How to Launch Courses in an iFrame (Embedded Launch)

By default, SCORM Cloud launches courses in a new browser window (popup). However, many integrations prefer to keep the learner within the main application by embedding the course inside an HTML <iframe>.

This guide outlines the configuration steps and best practices for successfully launching SCORM Cloud courses in an iframe.

1. Configure Launch Behavior (FRAMESET)

When launching inside an iframe, you must ensure the player stays within that frame rather than trying to break out into a new window.

You can control this by setting the SCO Launch Type and Player LaunchType to FRAMESET. This can be done in two places:

• API: Set PlayerScoLaunchType=FRAMESET in your SetCourseConfiguration request (API Configuration Settings).

• Website: In the SCORM Cloud website (Article: Changing Course Properties in SCORM Cloud).

2. Get the Launch Link

To launch a course, you first need to generate a registration launch link via the API (e.g., BuildRegistrationLaunchLink). (API Reference)

The resulting URL becomes the src attribute of your iframe.

<iframe src="https://cloud.scorm.com/launch/..." width="100%" height="800px"></iframe>

3. Third-Party Cookies (Important)

Modern browsers (Chrome, Safari, Edge) and mobile devices increasingly block third-party cookies.

• Since your application is on yourdomain.com and the iframe is on cloud.scorm.com, the browser treats the SCORM Cloud session cookie as "third-party." If blocked, the course will fail to launch or track progress.

• The Solution: Use Content Vault (Article: Cookieless Content Authorization in SCORM Cloud (Content Vault).

Content Vault authorizes the learner using a short-lived token and IP address validation instead of a traditional cookie.

Options: How to enable Content Vault: 

• Using BuildRegistrationLaunchLink: Pass the launchAuth parameter when building your launch link:

{
    "redirectOnExitUrl": "https://www.somedomain/",
    "launchAuth": {
        "type": "vault",
        "options": {
            "ipAddress": true,
            "fingerprint": false,
            "expiry": 43200
        }
    }
} 

• Application Level: Set at the Application level which would affect all registrations.
   

{
    "settingId": "LaunchAuthType",
    "value": "vault",
}

4. Manage the "Exit" Behavior

When a learner finishes a course inside an iframe, the player needs to know where to go next. Unlike a popup window, which simply closes, an iframe needs to redirect the user back to your application.

1. Set the Redirect URL: Include a redirectOnExitUrl in your launch link configuration.

2. Course Exit Button: Ensure the course content itself has a functioning "Exit" or "Quit" button.

   • Note: Without an internal exit button, the learner may be stuck on the final slide with no way to trigger the redirect.

3. The Handshake: When the learner clicks "Exit," SCORM Cloud will redirect the iframe to your redirectOnExitUrl.

   • Pro Tip: Your redirect page can contain JavaScript (e.g., window.parent.postMessage) to notify the parent window that the course is complete, allowing you to collapse the iframe or navigate the user to their dashboard.