> 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/create/by-demo-type/guided-html-demos/manual-capture-for-html-recordings.md).

# 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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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/create/by-demo-type/guided-html-demos/manual-capture-for-html-recordings.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.