Sandbox demo environments

Create no-code, interactive demo environments that look and feel like your real product — without relying on live production or staging environments.

What are sandbox demos or demo environments?

Sandbox demos are interactive, HTML-based replicas of your actual product — captured using Supademo — that behave like a live environment but without any of the risks or setup complexity.

Sandbox demos can be created through two methods:

Record sandbox demos with auto-linking

This method will automatically link all of your steps within the recording.

• After turning on the Supademo extension, choose "Sandbox Demo" as your desired option.

• Next, click through every page, feature, component (i.e. dropdown) you want to make accessible to viewers in your sandbox.

• Once you stop recording, your Supademo will be ready to be edited.

• To finalize, you'll want to open the Supademo in Sandbox Mode and verify the step links in each of the steps and make changes/add new links as needed.

---

Transform existing HTML Supademo via Sandbox Mode

Alternatively, you can turn existing HTML-based Supademos into sandbox demos. Please follow the instructions below on Sandbox Mode.

Unlike guided demos with visible tooltips or paths, sandbox demos let users explore freely, interact with elements naturally, and click through multiple paths — just like in the real product.

What are some use cases for sandbox demos?

Live product demos

Problem: Live demos often rely on staging environments, which can be unstable, outdated, or require engineering support. Preparing data and spinning up demo instances is time-consuming.

Solution: Sandbox demos in Supademo let AEs and Solutions Engineers run live, interactive demos without relying on engineering. These are fully functional HTML clones that behave like the real product — with clickable elements, hover states, and editable data.

Why it matters:

• Avoid bugs or surprises in staging/production

• Save time by not setting up new instances

• Personalize demo data quickly without touching the backend

• Run consistent, high-quality demos from anywhere

Proof of concepts and sandboxes

Problem: Creating custom POCs for prospects usually requires engineering effort and setup time. Prospects also want to explore the product at their own pace.

Solution: Use Supademo sandbox demos to deliver self-guided, interactive POCs tailored to the prospect’s use case. These demos replicate the actual product and can be personalized without writing code.

Why it matters:

• Deliver tailored POCs without engineering help

• Let prospects explore key workflows freely

• Share demos that don’t require logins or sandbox environments

• Iterate quickly based on feedbac

Demo leave-behinds

Problem: After a live demo, it’s hard for prospects to revisit what they saw or share it internally. Videos and PDFs are passive and often ignored.

Solution: Supademo sandbox demos let you share interactive, clickable versions of the product after a call — no downloads, no accounts, and no static content.

Why it matters:

• Make it easy for buyers to re-engage and share internally

• Keep the experience interactive instead of static

• Track usage and interest after the call

• Help champions sell your product internally

How to create a sandbox demo environment on Supademo

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.

2. Inside the demo editor, you can add then Invisible hotspots to all required elements. Repeat this for all steps in your demo.

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

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

Here's an example sandbox Supademo:

Key differences between guided HTML demos and sandbox demos

Feature	Guided HTML Demo	Sandbox Demo
Navigation	Follows preset steps via tooltips	Users click around freely
Hotspots	Visible, pre-placed with instructions	Invisible or subtle — no visible guide
Ideal for	New users, onboarding flows	Prospects, qualified leads, live demos
Interactivity	Moderate	High — behaves like a real product

Key benefits include:

• No risk of breaking production or revealing sensitive data

• Customize demo content (logos, data, names) without engineering help

• Allow Sales Engineers and AEs to run personalized demos independently

• Collect engagement analytics for each sandbox session

• Let prospects experience "try before you buy" without a signup

What’s Coming Next?

To make sandbox demo creation even easier and more scalable, we’re working on:

• Bulk edit content (e.g., titles, descriptions, images)

• Bulk replace content (e.g., change a product name or image across multiple steps at once)

• One-click personalization of data like names, logos, industry via AI

• Flexible toggles to switch between sandbox and guided modes

• Smarter analytics that reflect sandbox usage patterns