Embed an activity anywhere

Get the embed code

The copied code looks like this:

<iframe
  src="https://learn.your-school.com/embed/your-school/course/9f2a…/activity/0b3c…"
  width="100%"
  height="600"
  style="border:0"
  allow="fullscreen; autoplay"
  allowfullscreen
  data-learnhouse-embed
></iframe>
<script src="https://learn.your-school.com/embed.js" async></script>

The iframe works on its own. The embed.js script is optional: it fits the iframe to its content and lets your page listen to what learners do. Add it once per page, however many activities you embed.

Try the options

Change the values below and copy the result. Embed URLs use the bare ids, so the builder drops the course_ and activity_ prefixes if you paste full ids.

<iframe
  src="https://learn.your-school.com/embed/your-school/course/9f2a…/activity/0b3c…"
  width="100%"
  height="600"
  style="border:0"
  allow="fullscreen; autoplay"
  allowfullscreen
  data-learnhouse-embed
></iframe>
<script src="https://learn.your-school.com/embed.js" async></script>

URL parameters

What can be embedded

Only published activities embed. Visitors see what a signed-out visitor of your site would see, so the course has to be public for the content to show.

Sizing

With embed.js on the page, the iframe takes the height of its content and keeps following it as images load and blocks expand. The height attribute is only the starting height, used until the activity has loaded.

To keep a fixed height and let the activity scroll inside the frame, leave the script out, or opt one iframe out:

<iframe src="…" height="600" data-learnhouse-embed data-learnhouse-autoresize="false"></iframe>

Events

embed.js turns what happens inside the activity into DOM events on the iframe. They bubble, so one listener on document covers every embed on the page. The details are in event.detail.

<script>
  document.addEventListener('learnhouse:complete', (event) => {
    markLessonDone(event.detail.activityId)
  })
  document.addEventListener('learnhouse:media', (event) => {
    if (event.detail.action === 'ended') analytics.track('video_finished', { activity: event.detail.activityId })
  })
</script>

Every detail also has activityId: the bare id from the embed URL.

Any site can frame an embed, so the events carry no content: no media URLs, no link targets, and one unavailable signal whatever the cause. For the full details, render the activity with the React component, whose events include them.

Without the script

The events come from postMessage messages the embed sends to its parent page, so you can also read them yourself:

window.addEventListener('message', (event) => {
  if (event.origin !== 'https://learn.your-school.com') return
  const message = event.data
  if (message?.source !== 'learnhouse' || message.version !== 1) return
  // message.type is ready, resize, complete, media, link_click or unavailable
})

Check event.origin against your LearnHouse address, since any frame on the page can post messages.

Performance

The embed renders the activity without starting the editor, and loads each block's code only when the activity uses that block. A text-and-quiz lesson loads a fraction of what the full course player does.

Embed vs. the React component