Where to Put an Interactive Demo on Your Homepage

You have a good demo. Now it has to go somewhere on the homepage, and every position competes with the hero, the logo strip and the feature grid. Where it lands decides how many visitors ever see it.

For more on this topic, read How Product-Led Teams Can Use an Interactive Demo Before the Trial and A Product Launch Demo Checklist for Small Teams.

Short Answer

Put the demo where the visitor first wonders what the product looks like, which is usually directly under the hero or inside it.

1. If the hero has room for a visual, put the demo there.
2. If not, place it as the first section under the hero.
3. Avoid burying it in a tab, a modal or the bottom of the page.

Why Placement Is Harder than It Looks

Homepage space is contested. Marketing wants the headline. Sales wants the "Book a call" button. Design wants breathing room. The demo ends up wherever there is space left, which is rarely where it helps.

• A demo below the fold is seen only by visitors who scroll that far.
• A demo behind a "Watch demo" button adds a click before the first click.
• A demo in a modal hides the page context the visitor was reading.

The Main Options

For most self-serve products, the first two positions do the work. The hero placement works when the headline is short and the layout is centred over a wide product stage. The section under the hero works when the hero needs to stay text-led.

Size and Framing

A demo is a screenshot at heart. If it is too small, the visitor cannot read the callouts.

• Give it the full content width on desktop.
• Check it at phone width. Callouts must stay readable.
• Use zoom on dense steps so the hotspot area fills the frame. In Proovyt you can zoom a step up to 3x on the hotspot, and callouts keep their size.
• Use the intro card to set expectations, such as what the demo will show.

Connect It to the Headline

The demo should prove the headline. If the headline promises "invoices in a minute," the demo should show an invoice being made, not the settings page. Read the two together. If a visitor saw only the headline and the demo's first step, would they connect them?

What to Change Once It Is Live

Watch completion rate and drop-off by step for a few weeks. Then adjust.

• High views, low completion. The demo is too long or the first steps are slow. Cut.
• Low views. The position is not working. Move it higher or make the frame larger.
• Steady drop at one step. Rewrite that callout. See measuring demo drop-off.

An Illustrative Worked Example

This example is hypothetical. A team's homepage has a two-line headline, a signup button and a static product image under it.

1. They replace the static image with the embedded demo in the same spot.
2. The intro card says what the visitor will see.
3. The end card has "Start free" and "See pricing."
4. After review, they notice viewers drop on step 2, a settings screen. They cut it and republish. The embed updates in place because the link stays the same.

Questions to Ask Before You Start

Answer these before recording. They take a few minutes and prevent most rework.

• Does the hero layout have room for a product visual?
• Which question does the demo answer, and where on the page is it asked?
• Is the demo large enough to read at desktop and phone widths?
• Does the end card ask for the same action as the page's main button?
• How will we know if the position is working?

Where Proovyt Fits (Full Disclosure)

Proovyt is an interactive demo tool, and this is our blog.

• Publish once for a hosted link and an embed snippet.
• Republishing keeps the link, so the homepage embed updates without a code change.
• Paid plans show completion and drop-off by step for embeds as well as hosted links.
• The Free plan includes 3 published demos with a small Made with Proovyt badge. Paid plans remove the badge.

See pricing, the product page and the FAQ.

Common Mistakes

• Hiding the demo behind a "Watch demo" button.
• Embedding at a size where callouts are unreadable.
• A demo that does not match the headline.
• Forgetting to check phone width.
• Leaving the old static image and the demo both on the page.

The Bottom Line

Put the demo where the question arises, make it big enough to read, and let completion and drop-off tell you whether the position works.