How to Add an Interactive Demo to a Webflow Site
August 18, 2026
Webflow handles embedded demos well, and almost every problem people hit comes from one of two things: a fixed pixel height, or the 50,000-character limit on the Embed element.
This covers the mechanics and the responsive part, which is where most embedded demos quietly fail.
The basic embed
- Drag an Embed element (Add panel → Components → Embed) to where the demo should sit.
- Paste the iframe your demo tool gives you. In Demorta that is the embed snippet from the demo's share panel.
- Set the wrapper, not the iframe. Give the Embed's parent div the sizing; let the iframe fill it at 100% width and height.
- Publish to see it. Webflow's designer canvas does not render third-party iframes reliably, so an empty box in the editor is normal.
Making it responsive properly
Do not give the iframe a fixed pixel height. It looks right on your monitor and letterboxes badly on a phone, which is where a growing share of your traffic actually is.
Use an aspect ratio on the wrapper instead: set the parent to `position: relative` with `padding-top: 62.5%` for 16:10, and the iframe to `position: absolute; inset: 0; width: 100%; height: 100%`. Then vary the ratio by breakpoint -- taller on mobile, wider on desktop -- because width is the scarce dimension on a phone.
The Embed character limit
Webflow caps the Embed element at 50,000 characters. A plain iframe is nowhere near that, but people paste in large inline scripts or base64 images alongside it and hit the wall.
If you are near the limit, move the extra into Page Settings → Custom Code, or into the site-wide footer code, and keep the Embed element to the iframe alone.
Where to put it
- Above the fold on the homepage if the demo IS the pitch. It outperforms a hero image for most SaaS.
- On the pricing page, showing the capability that separates the tiers.
- Not in a modal unless you must. Modals suppress the demo on mobile and hide it from anyone who does not click.
- Lazy-load below the fold. Add `loading="lazy"` to the iframe so it does not compete with your page load.
Frequently asked questions
- How do I embed an interactive demo in Webflow?
- Add an Embed element where the demo should go, paste the iframe snippet from your demo tool, and size the wrapping div rather than the iframe. The designer canvas often shows an empty box for third-party iframes, so publish before assuming it is broken.
- Why does my Webflow embed look wrong on mobile?
- Almost always a fixed pixel height on the iframe. Use an aspect-ratio wrapper instead -- position relative with a percentage padding-top, iframe absolutely filling it -- and set a taller ratio at mobile breakpoints, since width is the scarce dimension on a phone.
- What is the Webflow Embed element character limit?
- 50,000 characters. An iframe alone is far below that; people hit it by pasting large inline scripts or base64 images. Move anything extra into Page Settings custom code and keep the Embed element to the iframe itself.
Keep reading
This is what Demorta does
Click through it — the same kind of demo you can record of your own product.
Try it on your own product
Record your first interactive demo free.
Five demos on the free plan, forever. No credit card, no trial countdown, no sales call. Install the Chrome extension, click through your product once, and you have a shareable link in about ten minutes.
Start free →