> For the complete documentation index, see [llms.txt](https://docs.supademo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.supademo.com/welcome/quick-start-guide.md).

# 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 group product 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-demo-type/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 demo

{% @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>

<details>

<summary>The Edit Toolkit: MCP</summary>

[Editing with Supademo MCP](/customize/mcp-server.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)

Analyze with [Supademo MCP](/customize/mcp-server.md)

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

</details>

***