# Quick Start Guide

Learn the essentials in four short sections: record, edit, share, and analyze. Plus, explore bonus tips to take your Supademo further. Each section comes with a quick Supademo tutorial so you can follow along without the guesswork. 

{% hint style="info" %}
Not into tutorials? We’ve got you. Grab a spot in one of our **live 30-minute workshop session** for hands-on guidance and answers to your questions.  \
\ <a href="https://supademo.com/product-demo/live-training" class="button secondary" data-icon="lightbulb-on">Join free session</a>
{% endhint %}

### **Before you begin: install your recorder**

To record your first Supademo, you’ll need to install a demo recorder. You can use Supademo from either your browser or your desktop — just choose the setup that works best for you.

| Chrome Extension                                                                                                                                                   | Desktop App                                                                                    |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- |
| Best for recording directly in your browser                                                                                                                        | Ideal if you want to capture non-browser apps or mobile emulators                              |
| <a href="https://chromewebstore.google.com/detail/supademo-ai-interactive-d/jblbcpkejogbghfdglhfjlplchcnmohm" class="button primary">Download Chrome Extension</a> | <a href="https://supademo.com/download" class="button primary">Download for Mac or Windows</a> |

***

### Step 1: Record your product or workflow

{% hint style="info" %}

### **Tips and setup before recording**

* **Record using Google Chrome.** Chrome is the best-supported browser for interactive demo recording.
* **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.
* **Record at full width and height.** Maximize your browser window (or record on a laptop screen at full width/height) so content isn’t too small and your viewport works well across different screen sizes.
* **Slow down between captures (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 %}

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

<details>

<summary>Record Like a Pro: Key Features Unlocked</summary>

[Record via Chrome Extension](/create/by-method/create-with-chrome-extension.md)

* Recording sensitive information? Check out [Smart Blur ](/create/by-demo-type/guided-screenshot-and-video-demos/smart-blur.md)

[Record via Desktop App](/create/by-method/create-with-desktop-app.md)

[Record via Figma Plugin ](/create/by-method/create-with-figma-plugin.md)

[Record Mobile App Demos](/create/by-method/create-mobile-demo.md)

[Manually Upload Demo Content](/create/by-method/create-from-uploads.md)

</details>

***

### Step 2: Edit and personalize your Screenshot or HTML Supademo

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

<details>

<summary>The Edit Toolkit: Screenshot Demos</summary>

[Hotspots](https://docs.supademo.com/editing/hotspots)

[Chapters](https://docs.supademo.com/editing/chapters)

[Conditional Branching](/customize/chapters/conditional-branching.md)

[Voiceovers](https://docs.supademo.com/personalization/embed-demo)

[Personalization](/customize/personalize/variables-and-tokens.md)

</details>

<details>

<summary>The Edit Toolkit: HTML Demos</summary>

[Find and Replace](/customize/edit-html/find-and-replace-text-emails-and-dates.md)

[Anonymize Emails](/customize/edit-html/bulk-anonymize-content.md)

[Smart Dates](/customize/edit-html/keep-dates-current.md)

[HTML Hotspots](/customize/hotspot/html-based-hotspots.md)

</details>

***

### Step 3: Share with your audience

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

<details>

<summary>Smart Sharing Tools at Your Fingertips</summary>

[In-App Demo Hub ](/share/multi-demo-sharing/demo-hub.md)

[Showcases](https://docs.supademo.com/sharing/showcase-collection)

[Folder Sharing](https://docs.supademo.com/sharing/folder-sharing)

[Export](https://docs.supademo.com/sharing/exports)

[Embed](https://docs.supademo.com/sharing/embed-online)

[Share Links](https://docs.supademo.com/sharing/share-as-a-link)

</details>

***

### Step 4: Analyze your engagement data

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

<details>

<summary>Essential Tools for Smarter Analysis </summary>

[Session Metrics](/analyze/session-metrics.md)

[Trending Content](/analyze/analytics/trending-content.md)

**Bonus!** - Unlock Deeper Insights with Product [Integrations](/admin-and-billing/integrations/google-analytics.md)

</details>

***


---

# 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/welcome/quick-start-guide.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.