Stepshots logoStepshots

Browser Extension Recording

Record a product demo with the Stepshots browser extension and upload it to Stepshots

Overview

Use the Stepshots browser extension to capture a product flow directly from Chrome, then upload the finished recording to Stepshots for editing and sharing.

This workflow is best when you want to record a real walkthrough manually instead of defining steps in a CLI config.

Before You Start

  • Google Chrome 114 or later
  • A Stepshots account
  • The Stepshots browser extension installed from the Chrome Web Store
  • A Stepshots API key for direct upload

Generate an API key

Open Settings in Stepshots and generate an API key. The browser extension uses this key to upload demos directly to your workspace.

Record a Demo

1

Open the page you want to record

Navigate to the starting page of your product flow in Chrome.

Recording starts from the currently active tab, so make sure you are already on the correct page before you begin.
2

Open the Stepshots extension

Click the Stepshots extension icon to open the side panel.

Enter a title for the demo and, optionally, a short description.
3

Start recording

Click Start Recording.

Stepshots begins capturing your interactions on the current site as discrete steps:

- Clicks — including clicks on links that navigate to a new page
- Typing
- Keyboard shortcuts
- Dropdown selections

The extension doesn't record scrolling as its own step. Instead, it stores the page's scroll position as scene metadata on each click and type step, so the screenshot is framed exactly where you were.
4

Perform the product flow

Walk through the flow exactly as you want viewers to see it.

As you interact with the page, the extension records each action as a separate step and captures screenshots in the background.

Need a screenshot without an action — for example a menu you opened by hovering, or a confirmation screen? Click **Capture Screen** in the side panel, or press **Alt+Shift+S** while the page has focus, to add a screenshot-only step.
5

Pause or stop when needed

Use either the extension side panel or the in-page recording HUD to control the session.

You can:

- Pause and resume recording
- Stop the recording when the flow is complete
6

Review the recorded steps

After you stop recording, review the captured steps in the extension.

For each step you can edit the action, selector, and callout text, drag steps to reorder them, and delete steps you don't want — a deleted step can be brought back with undo. Make these edits before uploading.

Upload to Stepshots

Add your API key in the extension

If you have not already configured the extension, open Settings inside the side panel and paste:

  • Your Stepshots URL
  • Your Stepshots API key

Then save the settings and return to the recording.

Upload the recording

From the finalization screen, click Upload to Stepshots.

If the upload succeeds, the extension shows a link to open the demo directly in the editor.

Export a config for CLI re-recording

On the finalization screen, expand Advanced options to download a stepshots.config.json built from your recorded steps. This turns a one-off manual capture into a repeatable CLI recording — commit the config, then re-record the same flow headlessly whenever your product changes. When the config is generated, link-click steps that changed the page are turned into navigate steps automatically.

Finish in the Editor

After upload, open the demo in the Stepshots editor to refine it before sharing.

Typical finishing steps:

  • Add callouts and highlights
  • Blur sensitive UI areas
  • Adjust the demo title and description
  • Publish the demo and copy the share link

Troubleshooting

Chrome says the page cannot be recorded

The extension cannot record Chrome internal pages such as chrome://, extension pages, or other browser-managed screens. Navigate to a normal website and start again.

Sensitive fields are missing

That is expected. Password fields and sensitive inputs are intentionally not recorded.

Upload fails

Check that:

  • Your Stepshots URL is correct
  • Your API key is valid
  • You are signed in to the correct Stepshots workspace

If the key is invalid, regenerate one in Stepshots Settings and update the extension.

No screenshots were captured

Start a new recording and repeat the flow. The extension only uploads recordings that contain captured screenshots.

Next Steps

  • Use the dashboard editor to add overlays and polish the demo
  • Publish the demo and share the viewer link with your team or customers
Navigation