Chrome Extension

The Preface Capture Chrome extension lets you add screenshots to an existing demo directly from your browser. Use it when you want to capture a live product flow without manually saving image files and uploading them one by one.

Before you start

You need:

• Google Chrome or another Chromium-based browser
• A Preface extension token
• At least one existing demo in your Preface workspace

important

The extension adds screenshots to demos that already exist. Create the demo in Preface first, then select it in the extension.

Install the extension

1. Open chrome://extensions/
2. Enable Developer mode
3. Click Load unpacked
4. Select the preface-extension folder
5. Pin Preface Capture to your browser toolbar

If your team distributes a packaged extension, install that package instead of loading the folder directly.

Generate an extension token

1. Open Preface
2. Go to your account settings
3. Open Extension Tokens
4. Generate a new token
5. Copy it immediately

caution

Extension tokens are personal API keys. Do not share them in chat, email, screenshots, or documentation.

Connect the extension

1. Click the Preface Capture icon in Chrome
2. Enter your Preface app URL, for example https://your-team.app.usepreface.ai
3. Paste your extension token
4. Click Connect

After connecting, the popup shows a list of demos available to your account.

Select a demo

Use the Demo dropdown to choose where screenshots should be added.

Click Refresh if you created a new demo after opening the popup or if the list looks out of date. Demos are listed alphabetically.

Capture modes

The extension supports three capture modes. The selected mode applies to both Take Screenshot and Start Recording, and you can change it at any point during a capture session.

Mode	What it captures	Best for
Visible viewport	The current visible browser viewport	Standard step-by-step product flows
Full page	The full vertical page, stitched from multiple viewport captures	Long pages where the whole page scrolls
Hovered scroll panel	A scrollable panel or content area under your mouse, stitched vertically	Apps with fixed navigation and a scrollable main content pane

For full-page and panel captures, Preface temporarily scrolls the page or panel, hides native browser scrollbars during capture, stitches the result into a single image, and stores the original viewport information so the editor and player can replay scrolling accurately.

note

Only vertical scrolling is supported. Horizontal scroll position is not captured or replayed.

Capturing scrollable panels

Use Hovered scroll panel when the page itself does not scroll but a content area inside it does, such as a dashboard with a fixed sidebar and header.

Before clicking Take Screenshot, move your mouse over the scrollable area you want to capture. The extension highlights the detected panel. If the hovered area is not scrollable, the capture fails with a prompt to hover a scrollable panel first.

Manual screenshots

Click Take Screenshot whenever you want to capture the current screen using the selected capture mode.

Manual capture is useful when:

• You only want a few specific screens
• The page changes after a click and you want to wait before capturing
• You are capturing a flow where automatic click capture would add too many steps

If no capture session is active, the first manual screenshot starts one for the selected demo. The counter on the extension icon increments after each successful upload.

Recording

Click Start Recording to capture screenshots as you click through the product.

While recording:

• The extension listens for clicks in the page
• Each click is allowed to complete before the screenshot is taken
• The screenshot is uploaded as a new step in the selected demo
• The extension icon counter increments after each successful upload

You can still click Take Screenshot while recording if you need an extra manual capture.

Finish or discard a session

When you are done, click Finish & Edit. Preface opens the selected demo in the step editor so you can reorder steps, add annotations, write voiceover, and publish.

Click Discard if you do not want to keep screenshots captured during the current session. Discarding removes screenshots added by that session only; it does not delete the demo.

Waiting for pages to load

Before taking a screenshot, the extension waits for the page to settle. It checks for common loading indicators, visible images, fonts, and a stable page layout. This helps avoid capturing loading overlays or partially rendered screens.

If a page keeps showing a loading indicator for a long time, the extension eventually continues so the capture does not hang forever.

Troubleshooting

The demo list is empty

Create a demo in Preface first, then click Refresh in the extension.

The extension says the token is invalid

Generate a new extension token in Preface, reconnect the extension, and make sure you are using the correct app URL.

Screenshots are not being added

Confirm that:

• A demo is selected
• You are not on a browser page such as chrome://extensions
• Your Preface session and extension token are still valid
• The app is reachable from your browser

I captured the wrong screens

Open the extension and click Discard before finishing the session. If you already finished, delete the unwanted steps from the demo editor.