# 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](https://docs.supademo.com/create/by-method/create-with-chrome-extension)

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

[Record via Desktop App](https://docs.supademo.com/create/by-method/create-with-desktop-app)

[Record via Figma Plugin ](https://docs.supademo.com/create/by-method/create-with-figma-plugin)

[Record Mobile App Demos](https://docs.supademo.com/create/by-method/create-mobile-demo)

[Manually Upload Demo Content](https://docs.supademo.com/create/by-method/create-from-uploads)

</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](https://docs.supademo.com/customize/chapters/conditional-branching)

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

[Personalization](https://docs.supademo.com/customize/personalize/variables-and-tokens)

</details>

<details>

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

[Find and Replace](https://docs.supademo.com/customize/edit-html/find-and-replace-text-emails-and-dates)

[Anonymize Emails](https://docs.supademo.com/customize/edit-html/bulk-anonymize-content)

[Smart Dates](https://docs.supademo.com/customize/edit-html/keep-dates-current)

[HTML Hotspots](https://docs.supademo.com/customize/hotspot/html-based-hotspots)

</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 ](https://docs.supademo.com/share/multi-demo-sharing/demo-hub)

[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](https://docs.supademo.com/analyze/session-metrics)

[Trending Content](https://docs.supademo.com/analyze/analytics/trending-content)

**Bonus!** - Unlock Deeper Insights with Product [Integrations](https://docs.supademo.com/admin-and-billing/integrations/google-analytics)

</details>

***