# Sandbox Demos

### **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:**

{% embed url="<https://www.youtube.com/watch?ab_channel=Supademo&v=4h-hfxmo0FA>" %}

**Otherwise, here's an example Sandbox Supademo:**

{% @supademo/embed demoId="cmeyh9a3t02klyy0ihmd56cgd" url="<https://app.supademo.com/demo/cmeyh9a3t02klyy0ihmd56cgd>" %}

***

### **How to Create a Sandbox Demo**

{% hint style="info" %}

## **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.
   {% endhint %}

You can create sandbox demos in two ways:

**1. Record Sandbox Demos with Auto-Linking**

{% @supademo/embed demoId="cmcvl1p5w0f3h9empwuuaxty5" url="<https://app.supademo.com/demo/cmcvl1p5w0f3h9empwuuaxty5>" %}

* 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**

{% @supademo/embed demoId="cmbxxl3azgkoesn1rm78j3k8z" url="<https://app.supademo.com/demo/cmbxxl3azgkoesn1rm78j3k8z>" %}

* Open any HTML Supademo.
* Switch to the **\</> Edit HTML** editor, then select **Sandbox Mode**.
* Add [invisible hotspots](https://docs.supademo.com/customize/hotspot/invisible-hotspots) to elements you want to make interactive.
* Repeat across steps until viewers can freely navigate.

{% hint style="warning" %}
&#x20;**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)*
  {% endhint %}

***

### 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

<details>

<summary><strong>Live product demos</strong></summary>

**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

</details>

<details>

<summary>Proof of concept via Sandboxes </summary>

**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

</details>

<details>

<summary>Demo leave-behinds</summary>

**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

</details>

***

{% hint style="success" %}

#### 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
  {% endhint %}