Capturing Screens

How to capture screenshots for your Interactive Demo using the browser extension, URL import, or file upload.

Demoship offers three ways to get screenshots into your demo. Each method has trade-offs between speed and control.

Browser extension (recommended)

The Chrome extension captures screenshots as you click through your product.

1. Navigate to the page where your demo flow starts.
2. Click the Demoship extension icon and select New Interactive Demo.
3. Click through your product normally. Each click captures the current screen and records the click position for automatic hotspot placement.
4. Click Finish Capture when done.

Note: The extension captures the visible viewport. Scroll to reveal content before clicking if you need to capture below-the-fold elements.

URL import

Provide a URL and Demoship renders the page server-side and captures it as a screenshot.

1. In the editor, click Add Step > Import from URL.
2. Enter the page URL.
3. Configure viewport size (desktop, tablet, or mobile).
4. Click Capture.

This works for publicly accessible pages. For authenticated pages, use the browser extension instead.

File upload

Upload existing screenshots (PNG, JPG, or WebP) directly.

1. In the editor, click Add Step > Upload Image.
2. Drag and drop files or browse to select them.
3. Images are added as steps in the order uploaded.

Best practices

• Clean up sample data before capturing. Remove test entries, placeholder names, and notifications that would distract viewers.
• Use a consistent viewport size across all steps. Mismatched dimensions create a jarring experience.
• Capture at 1x resolution on Retina displays by setting the browser zoom to 100%. The editor handles scaling.
• Log in as a demo-specific user with curated data rather than using your personal account.
• Disable browser extensions that add visible UI elements (e.g., ad blockers with badge counts, dev tools overlays).