CTRL K

📤 ShareEmbed in React & Next.js

Embed in React & Next.js

Component

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

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 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.

Next: Share on Medium

More in Share

Share your public LiveDemo: Publish your LiveDemo and share a public link so prospects and customers can explore the interactive demo without signing up.
Public & Private Access: Control who can view your LiveDemo with the Public access switch, and what viewers see when a demo is private.
Custom Links: Create a LiveDemo link per prospect or campaign with its own variable values, so one demo shows each viewer their own name.
Custom Domain: Share LiveDemos and AI Demo Agents from your own subdomain, like demos.acme.com, with one CNAME record and automatic HTTPS.
Preview & Fullscreen: Preview your LiveDemo as viewers see it and present it fullscreen on a sales call or at an event.
Embed on website: Embed your LiveDemo on your website, landing pages or help center with a responsive iframe snippet.
URL Parameters: Control where an embedded LiveDemo starts, autoplay, audio, custom links and personalization with URL parameters.
Embed Events: Listen to step changes from an embedded LiveDemo and move it to any step from your page with postMessage.
Embed in WordPress: Add an interactive LiveDemo to a WordPress page or post with a Custom HTML block, in the block editor or Elementor.
Embed in Webflow: Add an interactive LiveDemo to a Webflow page or CMS collection with a Code Embed element.
Embed in Framer: Add an interactive LiveDemo to a Framer site with the Embed component.
Embed in Wix: Add an interactive LiveDemo to a Wix site with the Embed HTML element.
Embed in Squarespace: Add an interactive LiveDemo to a Squarespace page with a Code block.
Embed in HubSpot Pages: Add an interactive LiveDemo to HubSpot landing pages, website pages, blog posts and knowledge base articles.
Embed in Notion: Add an interactive LiveDemo to a Notion page for internal docs, onboarding wikis and public Notion sites.
Embed in Zendesk & Help Centers: Add interactive LiveDemos to Zendesk Guide, Intercom, HelpScout and other help center articles.
Share on Medium: Share your LiveDemo in Medium articles so readers can try your product right inside the post.
Share on X (Twitter): Share your LiveDemo on X (Twitter) with a link preview that drives followers into the interactive demo.
Share into email platforms: Add your LiveDemo to marketing and sales emails with a preview image that links readers straight into the interactive demo.
Export in GIF or Video: Export your LiveDemo as a GIF or video to use in social posts, docs, presentations and anywhere iframes are not supported.