Basic embed · Vanilla HTML

Basic embed — Vanilla HTML

This is the hello-world integration. Fork it, run locally, and drop the same embed into your product shell.

Run locally

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

cd examples/basic-embed/vanilla
npx serve . -l tcp://localhost:4001
# http://localhost:4001

Local URL: http://localhost:4001

Experience id

The demo uses a single public experience id (exp_01EXAMPLES_COFFEE_BARISTA) written directly in the page.

Liforma integration

Load the CDN script and mount the web component with one experience id:

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

<liforma-experience experience-id="exp_01EXAMPLES_COFFEE_BARISTA"></liforma-experience>

Key files

• index.html — CDN script + <liforma-experience>

Related docs

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

Use the Liforma Basic embed example as source material to build a vanilla HTML app.

Source repo folder: examples/basic-embed/vanilla

Preserve:
- CDN script: https://cdn.liforma.ai/sdk/v2/client.js
- `<liforma-experience experience-id="..." />` embed
- one public experience id (no lesson catalogue)
- copy-paste friendly structure (index.html + app.js)

Adapt:
- branding
- experience id
- surrounding page layout