Storylane Docs
PRODUCT RELEASESPLAYBOOKS
  • 👋Welcome to Storylane
  • 📚Storylane Playbooks
  • 🚀Quick Start Guide
    • Planning your Demo
  • ⭐Demo Type Examples
  • 📸RECORDING DEMOS
    • Recording - Overview
    • HTML Demo
    • Screenshot Demo
    • Mobile Demo
  • 💻EDITING DEMOS
    • Guides & Chapters
      • Adding Guided Steps
        • Adding Video Clips
        • Editing Video Clips
      • Customizing Steps
      • AI Assist
      • Chapters & Product Tour
    • Editing Screens
      • Cover, Fit, and Fill
    • Personalization
      • Personalize from Lead Form
      • Personalize from URL params
    • Sandbox Demo
      • Presenter Notes
    • Videos & Voiceovers
    • Demo Settings
      • Convert CTA Button
  • 🎊SHARING DEMOS
    • Sharing - Overview
    • Embed
    • Share Link
    • Via Email Campaigns
      • Share via Gmail Plugin
    • Socials
    • Download
    • Link Security
    • Conference Mode
  • 🌟Lily AI
    • Overview: Meet Lily
    • Lily For Demo Creation 🚀
      • Create & Improve with AI
      • AI Video Avatars
      • AI Voiceovers
      • AI HTML Editor
    • Coming Soon: Lily for Buyer Discovery 🔍
  • 🌐DEMO HUB
    • Demo Hub Overview
    • Demo Hub Configuration
    • Demo Hub Analytics
  • 📈TRACKING AND ANALYSING
    • Lead Capturing
    • Lead Attribution
    • UTM Tracking
    • Account-Level Insights
    • Viewer Data Enrichment
    • Usage Tracking
      • Analyzing Demo Performance
  • 🔗Integrations
    • Integrations
      • HubSpot
        • HubSpot Lead Forms
        • Hubspot Integration Features
        • Hubspot Website Embeds
        • Storylane App for HubSpot
        • Matching HubSpot Tokens to Storylane Tokens
      • Marketo
        • Marketo Lead Forms
      • Pardot
        • Custom Pardot Form
      • Salesforce
        • Storylane App for Salesforce
      • Slack
      • FreshSales
      • Dynamics 365
      • Zapier
      • Google Analytics
      • Gmail
      • Segment
      • Intercom
      • Clearbit
      • SourceForge
      • G2
      • Webhooks
      • Cross-Frame Events
      • External API
  • 🤓Account
    • Managing Demos
    • Managing Team
    • Branding
      • Custom Theme
      • Custom Domain
    • GDPR Compliance
    • SSO
    • FAQs
      • How and Why to use Cookie Tracking?
      • How to capture HTML screens from multiple tabs?
      • How to edit the background of a screen with a pop-up?
      • How to copy a chapter to a demo?
      • How to add pop-up message for non-clickable elements?
      • How to Add/Embed a Storylane Demo in a Zendesk Article
      • Customizing and Tracking Demo URL Links
      • How to combine Desktop and Mobile captures?
      • If I Cancel My Subscription, What Happens To My Demos?
      • What accessibility standards do you support?
      • How to add or subtract a Date & Time token?
      • Why is part of my screen cut off in a demo?
      • How to Install & Connect Storylane via HubSpot Marketplace?
      • How do I send data to 6Sense?
      • Lead Attribution Tracking?
      • How to record a video avatar?
      • How to rearrange folders?
      • Do I need to update my cookie policy if I use Storylane?
      • Is it possible to connect a LinkedIn tracking pixel to Storylane?
Powered by GitBook
On this page
  • Storylane Chrome Extension
  • Recording Demo
  • Can I create a demo manually without using the Chrome extension?
  • Storylane Desktop App for Mac
  1. 📸RECORDING DEMOS

Recording - Overview

The first step in making a Storylane Interactive Demo is Recording.

PreviousDemo Type ExamplesNextHTML Demo

Last updated 2 months ago

There are multiple options to record your demo:

  • Storylane Chrome Extension

  • Manual Uploads

  • Storylane Desktop App for Mac

Storylane Chrome Extension

  • First things first, make sure to install the Storylane Chrome Extension. Creating demos using our extension is super simple and easy - it takes 10 mins to get your first demo going.

Recording Demo

Storylane gives you two choices for recording your demo, the Screen Capture (Screenshot Demo) and the HTML Capture (HTML Demo).

  • The Screenshot Demo: With each click in your workflow, the Storylane extension takes a screenshot of it.

  • The HTML Demo: Storylane records the HTML and CSS of your screen, allowing you to customize and personalize it thoroughly for your viewers.

Pro tip: Use keyboard shortcut to capture screens faster: "option ⌥ + s"

Can I create a demo manually without using the Chrome extension?

You bet! While the Chrome extension is a convenient tool for creating Storylane demos, you have the flexibility to manually create a demo without it.

This can be done by uploading your images or videos. Additionally, this approach allows you to incorporate other media into your demos during editing.

Particularly useful in scenarios where you might not have direct access to the product you want to demonstrate, or if you're working with designs in Figma and want to showcase specific screens, you can manually upload these screens to Storylane.

Figma tip: We recommend using Figma's prototype mode and recording it directly via the Storylane extension for a smoother workflow.

Coming Soon: Figma Plugin

Storylane Desktop App for Mac

With the Storylane Desktop App for Mac, you’re no longer limited to browser-based recording. Now, you can capture any screen, any app, any workflow—perfect for multi-app navigation, product walkthroughs, and high-quality demos.

Getting Started

  1. Download & Install – Grab the Storylane Desktop App for Mac.

  2. Start Recording – Launch the app and begin capturing your screen.

  3. Showcase Your Demo – Share your recording instantly with your audience.

Ready to see it in action? Try this interactive demo below! 👇

Ensure that every image and video added to your demo share identical dimensions for optimal appearance.

Storylane Chrome Extension