How to Embed an Interactive Demo on Your Website
Where to place an interactive demo on your site, how to embed it with an iframe, and how to keep the page fast and the demo effective.
3 min read
Embedding an interactive demo puts your product directly on the page where visitors are deciding whether to care. This guide covers where to place a demo, how the embed works, and the details that keep the page fast and the demo effective.
Choose the right page
A demo is most useful where a visitor is trying to understand how the product works. Good places to start:
Homepage, just below the main headline, as a product tour.
Feature pages, with one short demo per feature.
Pricing page, showing the workflow a paid plan unlocks.
Help center articles, where a customer is trying to finish a task.
Blog posts and guides, next to the step the article describes.
Start with one high traffic page, measure the results, and expand from there.
How the embed works
An interactive demo is usually embedded with an iframe: a small snippet of HTML that loads the demo inside a frame on your page. Most website builders and help center tools accept an iframe, often through a custom HTML or embed block.
In nVariant, open the demo, go to the share options, and copy the inline embed snippet. It is available as plain HTML and in versions for React, Vue, Angular, and Svelte. Paste it into an embed block on your page, publish, and the demo appears inline.
Step by step
Publish the demo so it has a public link.
Open the share options and copy the inline embed snippet.
Add an embed or custom HTML block to your page and paste the snippet.
Set the width to fill the content column and give the frame a fixed aspect ratio so the page does not jump while it loads.
Preview the page on desktop and mobile, then publish.
Keep the page fast
Because the demo loads in an iframe, the rest of your page can render first. A few habits help further:
Reserve space for the demo with a fixed height or aspect ratio so the layout does not shift when it loads.
Add the loading lazy attribute to iframes below the first screen, so they load only when the visitor scrolls near them.
Give the iframe a descriptive title attribute, such as Product tour, for screen readers.
Avoid stacking several demos near the top of one page.
Make it convert
An embedded demo should lead somewhere. Decide what a visitor who finishes the demo should do next, and put that action both inside the demo and next to it on the page.
Leave the first steps open so visitors see value before any ask.
If you want leads, add a short lead form after the key moment rather than on step one.
End with a single call to action, such as starting a trial or booking a call.
Match the demo to the page. A pricing page demo should show paid features, not the signup screen.
Other ways to share the same demo
Not every channel supports embeds. The same demo can go out as a public link, a trackable link per campaign or rep, a social post with a preview card, or an MP4 video. You can also protect a demo with a password or a lead form. See every option on the sharing and embeds page.
Check how it performs
After launch, compare pages. Look at how many visitors open the demo, how many finish it, and the step where most viewers leave. If a demo on a feature page has a low completion rate, it is usually too long for that context, and a shorter chapter often works better. The analytics guide explains which metrics to track.
Try it in nVariant
Every way to share
Public and trackable links, inline embeds, social cards, MP4 export, and gated access.
