# Create with Chrome Extension

### **Add and Pin the Supademo Chrome Extension**

Sign up for a Supademo account and [install the Chrome Extension](https://chromewebstore.google.com/detail/supademo-ai-interactive-d/jblbcpkejogbghfdglhfjlplchcnmohm).\
The extension is available for both **Google Chrome** and **Microsoft Edge** browsers.

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

***

### **Select Default Location for Chrome Recordings**

You can choose where your Supademo recordings will appear in your workspace before you begin recording.

To set a default location:

1. When the recording window appears, click the **Save As** dropdown.
2. Select your destination folder.
3. Click **Start Recording**.

{% hint style="info" %}
**Note:** This feature is only available when recording through the Chrome Extension.
{% endhint %}

<figure><img src="https://3896040775-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FL3ayyYPPw0hy6Yn2UhX0%2Fuploads%2FZJZqQKMpqRf8rIN8Rlhv%2Fimage.png?alt=media&#x26;token=53aafc5e-cbbf-44af-8794-1080ce2f0e76" alt=""><figcaption></figcaption></figure>

***

### **Recording a Screenshot or Video Demo**

1. Open the Supademo extension and click through your product or workflow.
2. Every click, scroll, and keystroke is automatically captured and stitched into a step-by-step demo.
3. When finished, stop the recording — your demo will be instantly ready to edit and share.

> **Note:**
>
> * The **Chrome Extension** supports any browser-based application.
> * The [**Desktop App**](https://docs.supademo.com/create/by-method/create-with-desktop-app) ([video splitting](https://docs.supademo.com/create/by-method/create-mobile-demo/video-splitting) method) is recommended for recording desktop or mobile applications.

{% hint style="warning" %}
**Considerations**:&#x20;

* The extension will capture in-app popups.
* For right-click actions or dialogs, use the [Desktop App](https://docs.supademo.com/create/by-method/create-with-desktop-app) or [upload screenshots](https://docs.supademo.com/create/by-method/create-from-uploads) and add hotspots manually.
  {% endhint %}

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

***

### Recording an HTML Demo via Chrome Extension

HTML capture is only supported for web-based applications using the Chrome Extension.

To capture an HTML interactive demo:

1. Click **Record HTML Supademo**. *(Available on* [*Growth and Enterprise plans*](https://supademo.com/pricing)*.)*
2. Hover over an HTML element to choose where your hotspot will appear, then click to anchor it.
3. As you hover, the extension will highlight elements — showing where captions will be placed.
4. Continue clicking through your product or workflow as you would for a normal Supademo.
5. Allow **1–2 seconds between clicks** to ensure each slide uploads successfully, especially on slower connections.
6. When finished, open the extension and click **Stop Recording** to access a fully editable sandbox version of your recording.

{% hint style="info" %}
HTML capture may fail on pages with heavy image or video content, reach out to out to <support@supademo.com> if you experience issues.
{% endhint %}

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

***

### **Recording an Instant Screenshot**

You can also use the Chrome Extension to instantly capture high-quality screenshots in addition to recording full interactive demos.

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

***

### Keyboard shortcuts for Chrome extension

The Supademo extension supports keyboard shortcuts to expedite the recording process for both interactive demos and screenshots. From any Chrome browser, use the following keyboard commands below to toggle the extension:

{% hint style="info" %}
💡 Mac

* Record a Supademo: <kbd>Cmd + Shift + 8</kbd>
* Record a Supa Screenshot: <kbd>Cmd + Shift + 9</kbd>
  {% endhint %}

{% hint style="info" %}
💡 Windows

* Record a Supademo: `Ctrl + Shift + 8`
* Record a Supa Screenshot: `Ctrl + Shift + 9`
  {% endhint %}

***

### **Configuring Extension Settings and Dimensions**

* **Share with Workspace:** Automatically add recorded demos to the shared workspace, or keep them private under your personal tab.
* **Enable Video Recording:** Capture user-driven actions such as typing, scrolling, and dragging. Turning this off creates screenshot-based demos only.
* **Apply Auto Zoom:** Automatically add zoom and pan effects to recordings for a more dynamic viewing experience.
* **Recording Dimensions:** Set your recording size and aspect ratio before starting to maintain consistency.

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

***