Sandbox Demos

Build pixel-perfect sandbox demonstrations with HTML and CSS cloning. No staging environments, dev tickets, or maintenance required.

What are Sandbox Demos?

Sandbox demos are interactive, HTML-based replicas of your product that behave like a live environment — but without the risks of using production or staging data. Viewers can click, type, scroll, and explore freely, just like in the real product.

Before diving into creating a sandbox, we recommend watching this 4-minute overview to get familiar with this feature:

Otherwise, here's an example Sandbox Supademo:

---

How to Create a Sandbox Demo

Setup Tips and recommendations prior to recording:

1. Record using Google Chrome. Chrome is the best-supported browser for demo recording.

2. Refresh the page prior to recording by re-loading (command+R). Stale pages that have been inactive for 20+ minutes may lead to unexpected issues.

3. Record at full width and height (or with 1280x800 dimensions) on a laptop for an ideal viewing experience. Recording on large monitors may lead to small UI elements or illegible text.

4. Close unnecessary tabs (especially in the same Chrome window). Having lots of tabs open is a surefire way to slow things down and can impact capture speed.

5. Slow down between captures (especially for HTML recording). HTML recording needs a moment to capture each page’s HTML + CSS. Pause briefly between clicks so each step finishes processing—this may take longer on complex pages or if you have many tabs open.

You can create sandbox demos in two ways:

1. Record Sandbox Demos with Auto-Linking

• Open the Supademo Chrome Extension and select Sandbox Demo, then hit Record Supademo.

• Click through every page, dropdown, or feature you want to make accessible.

• Stop recording to generate your sandbox demo.

• In the editor, open Sandbox Mode and verify/edit the step links.

---

2. Transform an Existing HTML Demo into a Sandbox

• Open any HTML Supademo.

• Switch to the </> Edit HTML editor, then select Sandbox Mode.

• Add invisible hotspots to elements you want to make interactive.

• Repeat across steps until viewers can freely navigate.

Considerations

• Sandbox demos only work for web-based applications.

• Heavy webpages with lots of images or video may cause capture issues (allow for 1-2 seconds between clicks to ensure successful capture)

---

Key Differences: Guided HTML vs Sandbox Demos

Feature	Guided HTML Demo	Sandbox Demo
Navigation	Preset steps via tooltips	Users click freely through multiple paths
Hotspots	Visible, instructional	Invisible or subtle
Ideal for	New users, onboarding flows	Prospects, qualified leads, live demos
Interactivity	Moderate	High — behaves like a real product

---

Benefits of Sandbox Demos

• Safe: no risk of breaking production or exposing sensitive data

• Flexible: customize logos, data, and names without engineering help

• Scalable: Sales Engineers and AEs can run personalized demos independently

• Insightful: track engagement analytics for each sandbox session

• Buyer-friendly: deliver a “try before you buy” experience with no signup required

---

Best Use Cases

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 concept via 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

---

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