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, including:

- Clicks
- Typing
- Navigation
- Scrolling
- Keyboard shortcuts
- Dropdown selections
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.
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.

You can reorder steps, delete steps you do not want, and make small 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.

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