Guided practice · Vanilla HTML

Guided practice — Vanilla HTML

This implementation is available in the repository. Fork it, run locally, and adapt the lesson UI around the same Liforma web component embed.

Run locally

From the repo root, ./start runs all examples (or ./start sveltekit for SvelteKit apps). To run only this one:

cd examples/guided-practice/vanilla
npx serve . -l tcp://localhost:4002
# http://localhost:4002

Local URL: http://localhost:4002

Lesson data

Each lesson has its own experienceId in src/lib/lessons.ts (SvelteKit) or lessons.js (vanilla). Every ID maps to a Liforma Experience with a different scenario, location, and tutor prompt — for example café lessons use exp_01EXAMPLES_COFFEE_BARISTA.

Liforma integration

Load the CDN script and mount the experience custom element with the selected lesson's ID:

<script src="https://cdn.liforma.ai/sdk/v2/client.js"><\/script>

<!-- experience-id comes from the selected lesson -->
<liforma-experience experience-id="${lesson.experienceId}"></liforma-experience>

Key files

• lessons.js — lesson data
• app.js — session state and embed mount
• index.html — page structure + CDN script

Related docs

• Embed an Experience
• Web Component reference
• Avatar on Meet — hosted avatar experience without the lesson app UI

Use the Liforma Guided practice example as source material to build a vanilla HTML app.

Source repo folder: examples/guided-practice/vanilla

Preserve:
- CDN script: https://cdn.liforma.ai/sdk/v2/client.js
- `<liforma-experience experience-id="..." />` embed
- lesson list with close-before-switch behaviour
- learning goal card, session controls, session notes
- copy-paste friendly structure (index.html + app.js)

Adapt:
- branding
- lesson content
- experience IDs
- surrounding page layout