# 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](https://docs.supademo.com/create/by-method/create-with-desktop-app) to record your mobile app or emulator.&#x20;
* Or, screen record on your phone and [upload](https://docs.supademo.com/create/by-method/create-from-uploads) video into Supademo.
* After uploading, [split the video](https://docs.supademo.com/create/by-method/create-mobile-demo/video-splitting) 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)