# 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](/customize/hotspot/invisible-hotspots.md) 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.supademo.com/create/by-demo-type/sandbox-demos.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.