# Manual Capture for HTML Recordings

Manual Capture allows you to capture **hover states and non-click interactions** while recording HTML demos in Supademo. This is especially useful when you need to show tooltips, dropdowns, menus, or other UI elements that appear **on hover** rather than on click.

Unlike standard recording steps, Manual Capture creates an **HTML screenshot without hotspots**, giving you full control over how and where links are added afterward.

***

### When to Use Manual Capture

Use Manual Capture when:

* You need to show **hover states** (e.g., tooltips, menus, inline help text)
* An interaction does **not involve a click**
* You want to capture a specific visual state in an HTML experience
* You are recording a **Guided HTML demo** or **Sandbox demo**

Manual Capture is designed specifically for **HTML recordings** and is not intended for image-based demos.

***

### Supported Recording Types

Manual Capture is available when recording:

* **Guided HTML demos**
* **Sandbox demos**

It becomes available as soon as you start any HTML-based recording.

***

### How Manual Capture Works

Manual Capture records the current state of the page as an **HTML capture**, rather than a traditional screenshot.

Key differences from normal recording steps:

* No clicks are recorded
* No links or hotspots are automatically added
* The captured step reflects the exact hover or visual state on the page

***

### How to Use Manual Capture During Recording

1. Click **Record Supademo** from the Chrome Extension
2. Select **Guided HTML** or **Sandbox Demo**
3. Begin recording as usual by clicking through elements on the page
4. When you reach a point where you need to capture a **hover state**:
   * Hover over the element you want to capture
   * Do **not** click anything
5. Use the keyboard shortcut:
   * **Mac:** <mark style="color:red;">`Command + Shift + 2`</mark>
   * **Windows:** <mark style="color:red;">`Control + Shift + 2`</mark>
6. Supademo will capture the current state as an **HTML manual capture step**

The recording then continues normally.

***

### Adding Links After a Manual Capture

Because Manual Capture does not record clicks, **no links or hotspots are added automatically**.

After recording, you can manually add links depending on the demo type:

* **Sandbox demos:**\
  Add **invisible hotspot links**
* **Guided HTML demos:**\
  Add **regular hotspots** to guide users through the next step

This gives you flexibility to define interactions exactly how you want after the capture.

***

### Using the Manual Capture Button

In addition to keyboard shortcuts, Manual Capture is also available directly from the **recording bar**.

Once you start any HTML recording, the recording toolbar will display a **Manual Capture button**, which you can click to capture the current hover or visual state without using a shortcut.

***

### Pausing a Recording (Optional Workflow)

Manual Capture works well alongside the **Pause Recording** feature.

If you need to:

* Navigate to a different URL
* Switch tabs
* Reposition the page
* Set up a specific state before capturing

You can pause the recording:

1. Start a **Guided HTML** or **Sandbox** recording
2. Click the **Pause** button in the recording bar
3. Make any necessary changes (navigate, hover, reposition, etc.)
4. Resume recording
5. Use **Manual Capture** when ready

This prevents unnecessary clicks or steps from being recorded.

***

### Summary

Manual Capture is best used when:

* Recording HTML demos
* Capturing hover-based UI states
* You need full control over hotspot placement
* Clicks are not part of the interaction

It creates clean HTML captures that accurately reflect complex UI states while keeping your demos polished and intentional.