Embed an Avatar Experience

How Liforma embedding works

All visual Liforma Experience integrations use the same hosted Liforma Player on player.liforma.ai. SDK components and web components mount this player in an iframe. Developers may also embed the player iframe directly. oEmbed and Iframely are optional discovery mechanisms that resolve to that same player — they do not replace the SDK or change the player API.

Your application / platform
        │
        ├── @liforma/client
        ├── Svelte / React / web component
        ├── direct iframe
        ├── oEmbed
        └── Iframely / Canva
                  │
                  ▼
          player.liforma.ai/embed
                  │
                  ▼
        Liforma Experience runtime

Choose your integration

Method	Best for
HTML / CDN	Plain HTML, WordPress, Webflow, Squarespace, and other CMS embeds
Svelte component	Svelte / SvelteKit apps
React component	React (Vite) and Next.js client components
Next.js session helper	App Router server-session mint routes
ExperienceThumbnail	Gallery cards / layered CDN previews (all frameworks)
Web component attributes	Attribute reference for `<liforma-experience>`
JavaScript SDK	Custom UI, voice-only, programmatic control
Hosted player	Link or iframe to `player.liforma.ai`
oEmbed / Iframely	CMSs, LMSs, and platforms (including Canva) that discover rich embeds

HTML embed

index.html

<!-- 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_T0I7ACMQLBMPG6K"></liforma-experience>
</div>

Svelte embed

<script>
  import { Experience } from '@liforma/client/svelte';
<\/script>

<Experience experienceId="exp_T0I7ACMQLBMPG6K" />

React embed

In Next.js App Router, put this in a client component ('use client'). See Experience (Next.js) for server-session routes.

Demo.tsx

import { Experience } from '@liforma/client/react';

export function Demo() {
  return <Experience experienceId="exp_T0I7ACMQLBMPG6K" />;
}

Sizing

The avatar fills its container. Set dimensions on the parent element:

<div class="avatar-stage">
  <Experience experienceId="exp_T0I7ACMQLBMPG6K" />
</div>

<style>
  .avatar-stage {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
  }
</style>

Full viewport

For immersive experiences, let the component fill the viewport:

<main style="width: 100vw; height: 100dvh;">
  <Experience experienceId="exp_T0I7ACMQLBMPG6K" />
</main>