Guided practice · Vanilla HTML

Guided practice — Vanilla HTML

This implementation is available in the repository. Fork it, run locally, and adapt the host UI around the same Experience speak / listen APIs.

Run locally

From the repo root, ./start runs all examples (or ./start sveltekit / ./start nextjs / ./start react-vite for those frameworks). To run only this one:

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

Local URL: http://localhost:4004

Liforma integration

Load the CDN script and mount the experience custom element:

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

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

Key files

• index.html — CDN script + page structure
• app.js — Experience.startSession, speak / listen flow

Related docs

• Embed an Experience
• Web Component reference
• Experience on Meet — hosted 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
- `Experience.startSession` + `attach` / speak API usage shown in the example
- copy-paste friendly structure (index.html + app.js)

Adapt:
- branding
- scripted lines / host UI
- experience id
- surrounding page layout