SDK Reference

SDK Options

The embedLesson() function accepts the following options:

Option	Type	Required	Description
`container`	`HTMLElement \| string`	Yes	Container element or CSS selector
`token`	`string`	Yes	JWT token from sign-token endpoint (lessonId and versionId are automatically extracted)
`baseUrl`	`string`	No	Base URL of your Teacharium instance (default: “https://www.teacharium.io ”)
`width`	`string`	No	Iframe width (default: “100%“)
`height`	`string`	No	Iframe height (default: “600px”)
`className`	`string`	No	Additional CSS classes for iframe
`autoStart`	`boolean`	No	Skip the start button and begin the lesson immediately (default: `false`)
`resume`	`boolean`	No	Resume from where the learner left off (default: `true`). Set to `false` to always start fresh
`onLoad`	`function`	No	Callback when lesson iframe loads
`onComplete`	`function`	No	Callback when lesson completes
`onProgress`	`function`	No	Callback for progress updates
`onError`	`function`	No	Callback for errors
`onEvent`	`function`	No	Callback for all lesson events (recommended)

Event Handling

onEvent (Recommended)

The onEvent callback receives every event from the lesson’s internal event system. This is the most flexible way to track lesson activity:


onEvent: (type, payload) => {
  console.log(`Event: ${type}`, payload);
 
  // Handle specific events
  if (type === "lesson_completed") {
    trackCompletion(payload);
  }
};

Common event types include:

Event Type	Description
`play`	User clicked the start button
`lesson_started`	Lesson playback began
`section_started`	Entered a new section
`step_started`	Entered a new step
`lesson_completed`	User completed the lesson
`variable_changed`	A lesson variable was updated

All events include a type field and a timestamp (ISO string).

Convenience Callbacks

The SDK also provides specific callbacks for common events:

onLoad

Fired when the lesson iframe has finished loading:


onLoad: () => {
  console.log("Lesson is ready to play");
  // Hide loading indicator, etc.
};

onComplete

Fired when the user completes the entire lesson:


onComplete: (data) => {
  console.log("Lesson completed!");
  console.log("Lesson ID:", data.lessonId);
  console.log("Completed at:", data.completedAt);
  console.log("Total steps:", data.totalSteps);
 
  // Track completion in your system
  trackCompletion(data);
};

onProgress

Fired when the user progresses through the lesson:


onProgress: (data) => {
  const percent = (data.currentStep / data.totalSteps) * 100;
  console.log(`Progress: ${percent.toFixed(1)}%`);
 
  // Update progress bar
  updateProgressBar(percent);
};

onError

Fired when an error occurs:


onError: (error) => {
  console.error("Lesson error:", error.message);
  // Show error message to user
  showErrorNotification(error.message);
};

API Reference

For detailed API documentation, see:

Sign Token API - Generate JWT tokens for embedding
List Lessons API - List available lessons