How to Embed an Interactive Demo on Your Website

An interactive demo does the most work where buyers already are. That means your homepage, a product page, a launch post or your help center. Embedding puts the demo inside the page, so a visitor can click through it without leaving.

The short answer. Publish the demo, open the Share dialog and copy the embed code. Paste it into your page as you would any iframe snippet. In Proovyt, link and embed are on every plan, views from embeds count in your analytics, and republishing after a fix keeps the same link.

For more on this topic, read How to Use an Interactive Demo in a Sales Follow-Up Email and How to Use Interactive Demos with Marketplace Listings.

Key Takeaways

• Publish the demo, open the Share dialog and copy the embed code.
• Paste the snippet where the demo should appear, then click through it on the live page.
• Link and embed are on every Proovyt plan, Free included.
• Republishing keeps the link, so the embed shows every fix without new code.
• Proovyt hosted pages and embeds set no cookies.

Three Ways to Share a Demo

Step 1. Publish the Demo

Publishing creates the hosted page and the embed. It copies just the screenshots the demo uses, with blur baked in. The rest of your workspace stays private.

Before you publish, preview the demo and check every step for data that should not be public. See how to blur sensitive data in a product demo.

Step 2. Copy the Embed Code

Open the Share dialog for the live demo. It shows the hosted link and the embed code.

The embed code is an iframe snippet that points at the demo's embed page.

Step 3. Paste It into Your Page

Most site builders and content systems accept an iframe snippet.

• Site builders. Add an embed or custom code block and paste the snippet.
• Your own code. Paste the iframe where the demo should appear and give its container a width that suits the layout.
• Docs and help centers. Use the platform's embed or HTML block.

Then load the page and click through the demo to check it plays.

Step 4. Place It Where It Works

• Homepage. Near the top, next to the line that says what the product does.
• Product or feature pages. One demo per feature, showing that feature's flow.
• Launch posts and changelogs. Show the new feature working.
• Help articles. Show the task the article explains.

Keep each demo to one flow. A short demo for one feature does more than a long tour of everything.

Step 5. Watch the Numbers

Views from embeds count in your analytics, the same as views on the hosted link.

• Every plan shows view counts.
• Creator, Pro and Team show unique viewers, completion rate and drop-off by step.
• Pro and Team show per-viewer analytics when a viewer sends a lead form.

More in interactive demo analytics that matter.

Keeping the Embed Working

• Fix and republish. Republishing keeps the link, so the embed on your page updates with no new code.
• Brand changes. On Creator, Pro and Team, a change to the brand kit reaches every linked demo, published and embedded ones included, with nothing to republish.
• Take it down. Unpublishing takes the page down at once.

Privacy for Your Visitors

Proovyt hosted pages and embeds set no cookies. Analytics store no IP addresses, and unique viewers come from a hash that changes every day. Known bots are filtered out of the counts. See privacy and cookies in embedded demos.

Hosting the Demo Yourself

On Creator, Pro and Team, the Export menu offers an HTML file, a web folder as a zip, the embed code and a project file.

The HTML file is one self-contained file that plays in any browser. Host it wherever you like, such as your own server or your docs.

Protecting a Demo

For demos sent to prospects rather than placed on a public page, Pro and Team can:

• Ask viewers for a password before the demo opens.
• Stop the link working after a date you choose.
• Show a lead form before the demo starts, or after a step you choose.

Custom domains for hosted links are coming to Pro and Team and are not available yet.

Sizing the Embed

An embedded demo should be large enough that callouts and screen text are readable.

• Give it the full content width. A demo squeezed into a narrow column makes the screen text too small.
• Check on a phone. Load the page on a small screen and click through.
• Use zoom in the demo. If a step has small text, zoom it up to 3x on the hotspot. Callouts keep their size.
• Set the frame width. On Team, admins set the default frame width for new demos.

Embed, Link or File

Brand on the Embedded Demo

An embedded demo sits inside your page, so it should look like part of it. On Creator, Pro and Team, the brand kit sets:

• Logos. One for light backgrounds and one for dark, at the size you set.
• Colors. An accent for callouts and buttons, plus saved brand colors under every color picker in the editor.
• Fonts. Heading and body fonts, including font files you upload.

The Made with Proovyt badge shows on Free and is removed on every paid plan.

Related Guides

• Privacy and Cookies in Embedded Demos, what an embed collects and what to check first.
• Interactive Demo Analytics That Matter, which numbers to watch and how to act on them.
• How to Make an Interactive Product Demo, the full workflow from planning a flow to sharing it.
• How to Keep Demos up to Date After a UI Change, a release routine that fixes stale steps without breaking links.