liforma docs

Embed an Avatar Experience

Add a Liforma avatar to your web app.

Choose your integration

MethodBest for
Svelte componentSvelte / SvelteKit apps
Web componentReact, Vue, plain HTML, no-code tools
JavaScript SDKCustom UI, voice-only, programmatic control
Hosted playerLink or iframe to player.liforma.ai

Svelte embed

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

<LiformaExperience experienceId="exp_01DEMO1SPANISHCAFE" />

Web component embed

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

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

Sizing

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

<div class="avatar-stage">
  <LiformaExperience experienceId="exp_01DEMO1SPANISHCAFE" />
</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;">
  <LiformaExperience experienceId="exp_01DEMO1SPANISHCAFE" />
</main>