Experience widget · Vanilla HTML

Experience widget — Vanilla HTML

This is the site-wide corner widget pattern. Fork it, run locally, and place the same launcher on your marketing or support pages.

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/experience-widget/vanilla
npx serve . -l tcp://localhost:4002
# http://localhost:4002

Local URL: http://localhost:4002

Experience id

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

Liforma integration

Load the CDN script and mount the experience widget custom element:

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

<liforma-experience-widget
  experience-id="exp_T0I7ACMQLBMPG6K"
  alt="Talk to our barista"
  position="bottom-right"
  offset="16"
  prefetch="idle"
></liforma-experience-widget>

Key files

• index.html — CDN script + <liforma-experience-widget>
• styles.css — marketing page layout

Related docs

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

Use the Liforma Experience widget example as source material to build a vanilla HTML app.

Source repo folder: examples/experience-widget/vanilla

Preserve:
- CDN script: https://cdn.liforma.ai/sdk/v2/client.js
- `<liforma-experience-widget>` corner launcher with `position="bottom-right"`
- `prefetch="idle"` for one-gesture expand
- light collapsed mount (preview API thumb plates until click)
- copy-paste friendly structure (index.html + styles.css) — no host corner CSS required for anchored position

Adapt:
- branding
- experience id
- host page layout