Getting Started: Your First Next Generation Demo Recording

Uncategorized7 months ago

Key Features You’ll Love

  • No More Retakes: Edit your flow like a document, not a video. Clicked wrong? Just delete the action.
  • Record Once, Replay Anywhere: Your recorded sessions are not tied to a specific screen size. Replay them flawlessly in different browser dimensions.
  • AI-Powered Captions: Save time with automatically generated, human-readable descriptions for every step.

Follow these steps to create, edit, and enhance your first interactive demo.

Start Recording:

  1. Click the extension icon in your browser toolbar to open the recorder.
    Clicking the extension icon in the browser toolbar to open the AI Web Demo Studio recorder.
  2. Press the Record button to begin capturing your actions. The recorder will track your clicks, scrolls, and text inputs across tabs.
    Clicking the browser extension icon opens the recording menu to start capturing actions.

Enhance in Real-Time with the Floating Toolbar:

As you record, press `Alt+Shift+F` to toggle the Floating Toolbar.
Floating toolbar displaying Zoom In, Highlight, and Annotate tools for enhancing real-time demo recordings.

Use the tools to guide your audience’s focus:
Floating toolbar icons for hovering, scrolling, zooming, annotating, and highlighting during a demo recording.

  1. Hover: Simulate a mouse pointer hovering over an element.
  2. Scroll To: Automatically scroll to a specific element on the page.
  3. Zoom In: Magnify specific parts of the screen.
  4. Zoom Out: Return the view to its normal, un-magnified state.
  5. Annotate: Add explanatory text directly on the page.
  6. Highlight: Add visual emphasis to elements.
  7. Clean Annotation / Highlight

Review and AI Polish:

When you’ve completed your workflow, stop the recording.

Our AI assistant can automatically generate a title for your demo and create clear, human-readable captions for each step you performed.

AI Web Demo Studio interface showing the Generate AI Captions button and automatically created step descriptions.

Edit with Precision:

  1. Review the sequence of actions in the recorder.
  2. If you made a mistake or want to change something, you don’t need to start over. Simply select any action to edit its details or delete it entirely.

Save Your Work:

Once you are satisfied with your edits, save the session.

Cursor hovering over the Save icon in the AI Web Demo Studio toolbar.

Export to Video:

After saving, you can export your interactive demo as a traditional video file (WebM) to share across any platform.

Clicking the Capture Video button exports the interactive demo as a WebM file.

 

Loading

Signing-in 3 seconds...

Signing-up 3 seconds...