# Guided Screenshot & Video Demos

### **What are Screenshot/Video Demos?**

Screenshot and video-based demos transform static visuals — screenshots, images, slides, Figma designs, or recorded videos — into interactive step-by-step walkthroughs. Unlike static slides, these demos capture real actions like typing, dragging, and scrolling, making them feel much closer to a live product experience.

#### 👉  See an example Guided Screenshot/Video Supademo below:

{% @supademo/embed demoId="cSA86m\_MPHGSi1J8fv8oe" url="<https://app.supademo.com/demo/cSA86m_MPHGSi1J8fv8oe>" %}

### **How to Create a Screenshot/Video 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.
   {% endhint %}

**Using the Chrome Extension**

1. Open the Supademo Chrome Extension,  select **"Guided Screenshot Demo"**, and click **“Start Recording.”**
2. Click through your product or workflow — Supademo will capture each click and action.

* Text descriptions are generated automatically for every step.

3. When finished, open the extension and click **“Stop Recording"** to instantly create your interactive demo.

*For Mobile Apps*

* Use the [desktop app](/create/by-method/create-with-desktop-app.md) to record your mobile app or emulator.&#x20;
* Or, screen record on your phone and [upload](/create/by-method/create-from-uploads.md) video into Supademo.
* After uploading, [split the video](/create/by-demo-type/create-mobile-demo/video-splitting.md) into multiple steps to make it interactive.

***

### Benefits of Screenshot/Video Demos

* Simple and fast — no coding or setup required
* Works with any visual asset: screenshots, images, video, or Figma designs
* Auto-generated step text reduces manual editing
* Captures keystrokes and gestures (typing, scrolling, dragging)

***

### Best Use Cases

* **Product tutorials & onboarding**
* **Process documentation**
* **Sales presentations**
* **Training materials**
* **Feature announcements**
* **Design prototypes** (via Figma plugin)


---

# 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/guided-screenshot-and-video-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.