HTML Demo

Best for sales and marketing demos that require screen editing and personalization.

• HTML Demo recording overview

• Example use case

• How to capture HTML screens

• HTML capturing methods

• Advanced Settings

HTML demo recording overview

Storylane lets you record a pixel-perfect, no-code replica of your product’s screens - capturing the HTML and CSS behind each one. This makes it easy to fully customize your demo later, whether it's for personalizing logos, adding tokens, blurring sensitive elements or embedding media.

Example Use Case

Capture your product screens once and:

• Swap logos for different prospects

• Remove or blur confidential data

• Add personalization tokens (e.g., {{FirstName}})

• Insert media or adjust layout in the HTML editor

How to Capture HTML Screens

1. Open the product screen you want to capture.

2. Launch the Storylane Chrome Extension.

3. Click “Create New Demo” — or “Add to Existing Demo” if you already started one.

4. Select “Record HTML” mode.

5. Choose your preferred capture method (explained below).

6. Once finished, click “Finish Recording.”

7. Your flow opens in the HTML Editor for further customization. → Learn how to edit HTML captures

HTML capturing methods

There are 3 HTML capturing methods you can use, depending on your preferences:

• Single Capture

• Continuous Capture

• Timed Capture

👉 Single Capture

• For every page you want to capture, navigate to it and click "single capture"

  • Press “single capture” (Windows: Ctrl + Shift + S / Mac: Option (⌥) + S)

  • The capture count increased number on the left side

👉 Continuous Capture

• Automatically capture pages as you click through the product

👉 Timed Capture

• Auto-capture 1 page at a time after a 3-second timed countdown

Advanced Settings (⚙️)

Click the Settings icon in the extension to toggle helpful features:

1. Rename Screens

   • Prompted to name each screen after capture

   • Helps you stay organized in the editor

2. Auto Link Screens

   • Automatically links buttons to the next captured screen

   • Saves time when building click-through flows

3. Add Guide on Capture (for Continuous Capture only)

   • Automatically places a tooltip guide where you click

   • Great for fast demo creation on the fly

👉 Tip: Shortcut Key to Highlight Links Once you capture and publish your HTML demo, you can use a shortcut key to find links in your published demo. Press “Ctrl” to instantly highlight all clickable links in blue.