Experience widget · Next.js

Experience widget — Next.js

This is the site-wide corner widget pattern. Fork it, run locally, and place the same launcher on your marketing or support pages.

Run locally

From the repo root, ./start runs all examples (or ./start sveltekit / ./start nextjs / ./start react-vite for those frameworks). To run only this one:

cd examples/experience-widget/nextjs
npm install
npm run dev
# http://localhost:4002

Local URL: http://localhost:4002

Experience id

The demo uses a single public experience id (exp_T0I7ACMQLBMPG6K) written directly in the page.

Liforma integration

Load the CDN script and mount the experience widget custom element:

'use client';

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

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

Key files

• app/Demo.tsx — <ExperienceWidget /> from @liforma/client/react

Related docs

• Embed an Experience
• Web Component reference
• Experience on Meet — hosted experience without the lesson app UI

Use the Liforma Experience widget Next.js App Router example as source material.

Source repo folder: examples/experience-widget/nextjs

Start from `Demo.tsx` — that is the integration.

Preserve:
- `<ExperienceWidget />` from `@liforma/client/react`
- `'use client'` on the Experience mount component
- import from `@liforma/client/react` (not `/next` — that export is the session-route helper)
- `position="bottom-right"` (self-positioned FAB — no host corner CSS required)
- `prefetch="idle"` for one-gesture expand
- TypeScript and normal CSS (no Tailwind)

Adapt:
- branding
- experience id
- surrounding marketing page copy