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.

Last updated