HTML Demo
Last updated
Last updated
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.
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.
👉 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 color.
