Basic embed · Next.js

Basic embed — Next.js

This is the hello-world integration. Fork it, run locally, and drop the same embed into your product shell.

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/basic-embed/nextjs
npm install
npm run dev
# http://localhost:4001

Local URL: http://localhost:4001

Experience id

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

Liforma integration

Use a client component and import Experience from @liforma/client/react (not /next):

'use client';

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

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

Key files

• app/Demo.tsx — client <Experience /> from @liforma/client/react
• app/page.tsx — App Router page

Related docs

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

Use the Liforma Basic embed Next.js App Router example as source material.

Source repo folder: examples/basic-embed/nextjs

Preserve:
- `<Experience experienceId="…" />` 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)
- one public experience id (no lesson catalogue, no sessionEndpoint)
- TypeScript and normal CSS (no Tailwind)

Adapt:
- branding
- experience id
- surrounding page chrome