Lesson Play iFrame - postMessage Integration

1. Sending Commands to the iFrame (Parent → iFrame)

Use this code pattern to communicate with the embedded lesson player iframe:

Send command to lesson iframe

// Get iframe reference (use your preferred selector)
const iframe = document.getElementById("lesson-iframe");

// Send commands to iframe
iframe.contentWindow.postMessage(
  {
    type: "COMMAND_TYPE", // See supported types below. Optional additional parameters
    timestamp: Date.now(),
  },
  "https://www.uat.gofa.app", // Target origin (must match iframe's domain)
);

Supported Command Types

Command Type	Description	Example Use Case
skipSession	Skips the current lesson session	User wants to skip to next lesson
skipCalibration	Skips the calibration process	User wants to bypass device setup
pauseVideo	Pauses any playing video	Parent wants to pause media
playVideo	Resumes paused video	Parent wants to resume media
pausePlay	Pauses all media/interactions	Parent needs full pause state
unpausePlay	Resumes from full pause state	Restore normal operation
startCountdown	Triggers countdown sequence	Begin exercise timer

• Must be triggered by user action (button click, etc.)
• Use HTTPS and match target origin for security

2. Listening for Events from the iFrame (iFrame → Parent)

The lesson player will send messages to the parent window using postMessage. The most important event is FINISH_LESSON_PLAY, which notifies the parent when a lesson is completed.

Example: Listen for Lesson Completion

Listen for FINISH_LESSON_PLAY event

window.addEventListener("message", (event) => {
  // Optionally check event.origin for security
  const { type, lessonPlayId } = event.data || {};
  if (type === "FINISH_LESSON_PLAY") {
    // Lesson is finished!
    // You can show a summary, trigger analytics, or navigate as needed
    // If you used ?noAutoNav=true, you must handle navigation yourself
  }
  // Handle other message types as needed
});

About noAutoNav

If you open the lesson player with ?noAutoNav=true in the URL, the lesson page will not auto-navigate to the result page after completion. This lets the parent site fully control what happens next after receiving the FINISH_LESSON_PLAY message.

3. Example HTML and JS

Example controls and iframe

<div class="iframe-controls">
  <button onclick="sendCommand('skipSession')">Skip Session</button>
  <button onclick="sendCommand('pauseVideo')">Pause Video</button>
  <!-- ...other controls... -->
</div>
<iframe
  id="lesson-iframe"
  src="https://www.uat.gofa.app/...?noAutoNav=true"
></iframe>

sendCommand function

function sendCommand(commandType) {
  const iframe = document.getElementById("lesson-iframe");
  if (!iframe) return;
  iframe.contentWindow.postMessage(
    { type: commandType, timestamp: Date.now() },
    "https://www.uat.gofa.app",
  );
}

---

Summary:

• Use postMessage to send commands to the lesson player iframe.
• Listen for messages (like FINISH_LESSON_PLAY) from the iframe to know when a lesson is done.
• Use ?noAutoNav=true if you want to control navigation after lesson completion.

This covers both sending and receiving messages, including the noAutoNav and FINISH_LESSON_PLAY logic, and is fully compatible with your current implementation.