Managing Steps
Steps are the individual screens that make up your demo. Each step is a screenshot of your product, which you can annotate and narrate.
Adding steps
There are three ways to add steps to your demo:
Capture with the Chrome extension
Use the Chrome Extension to add screenshots directly from a browser tab. The extension can capture manually with Take Screenshot, or automatically while you click through a product flow with Start Recording.
Before capturing, create the demo in Preface and select it in the extension. Screenshots are added as new steps in that existing demo.
The extension can capture a visible viewport, a full scrolling page, or a hovered scrollable panel. Scrollable captures keep the original browser viewport depth in Preface, so the editor shows the screenshot inside a fixed-height viewing area while the captured content scrolls inside it.
Upload from your computer
Click the Upload button (or drag and drop images) onto the step list. Preface accepts PNG, JPG, and WebP files.
For the sharpest results, capture your screenshots at 1:1 pixel ratio (no retina scaling). If your screenshots look blurry in the demo, try exporting them at a lower resolution.
Bulk upload
You can upload multiple screenshots at once. Drag a selection of image files onto the step list and Preface will add them all in one go, preserving the order they were selected.
A screenshot showing the bulk upload drag-and-drop in action will go here.
Reordering steps
Drag any step thumbnail in the left panel to a new position. The demo player will always follow the order shown in the step list.
Deleting steps
Click a step to select it, then use the delete option in the step toolbar. Deletion is permanent, so make sure you don't need the step before removing it.
Step titles
Each step can have an optional title. Titles appear in the editor for your reference but are not shown to viewers by default. They're useful for keeping track of which screen is which, especially in longer demos.
To set a title, click on the step and edit the title field at the top of the canvas.
Scrollable screenshots
Steps captured as full pages or hovered scroll panels can be taller than the original browser viewport. In the editor, those steps appear inside a fixed viewport that represents the original browser window depth.
For scrollable panel captures, fixed page areas such as headers and sidebars stay fixed while the captured panel scrolls. Any annotations placed inside the scrollable region move with that content. Annotations outside the scrollable region stay fixed.
Use Scroll markers in the voiceover script when you want the published player to scroll to a specific point during playback.
Transition types
Each step has a transition type that controls how the viewer moves to the next step:
| Type | Behaviour |
|---|---|
| Click anywhere | The viewer clicks anywhere on the screen to advance |
| Hotspot click | The viewer must click a specific hotspot annotation to advance |
| Auto | The step advances automatically after a set delay |
| CTA only | Only a CTA button annotation can advance the step |
You can set the transition type and delay (for Auto) in the step's settings panel.
A screenshot showing the transition type selector will go here.
Tips for great screenshots
- Crop consistently — keep the same dimensions across all steps so the player doesn't jump between different aspect ratios
- Highlight what matters — plan your annotation zones before you start capturing
- Hide sensitive data — use the Blur annotation to obscure anything confidential
- Capture real flows — step through the actual user journey rather than jumping between unrelated screens