How to Embed an Interactive Demo on Your Website (Step by Step)

Four placements carry almost all the value, roughly in this order:

• Homepage, beside the hero — highest traffic, so even small conversion lifts compound.
• Pricing page — next to the tier people hesitate over, showing exactly what it unlocks.
• Feature pages — one focused demo per capability, answering “can it do X?” concretely.
• Comparison and alternatives pages — unusually high-intent traffic already deciding between vendors.

Above the fold beats below it, and beside the headline beats a separate section further down. If the demo requires scrolling to discover, most visitors will not.

An embedded demo is not the same as a standalone one. It shares attention with the surrounding page, so it needs to be shorter — four to six steps for a homepage embed. It should also open on something visually valuable, since the first frame is effectively an image on your page whether or not anyone presses play.

Do not gate an embedded demo on your homepage. A lead form appearing inside your hero section undermines the reason the demo is there. Save gating for paid landing pages, as covered in product demo examples.

Most demo tools, Demorta included, give you an iframe snippet from the demo’s share settings. Paste it wherever your site accepts HTML — a Webflow embed block, a WordPress custom HTML block, or directly into your React or Next.js component.

The one thing worth getting right is the aspect ratio. Fixed pixel heights break on mobile. Wrap the iframe in a responsive container instead, so it scales with the column it sits in:

<div style="position:relative;width:100%;padding-top:62.5%">
  <iframe
    src="https://demorta.com/embed/YOUR_SHARE_SLUG"
    style="position:absolute;top:0;left:0;width:100%;height:100%;border:0"
    allowfullscreen
    loading="lazy"
    title="Product demo"
  ></iframe>
</div>

The padding-top percentage sets the aspect ratio — 62.5% gives you 16:10. Use 56.25% for 16:9. Keep loading="lazy"on any embed below the fold so it does not compete with your page’s initial render.

A meaningful share of your traffic is on a phone, and demos are the element most likely to break there. Check three things specifically: that text inside demo steps is legible without pinch-zooming, that the container does not force horizontal scrolling on the page, and that tapping a step advances it reliably.

If your captured screens contain dense text, consider a mobile-specific demo built from zoomed-in captures. Shrinking a desktop screenshot to phone width usually makes it unreadable.

Once it is live, three numbers tell you whether the placement is working: start rate(how many page visitors begin the demo — a placement problem if low), completion rate(how many finish — a length or content problem if low), and step-level drop-off (where they quit, which usually points at a confusing step).

The one comparison worth setting up properly is signup rate for visitors who engaged with the demo versus those who did not. That is what tells you whether to invest in more demos or something else entirely.

• Fixed-height iframes that break on every screen size but the one you tested.
• Autoplay with sound — browsers block it, and visitors resent it.
• Burying the demo three scrolls down where most visitors never reach it.
• Embedding a 20-step demo when the page only warrants five.
• Letting it go stale after a UI redesign, so the demo shows a product that no longer exists.

You can publish and embed a demo on a free Demorta account — embedding is not a paid-only feature.