ExperienceWidget

Overview

<ExperienceWidget> is the homepage / support “floating widget” pattern: a collapsed corner preview that looks like ExperienceThumbnail, then expands to an in-page overlay when the user clicks. It is separate from the thumbnail (gallery cards stay cheap) and from a full-page <Experience> embed.

Pass only experience-id (and alt). On mount the widget calls GET /v1/experiences/{id}/preview to load gallery thumb plates — no API key and no origin allowlist. Session mint and allowlist checks happen only when the user expands.

Install

npm install @liforma/client

Hello world (HTML)

Use position="bottom-right" or bottom-left (optional offset, default 16) for a paste-and-go corner FAB — ideal for CMS / WordPress. Default position="static" fills the host so you can place size and offsets with your own CSS. On desktop, the open player can reduce to a draggable portrait dock (~50% of screen height, 9:16); mobile opens near full-screen with close only. Preview images load without an allowlist; add your site origin in app.liforma.ai before users expand (session mint).

<!-- Liforma SDK: registers <liforma-experience-widget> and window.Liforma -->
<script src="https://cdn.liforma.ai/sdk/v2/client.js"><\/script>

<!-- WordPress / CMS friendly: corner placement without host CSS -->
<liforma-experience-widget
  experience-id="exp_T0I7ACMQLBMPG6K"
  alt="Talk to our barista"
  position="bottom-right"
  offset="16"
></liforma-experience-widget>

<!-- Or position="static" (default) and wrap with your own fixed host CSS -->

Svelte / React

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

<ExperienceWidget
  experienceId="exp_T0I7ACMQLBMPG6K"
  alt="Talk to our barista"
  position="bottom-right"
  offset={16}
/>

import { ExperienceWidget } from '@liforma/client/react';
// Next.js: import { ExperienceWidget } from '@liforma/client/next';

export function SiteWidget() {
  return (
    <ExperienceWidget
      experienceId="exp_T0I7ACMQLBMPG6K"
      alt="Talk to our barista"
      position="bottom-right"
      offset={16}
    />
  );
}

Loading model

Mint options

Expand uses the same mint surface as <liforma-experience>: session-endpoint, language, mode, speech-input-mode, speech-only, fit, and start-button label.

vs ExperienceThumbnail

Example

Runnable demo: examples.liforma.ai — Experience widget (local http://localhost:4002 via ./start).