Examples

import { useEffect, useRef } from "react";
import { embedLesson } from "@teacharium/embed-sdk";
 
function LessonEmbed({ token, onComplete }) {
  const containerRef = useRef(null);
  const embedRef = useRef(null);
 
  useEffect(() => {
    if (containerRef.current && token) {
      embedRef.current = embedLesson({
        container: containerRef.current,
        token: token,
        // baseUrl, lessonId, and versionId are handled automatically
        onComplete: (data) => {
          console.log("Lesson completed!", data);
          onComplete?.(data);
        },
        onProgress: (data) => {
          console.log(`Progress: ${data.currentStep}/${data.totalSteps}`);
        },
      });
    }
 
    // Cleanup on unmount
    return () => {
      if (embedRef.current) {
        embedRef.current.destroy();
      }
    };
  }, [token, onComplete]);
 
  return <div ref={containerRef} style={{ width: "100%", height: "600px" }} />;
}
 
export default LessonEmbed;

<template>
  <div ref="lessonContainer" class="lesson-embed"></div>
</template>
 
<script>
import { embedLesson } from "@teacharium/embed-sdk";
 
export default {
  name: "LessonEmbed",
  props: {
    token: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      embed: null,
    };
  },
  mounted() {
    this.embed = embedLesson({
      container: this.$refs.lessonContainer,
      token: this.token,
      // baseUrl and lessonId are handled automatically
      onComplete: (data) => {
        this.$emit("complete", data);
      },
    });
  },
  beforeUnmount() {
    if (this.embed) {
      this.embed.destroy();
    }
  },
};
</script>
 
<style scoped>
.lesson-embed {
  width: 100%;
  height: 600px;
}
</style>

embedLesson({
  container: "#lesson",
  token: token,
  width: "100%",
  height: "80vh", // 80% of viewport height
  className: "responsive-lesson-iframe",
});

.responsive-lesson-iframe {
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
 
@media (max-width: 768px) {
  .responsive-lesson-iframe {
    height: 100vh !important;
    border-radius: 0;
  }
}

<div class="progress-container">
  <div class="progress-bar" id="progress-bar"></div>
  <div class="progress-text" id="progress-text">0%</div>
</div>
<div id="lesson-container"></div>

embedLesson({
  container: "#lesson-container",
  token: token,
  onProgress: (data) => {
    const percent = (data.currentStep / data.totalSteps) * 100;
    document.getElementById("progress-bar").style.width = `${percent}%`;
    document.getElementById("progress-text").textContent = `${Math.round(
      percent,
    )}%`;
  },
  onComplete: (data) => {
    // Redirect to success page or show completion message
    window.location.href = "/lesson-complete";
  },
});

.progress-container {
  width: 100%;
  height: 30px;
  background: #e0e0e0;
  border-radius: 4px;
  position: relative;
  margin-bottom: 20px;
}
 
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4caf50, #8bc34a);
  border-radius: 4px;
  transition: width 0.3s ease;
  width: 0%;
}
 
.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  color: #333;
}

const express = require("express");
const app = express();
 
app.post("/api/embed-token", async (req, res) => {
  const { lessonId, versionId, learnerId, userId, sessionId } = req.body;
 
  try {
    const response = await fetch(
      "https://www.teacharium.io/api/public/sign-token",
      {
        method: "POST",
        headers: {
          Authorization: `Bearer ${process.env.TEACHARIUM_PUBLIC_KEY}.${process.env.TEACHARIUM_SECRET_KEY}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          lessonId: lessonId,
          ...(versionId ? { versionId } : {}), // Optional: omit to use latest version
          learnerId: learnerId, // Required: anonymous identifier for the learner
          userAttributes: {
            userId: userId,
            sessionId: sessionId,
            timestamp: new Date().toISOString(),
          },
          timeout: 7200,
        }),
      },
    );
 
    if (!response.ok) {
      throw new Error("Failed to generate token");
    }
 
    const { token, expiresAt } = await response.json();
    res.json({ token, expiresAt });
  } catch (error) {
    console.error("Error generating token:", error);
    res.status(500).json({ error: "Failed to generate embed token" });
  }
});