HTML Demo

Storylane records the full, no-code replica (HTML and CSS) of each screen, allowing you to fully tailor it later for your audience. Best when you need to edit screens and create a sales demo environment.

(For example, capturing your product's dashboard to personalize the logo for different customers, remove/blur elements, add different personalization tokens, add media, or customize HTML...)

• Open the tab you wish to capture.

• Launch Storylane's Chrome Extension.

• Click "Create New Demo" (or Add to Existing Demo, if you have a demo already created)

• Select "Record HTML" Storylane will take screenshots with each click you make.

• Click "Single Capture" and Storylane will capture all the page elements (HTML and CSS) of the screen.

• After completing your flow capture, click "Stop Recording".

• Storylane will then open the HTML editor. Learn how to edit your 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

Additionally, you can click the Settings button to toggle 2 additional helpful features:

• Rename Screens

  • Each time a screen is captured, you will be prompted to enter a name for that particular screen. This simplifies sorting through your screens in the Demo Editor, especially for larger demos.

• Auto Link Screens

  • As you create your demo, this will ensure that the screens you capture are automatically linked to their respective buttons by default.