How to Embed an Interactive Demo on Your Website (Step-by-Step)
A step-by-step guide to embedding an interactive product demo on your website - choosing a capture type, recording the flow, picking an embed method, optimizing for conversion, and measuring results.
To embed an interactive demo on your website, record your product flow in 5-8 steps, then paste the generated embed code - an inline iframe or a popup button - into your page's HTML. With Aceframe, the whole process from recording to a live embed typically takes under 10 minutes, no developer required.
Step 1: Choose your demo type (screenshot vs HTML capture)
Aceframe captures each step as either a static screenshot or an HTML snapshot of the live DOM. Screenshot steps are quick to capture and work on any page; HTML snapshot steps preserve real text, fonts, and layout so viewers can scroll and read fine print exactly as it appeared in your product.
The two capture types are not mutually exclusive - individual steps within a single demo can mix screenshot and HTML snapshot capture depending on what that step needs to show:
- Screenshot steps are best for UI-heavy screens like dashboards, settings panels, or anything with charts and graphics. They render as a plain image, which loads fast and looks identical everywhere.
- HTML snapshot steps are best for content-heavy screens - long forms, pricing tables, or text the viewer might want to read closely. Because the DOM is preserved, Aceframe also supports viewport panning on these steps, letting the demo scroll within the captured page instead of just showing a fixed frame.
- Free plan limit. The free plan caps demos at 12 steps, which is plenty for a focused website embed. If your flow needs more room, Pro and above remove the step cap entirely.
If you have not recorded a demo before, our full walkthrough on creating an interactive product demo covers the capture extension in more detail.
Step 2: Record your demo flow (keep to 5-8 steps)
Record your demo by clicking through the exact workflow you want visitors to see using the Aceframe Chrome extension - each click becomes one step, complete with a screenshot or HTML snapshot and the click position. For a website embed specifically, keep the flow to 5-8 steps so it finishes in under 90 seconds.
A few things make the recording cleaner before you even open the editor:
- Close notifications and extra tabs. A Slack popup or browser notification mid-recording ends up baked into your screenshot.
- Use realistic sample data. Names like "Test User" and "Acme Co" read as placeholder data - use data that looks like something your actual buyer would see.
- Resize your browser window first. A consistent window size, around 1280x800, produces the cleanest, most consistent screenshots across steps.
- Pick one workflow, not your whole product. A website embed is not the place to show everything - focus on the single feature or outcome that page is selling.
- Go slow and deliberate. You can always delete an extra step afterward in the editor, so there is no downside to taking your time during capture.
Once captured, add short annotations to each step in the editor - one or two sentences explaining what the viewer is looking at. Demos without annotations tend to confuse viewers who do not already know your product.
Step 3: Choose your embed method (iframe, popup, or script tag)
Aceframe's Embed button generates two embed codes: an inline iframe that renders the full demo directly on the page, and a popup embed that shows a button opening the demo in a modal. A separate script-tag embed (Guided Mode) overlays step-by-step guidance directly onto your own live product rather than a marketing page.
Inline embed. This is the standard choice for landing pages, feature sections, and blog posts - the demo appears in place, no click required. The generated code looks like , plus a small script that lets mouse-wheel scrolling pass through the iframe to the rest of your page. Because it uses aspect-ratio:16/9 with width:100%, it resizes automatically to fit whatever container you drop it into.
Popup embed. Use this when you want a call-to-action button on the page, with the demo only appearing once someone clicks it - useful on pricing pages or above-the-fold hero sections where you do not want the demo taking up space by default. It renders as paired with a element containing the same iframe, opening at 90% of the viewport width (capped at 960px) and closing when a visitor clicks outside it.
Script tag (Guided Mode). This is a different feature from the two above: instead of embedding a copy of your product on your marketing site, it overlays live, spotlighted tooltips directly onto your own app for onboarding. It is a single async script - - added once to your product's , similar to how you would install Google Analytics or Intercom. Guided Mode is a Pro-plan feature and is not available on the free plan.
Direct link. Not technically an embed, but worth including - Aceframe also gives you a plain URL to the demo, useful for email outreach, Slack, or attaching to a CRM record where an iframe would not work.
If you are specifically embedding into Webflow, see our Webflow embed guide for placement options like the Custom Code Embed element versus page-level custom code.
| Embed method | Best for | Effort |
|---|---|---|
| Inline iframe | Landing pages, blog posts, docs, feature pages | Low - paste one snippet |
| Popup (button + modal) | Hero sections, pricing pages, CTAs | Low - paste one snippet |
| Script tag (Guided Mode) | Onboarding overlays on your own live product | Medium - Pro plan, add to site |
| Direct link | Email, Slack, sales outreach, CRM notes | Minimal - copy and paste a URL |
Step 4: Optimize for conversion (CTA placement, gating, mobile)
Conversion-minded embeds place the demo above the fold, delay any lead-capture form until after the third to fifth step so viewers get value before being asked for anything, and rely on always-visible navigation arrows on mobile instead of hover interactions. Free-plan demos also show a locked "Try Aceframe" end screen, which paid plans can customize or remove.
A few specifics worth checking before you publish:
- CTA placement. Decide what you want the viewer to do after the demo ends - start a trial, book a call, or read a pricing page - and set that as the end-of-demo call-to-action inside the Aceframe editor, not just as a separate button on your page.
- Gating. If you turn on the Email Gate to capture leads, place it after the visitor has already seen a step or two rather than before the demo starts. A gate shown immediately kills completion rates before anyone has a reason to trust you with their email. Our guide to lead capture with product demos covers gate placement and form design in more depth.
- Branding. The free plan shows Aceframe branding on embedded demos; Pro and above remove it, which matters if the embed needs to look fully native to your own site. See pricing for the differences between plans.
- Mobile. The inline embed's
aspect-ratio:16/9scaling keeps the demo usable on small screens, and Aceframe automatically swaps to tap-visible navigation arrows on mobile instead of requiring a hover. Still, preview the embed on an actual phone before publishing - a parent container with a fixed height andoverflow:hiddencan clip the iframe.
Step 5: Measure results (completion rate, time spent, leads)
Aceframe automatically tracks views, step completion, time per step, device type, country, and referrer for every embedded demo, with no extra setup required. Start by checking completion rate and the drop-off point: if fewer than half of viewers finish, the demo is probably too long, too generic, or gated too early.
Once the embed is live, the metrics worth watching regularly are:
- Completion rate. The first post in our series on creating interactive product demos suggests aiming for 60%+ completion as a rough benchmark - below that, look at length and gating first.
- Drop-off point. Which specific step loses the most viewers? That is usually either a confusing annotation or a step that does not add enough value to justify staying.
- Time per step. Steps where viewers linger far longer than others often need a clearer annotation, not a shorter one.
- Lead conversions. If Email Gate is enabled, track how many demo viewers actually submit the form, not just how many view the demo.
- Event-level tracking. If you connect Google Tag Manager, Aceframe pushes
aceframe_demo_open,aceframe_step_advance, andaceframe_lead_captureevents to your dataLayer, so you can build funnels in whatever analytics tool you already use.
Frequently asked questions
What's the difference between an iframe embed and a script tag embed?
An iframe embed (inline or popup) shows a copy of your demo on a page you control, like a landing page or blog post - this is what most website embeds use. A script tag embed (Guided Mode) instead overlays live tooltips on your own product for onboarding, which is a different use case entirely.
Do I need to know how to code to embed an interactive demo?
No. Aceframe generates the full embed code for you - you copy and paste it into your website's HTML, a custom code block, or a page's header/footer settings. No editing of the snippet itself is required unless you want to customize sizing beyond the default responsive layout.
Will an embedded demo slow down my website?
An inline iframe loads independently of the rest of your page, and Aceframe lazy-loads demo assets, so a well-built embed should not meaningfully affect your site's load time. If a demo feels slow, check the size of the screenshots used in the editor - oversized images are the most common cause.
Can I embed the same demo in multiple places?
Yes. The same embed code can be pasted onto as many pages as you want - a product page, a blog post, and an email landing page can all point to the same demo. Each placement is tracked separately in analytics by referrer, so you can see which page drives the most engagement.
Does embedding a demo require a paid plan?
No. Inline and popup embeds are available on Aceframe's free plan, which includes 15 demos and 12 steps per demo. Paid plans remove step limits, remove Aceframe branding, and unlock features like Guided Mode - see pricing for a full comparison.
Ready to create your first interactive demo?
15 free demos. No credit card required. Set up in 60 seconds.
Start for free