Web Component · Liforma Docs

Overview

The <liforma-experience> web component is the HTML custom-element surface for Liforma. For the CDN hello-world, CMS paste path (WordPress, Webflow, and similar), and sizing notes, start with Experience (HTML). Prefer @liforma/client/react or @liforma/client/svelte when you are in those frameworks — they expose typed props and imperative handles.

Why `liforma-experience`?

Web components are registered as global HTML tags. The Custom Elements specification requires tag names to contain a hyphen, so plain <experience> is not valid. Tag names are also lowercase in HTML — Experience is the component and JavaScript class name, not an HTML tag.

Basic usage

index.html

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

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

Attributes

Attribute	Description
`experience-id`	Experience ID (browser mint via origins)
`session-endpoint`	Same-origin route for server-session minting
`language`	Optional `en` or `es` override
`speech-only`	Set to `"true"` for voice-only sessions (no avatar renderer / location scene)
`fit`	Optional `full` (default), `medium` (bust window), or `face`. `face` cover-zooms the scene onto the mesh face oval for inset / PIP layouts. Changing the attribute updates the live player without reminting.
`mode`	Optional `conversation` or `presenter`
`speech-input-mode`	Optional `auto`, `manual`, or `off`

HTML / Vue example

<!-- After loading https://cdn.liforma.ai/sdk/v2/client.js -->
<liforma-experience
  experience-id="exp_T0I7ACMQLBMPG6K"
  style="width: 400px; height: 600px; display: block;"
></liforma-experience>

React apps should use Experience (React) instead of the custom element when possible.

ElevenLabs compat element

For migrations, a compat element is also available:

<liforma-convai agent-id="YOUR_AGENT_ID"></liforma-convai>