Put a lesson on your own site

One script tag gives your page a working interactive lesson: a real editor, a real chain, goals that check themselves. It sizes itself to whatever it needs, follows your page’s light or dark theme, and fires a DOM event when a visitor completes it so you can wire it into your own analytics or gate your own content behind it.

What an embed can and cannot do

It never asks your visitors to connect a wallet and cannot sign anything. Steps that need a wallet open soci4l.net in a new tab instead.
It carries no session and sets no cookie of ours. Progress stays in the visitor’s own browser.
Lesson code runs in a sandboxed worker with no network access.
It carries a “Powered by SOCI4L” badge. Give the frame its full height and it stays out of your way in the bottom corner.

Module

TrackLessonThemePartner keyPublic and safe in HTML. Attributes traffic and completions to you, and unlocks co-branding on the badge.

Live preview

Open standalone

Paste this

<script
  src="https://soci4l.net/academy/embed.js"
  data-module="lesson/avalanche-basics/what-is-a-block"
></script>

Events

The module tells your page when a visitor finishes:

document.addEventListener('soci4l:lesson-complete', (e) => {
  console.log(e.detail.trackId, e.detail.lessonId)
})

Prefer a raw iframe? Point it at soci4l.net/embed/academy/lesson/avalanche-basics/what-is-a-block and set your own height. You lose auto-resize and the completion events; everything else works.