Body Alignment Assessment - postMessage Integration

This documentation describes how to integrate the Body Alignment Assessment tool into your application as a parent frame, with focus on the iframe messaging system.

Embedding the Assessment Tool

Create an iframe element in your application to load the Body Alignment Assessment:

<iframe
  id="bodyAlignmentFrame"
  src="<https://your-domain.com/assessment/body-alignment/{bodyAlignmentResultId}>"
  width="100%"
  height="700px"
  frameborder="0"
></iframe>

Note: The bodyAlignmentResultId is needed when loading a specific assessment to view, modify or complete.

Message Communication Protocol

The embedded Body Alignment Assessment tool communicates with your parent application through the postMessage API. The frame sends different message types at key points in the assessment workflow.

Message Structure

Messages sent from the iframe follow this format:

{
  type: "MESSAGE_TYPE",
  data: {
    bodyAlignmentResultId: "unique-id-string",
    result: { /* complete body alignment result object */ }
  }
}

Listening for Messages

Set up an event listener in your parent application:

window.addEventListener("message", function (event) {
  // For production, validate event.origin
  // if (event.origin !== '<https://trusted-domain.com>') return;

  const { type, data } = event.data;
  const { bodyAlignmentResultId, result } = data || {};

  // Handle different message types
  switch (type) {
    case "INITIALIZED":
      handleInitialized(bodyAlignmentResultId, result);
      break;
    case "RESULT_SAVED":
      handleResultSaved(bodyAlignmentResultId, result);
      break;
    case "REPORT_GENERATED":
      handleReportGenerated(bodyAlignmentResultId, result);
      break;
  }
});

Message Types

1. INITIALIZED

Sent when the assessment page first loads and initializes with the given body alignment result ID.

function handleInitialized(bodyAlignmentResultId, result) {
  console.log("Assessment initialized with ID:", bodyAlignmentResultId);
  // Update UI to reflect initialization status
  // Store the assessment data in your application state
}

2. RESULT_SAVED

Sent when:

• The result page first loads
• Initial pose data and measurements are saved

function handleResultSaved(bodyAlignmentResultId, result) {
  console.log("Body alignment results saved with ID:", bodyAlignmentResultId);
  // Example: Update UI to indicate saved state
  showSavedNotification();
  // Store complete result data
  storeAssessmentData(result);
}

3. REPORT_GENERATED

Sent after the AI has finished generating the analysis report.

function handleReportGenerated(bodyAlignmentResultId, result) {
  console.log("AI report generated for ID:", bodyAlignmentResultId);
  // The result parameter includes the complete report
  // Example: Update UI to show report is available
  showReportReadyNotification();
  updateStoredReport(bodyAlignmentResultId, result);

  // Enable related functionality now that report is ready
  enableReportFeatures(bodyAlignmentResultId);
}

Complete Integration Example

document.addEventListener("DOMContentLoaded", function () {
  const assessmentFrame = document.getElementById("bodyAlignmentFrame");
  const assessmentStatus = document.getElementById("assessmentStatus");
  const reportViewer = document.getElementById("reportViewer");

  // Set up message listener
  window.addEventListener("message", function (event) {
    // In production, validate origin
    // if (event.origin !== '<https://trusted-domain.com>') return;

    const { type, data } = event.data;
    const { bodyAlignmentResultId, result } = data || {};

    switch (type) {
      case "INITIALIZED":
        assessmentStatus.textContent = "Assessment tool initialized";
        break;

      case "RESULT_SAVED":
        assessmentStatus.textContent = "Pose assessment complete";
        // Store the full assessment result
        window.sessionStorage.setItem(
          `bodyAlignment_${bodyAlignmentResultId}`,
          JSON.stringify(result),
        );
        break;

      case "REPORT_GENERATED":
        assessmentStatus.textContent = "Analysis report ready";

        // Store the complete result with report
        window.sessionStorage.setItem(
          `bodyAlignment_${bodyAlignmentResultId}`,
          JSON.stringify(result),
        );

        // Enable report view button
        document.getElementById("viewReportBtn").disabled = false;
        document.getElementById("viewReportBtn").dataset.resultId =
          bodyAlignmentResultId;

        // Display the report directly if needed
        if (result.report) {
          reportViewer.innerHTML = formatMarkdownReport(result.report);
          reportViewer.classList.remove("hidden");
        }
        break;
    }
  });

  // Handle view report button click
  document
    .getElementById("viewReportBtn")
    .addEventListener("click", function () {
      const resultId = this.dataset.resultId;
      if (resultId) {
        assessmentFrame.src = `https://your-domain.com/assessment/body-alignment/${resultId}/result`;
      }
    });
});

Security Considerations

1. Origin Validation: In production, always validate event.origin to ensure messages come from your trusted domain
2. Data Handling: The body alignment result contains sensitive user data - handle according to your privacy policy
3. Error Handling: Implement error handling for cases where messages are malformed or expected messages aren't received

Troubleshooting

• Messages not received: Check browser console for cross-origin errors; ensure Content Security Policy allows communication
• Missing data: Verify the iframe has fully loaded before expecting messages
• Iframe loading issues: Ensure the body alignment result ID exists and is accessible to the current user