Embed events
An embedded demo talks to your page with postMessage.
Listen to step changes
Every time the viewer reaches a step, the demo sends step_index_changed:
window.addEventListener('message', (event) => {
if (event.origin !== 'https://story-api.livedemo.ai') return
if (event.data && event.data.type === 'step_index_changed') {
const { stepNumber } = event.data.state
console.log('Viewer is on step', stepNumber)
}
})
stepNumber starts at 1. Always check event.origin.
Listen to analytics events
The demo also sends livedemo:event messages for views, steps, completion, button clicks and leads:
window.addEventListener('message', (event) => {
if (event.origin !== 'https://story-api.livedemo.ai') return
if (event.data?.type !== 'livedemo:event') return
console.log(event.data.name, event.data.properties)
})
name is one of livedemo_demo_view, livedemo_step_view, livedemo_demo_complete, livedemo_cta_click or livedemo_lead_captured. See Google Analytics for the properties.
Move the demo to a step
const iframe = document.querySelector('iframe')
iframe.contentWindow.postMessage({ type: 'changeStep', stepNumber: 3 }, 'https://story-api.livedemo.ai')
What to build with it
- Send events to your analytics tool. See Google Analytics and Segment.
- Show a "Book a demo" button next to the embed when the viewer reaches the last step.
- Build your own chapter menu: buttons on your page that call
changeStep. - Sync the demo with the text of a help article as the reader scrolls.
Next: Preview & fullscreen
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 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.
- Embed in React & Next.js: Add an interactive LiveDemo to a React or Next.js app with a small responsive iframe component and listen to step events.
- 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.