Manual Capture for HTML Recordings

Capture hover states and non-click interactions in HTML demos using Manual Capture to create clean, customizable steps without automatic hotspots.

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: Command + Shift + 2

   • Windows: Control + Shift + 2

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.