Experience (HTML)
Embed a Liforma Avatar Experience with a CDN script and one HTML tag — no build step. Works in WordPress, Webflow, Squarespace, Framer, Shopify, Wix, Ghost, and plain HTML sites.
Overview
Experience (HTML) is the no-build Liforma integration: load the CDN client and
drop in <liforma-experience>. Use it for plain HTML pages and CMS / site
builders — including WordPress, Webflow, Squarespace, Framer, Shopify, Wix, and Ghost — whenever you can paste custom HTML. Prefer Experience (Svelte) or Experience (React) when you are already in those
frameworks and want typed props and imperative handles. For a corner site launcher that stays
light until click, see ExperienceWidget.
Basic usage
Add the CDN script (normally in <head>), then the custom element inside a sized
container. The SDK mints a public session from your experience-id and mounts the
hosted player.
<!-- Liforma SDK: registers <liforma-experience> and window.Liforma -->
<script src="https://cdn.liforma.ai/sdk/v2/client.js"><\/script>
<div style="width: 100%; min-height: 480px;">
<liforma-experience experience-id="exp_01EXAMPLES_COFFEE_BARISTA"></liforma-experience>
</div>Prerequisites
- A published public
experienceId(e.g.exp_…) - Your site origin on the project allowlist in app.liforma.ai (scheme + host + port)
- HTTPS in production (required for microphone access)
- A container with explicit size (the element defaults to
min-height: 480px)
WordPress and other CMS hosts
For a WordPress Liforma integration, paste the snippet into a Custom HTML block (or theme header/footer). The block editor and many security
plugins strip bare <script> tags from post content — if the script is removed,
put the CDN script in the theme / Site Editor and leave only <liforma-experience> in the page.
The same pattern applies to Webflow (Embed element), Squarespace (Code block), Framer (Embed), Shopify (Custom Liquid / theme), Wix (Embed HTML), and Ghost (HTML card): allow custom HTML, allowlist the live origin, and give the embed enough height.
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 |
mode | Optional conversation or presenter |
speech-input-mode | Optional auto, manual, or off |
fit | Optional full (default) or face for inset / PIP layouts |
speech-only | Set to "true" for voice-only sessions (no avatar renderer) |
Full attribute notes and the ElevenLabs compat element: Web Component.
Direct iframe (no CDN script)
If your host blocks scripts in content, iframe the player instead. Still allowlist the parent origin for the experience:
<iframe
src="https://player.liforma.ai/embed?experienceId=exp_01EXAMPLES_COFFEE_BARISTA"
allow="microphone"
style="width: 100%; height: 480px; border: 0;"
></iframe>Live example
See the basic-embed vanilla example and its source on GitHub.