Contact Support

HTML interactive demos

Create reliable, pixel-perfect interactive demo that are pixel-perfect HTML/CSS copies of your application. In minutes with no code.

What are HTML demos?

HTML-based interactive demos are pixel-perfect clones or replicas of a software-based product that directly clone the HTML and CSS of the original product. They allow users to explore and interact with the product without needing to create an account or access the full live version.

HTML Capture via Chrome Extension

  1. To capture an HTML interactive demo, click the “Record HTML Supademo” button.

  2. Hover over an HTML element to select where your hotspot will be positioned/anchored next to. Click it to finalize the position.

    1. The extension will highlight elements as you hover over HTML elements, indicating where your hotspot text captions will be anchored next to. This initial position can easily be changed in the Supademo editor.

  3. Proceed to click through your product or workflow as you would for a regular Supademo.

Please give 1-2 seconds between each click to ensure each slide capture successfully uploads onto Supademo, especially on low internet connections.

  1. When you’re done recording, open the extension and click “Stop Recording” to open a fully editable sandbox clone of the product you recorded.

  • Please note that HTML capture may fail on intensive webpages with lots of image assets or videos.

  • Please note that HTML capture is only supported for web-based applications.

Here's an example HTML-based interactive demo.

As you can see, it's fully interactive with hover states, the ability to type/scroll around — creating a pixel-perfect experience:

Key differences from screenshot/video demos include:

While the recording process is the same for both types of interactive demos, HTML-clone demos provide a more realistic and interactive experience. Unlike screenshot or video-based interactive demos, there are several key differences such as:

  • Users can click through and interact with each individual element just like in the real product

  • Preserves the application's full interactivity, like hover states and animations

  • Content such as numbers, names, images, or data can be easily edited and personalized after recording

  • Offers higher fidelity resolution output that resembles the actual product

Key benefits include:

  • Providing realistic "try before you buy" experiences for prospects

  • Reducing the need for live sales demo environments

  • Enabling easy customization from one recorded demo

  • Offering deeper analytics on user interactions

HTML interactive demos are ideal for:

PreviousBy Supademo typeNextScreenshot/video interactive demos

Last updated

Was this helpful?