Embed in Zendesk & help centers
Interactive demos in help articles show users the exact clicks, instead of a wall of screenshots.
Get the code
- Turn on Share → Public access in the LiveDemo editor.
- Open Share → Embed and click Copy code next to Website.
Zendesk Guide
- Edit the article and click the Source code button in the toolbar.
- Paste the code where the demo should go and click Save.
- Publish.
If the iframe disappears on save, your help center blocks unknown iframes. Ask a Guide admin to allow iframes from story-api.livedemo.ai in Guide's security settings.
Other help centers
| Help center | How |
|---|---|
| Intercom Articles | Insert a video or iframe block and paste the embed URL (https://story-api.livedemo.ai/...). If iframes aren't allowed, link to the demo |
| HelpScout Docs | Use the code view (<>) of the article editor |
| Document360, GitBook, ReadMe | Use their HTML or embed block |
Most of these accept the src URL instead of the full code.
Tips for help articles
- Make short demos (5–10 steps), one per task.
- Add a voiceover or turn on Navigation Tabs.
- Write the steps as text under the demo too, for search engines and screen readers.
- Recipe: Help center guides.
Next: Embed in React & Next.js
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 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.