Links

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
  • Capture 1 page at a time
    • Press “single capture” or Ctrl + Shift + S to capture
    • 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.