> Add an interactive LiveDemo to a React or Next.js app with a small responsive iframe component and listen to step events.

Canonical: https://livedemo.ai/docs/share/embed-in-react-nextjs/

# Embed in React & Next.js

## Component

```jsx
export default function LiveDemo({ workspaceId, demoId, step = 1 }) {
    const src = `https://story-api.livedemo.ai/workspaces/${workspaceId}/stories/${demoId}/preview?step=${step}&embed`

    return (
        <div style={{ position: 'relative', paddingBottom: 'calc(56.25% + 41px)', height: 0 }}>
            <iframe
                src={src}
                title="Interactive demo"
                loading="lazy"
                allowFullScreen
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0, borderRadius: 6 }}
            />
        </div>
    )
}
```

Get `workspaceId` and `demoId` from the `src` in **Share → Embed → Website**. Turn on **Share → Public access** first.

## Listen to steps

```jsx
import { useEffect } from 'react'

useEffect(() => {
    const onMessage = (event) => {
        if (event.origin !== 'https://story-api.livedemo.ai') return
        if (event.data?.type === 'step_index_changed') {
            console.log('step', event.data.state.stepNumber)
        }
    }
    window.addEventListener('message', onMessage)
    return () => window.removeEventListener('message', onMessage)
}, [])
```

See [Embed events](https://livedemo.ai/docs/share/embed-events/) for `changeStep`.

## Next.js notes

- The component has no browser-only code, so it renders on the server. Put the `useEffect` listener in a client component (`'use client'`).
- If your site sends a Content Security Policy, add `frame-src https://story-api.livedemo.ai`.

## Personalize

Pass the logged-in user's name with the `vars` [URL parameter](https://livedemo.ai/docs/share/url-parameters/#vars).

---

Next: [Share on Medium](https://livedemo.ai/docs/share/share-on-medium/)