Guide 5 min readUpdated July 2026
How to Embed a Product Demo on Your Website
One embed snippet, the right placement, and a demo that works on every device.
Once your interactive demo is published, embedding it is a single snippet — the same idea as embedding a video, but the visitor gets to click through your real product instead of watching. This guide covers the how and, just as importantly, the where.
Grab your embed snippet
In your demo's publish panel, copy the embed code. It's a small responsive iframe that scales to its container, so it looks right on desktop and mobile without extra work. You can also forward your brand accent color so the loading state matches your site while the demo warms up.
Paste it into your site
- Custom / HTML sites — paste the snippet directly where you want the demo to appear.
- Webflow — drop an Embed element into the layout and paste the snippet inside it.
- Framer — add a Code / Embed component and paste the snippet.
- WordPress — use a Custom HTML block, not the visual editor, so the tags aren't escaped.
- Landing-page builders (Unbounce, Instapage, etc.) — use their HTML/embed widget.
Keep it above the fold
The demo is your highest-intent asset. Placing it where visitors land — rather than buried at the bottom of the page — is usually the single biggest lever on how many people actually start it.
Best placements, ranked
- 1Homepage hero — let the product sell itself the moment someone arrives.
- 2Pricing page — buyers with budget intent respond strongly to a hands-on demo.
- 3Feature pages — embed the demo for the exact feature the page describes.
- 4Sales emails — link the shareable demo URL for warm outbound.
- 5Paid-ad landing pages — turn expensive clicks into interactive exploration.
Make it load fast
A demo that hangs on a blank frame loses viewers. Modern interactive demos stream their steps and show a branded loading skeleton, so the first screen appears instantly and later steps hydrate as the viewer clicks. If your tool doesn't do this, keep demos short so nothing stalls.
Ship it
Build a demo free in Mirage, hit publish, copy the embed, and drop it above the fold on your highest-intent page. That's the whole loop.
Build your first demo free.
Capture your real product, add hotspots, and embed anywhere in about 10 minutes. No credit card, no sales call.
Start freeFrequently asked questions
How do I embed an interactive demo on my website?
Publish the demo, copy the embed snippet from the publish panel, and paste it into an HTML/embed block on your page. It's a responsive iframe that scales to fit desktop and mobile automatically.
Can I embed a demo in Webflow, Framer, or WordPress?
Yes. Use the platform's HTML/embed element (Embed in Webflow, a Code component in Framer, a Custom HTML block in WordPress) and paste the snippet inside it.
Where should I put the demo for the best conversion?
Above the fold on high-intent pages — the homepage hero, pricing page, and relevant feature pages tend to perform best because visitors already want to see the product.