Demo Maker Pro
Start free trial
Documentation

Record a browser demo

Recording a workflow in Chrome or Edge with the Demo Maker Pro extension: the five steps, the pacing that gets clean captures, and the settings worth knowing before you start.

Browser recording is the main way demos are made. The extension records inside your own Chrome or Edge, in the session you are already logged into, and captures real HTML and CSS rather than pictures of the screen. Before you start, make sure you have installed both parts and that the desktop application is open and activated, the extension will not record without it.

Record a demo

  1. Open your product in Chrome or Edge and get to the screen you want to start from.
  2. Click the Demo Maker Pro extension icon in the toolbar.
  3. Click Start Recording. The browser page will refresh, and a short countdown appears on the page.
  4. Click through the workflow as you normally would. Pause for about 1-2 seconds between clicks to make sure each step is fully captured before continuing.
  5. Click the extension icon again and choose Stop Recording.

Steps appear in the desktop app as you go, so you can watch the demo build itself while you record.

For the sharpest full-screen presentation: record with your browser at the same size you expect to present the demo.

Recording tips

  • Use a demo or test account. Snapshots capture whatever is on screen, including real customer names if they are visible.
  • Move at a normal pace. Clicking too fast can skip a step, or capture only part of what was on the page. Click through as you normally would, but leaving 1-2 seconds between steps gives every page the best chance of being captured completely.
  • If a click opens a dropdown and you then scroll to the next thing within the same page, turn on Capture dropdowns and scroll transitions, under Advanced capture in the extension popup, first.
  • Capture at the size you expect viewers to use. Demo Maker Pro scales a demo down when needed, but does not enlarge it beyond the size it was recorded at. This keeps text and interface details sharp. If you record in a 1920-pixel-wide browser window and view the demo on a wider screen, you may see some extra space around it.

When a browser recording is not the right tool

Some interfaces cannot be captured as HTML at all, a Windows application, a virtual machine window, a Java or Citrix client, or a web app whose front end resists a snapshot. Desktop Capture records those as window images instead, and both kinds of step can sit in the same demo. For the details of what gets captured which way, see how HTML capture works.

Next: Record a desktop application · All documentation