Spanish Tutor · Vanilla HTML

Spanish Tutor — 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

cd examples/spanish-tutor/vanilla
npx serve . -l 3008
# http://localhost:3008

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_01MEET_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 Spanish Tutor example as source material to build a vanilla HTML app.

Source repo folder: examples/spanish-tutor/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