Intermediate

Creating Demos

Master the art of demo creation with advanced screen capture techniques, step editing, AI text generation, hotspots, branching paths, and more.

Screen Capture Techniques

Great demos start with clean captures. Follow these techniques for the best results:

  • Clean your UI: Before capturing, close unnecessary tabs, hide bookmarks bar, and use a clean browser profile. Remove personal data or use test accounts
  • Set browser size: Use a consistent browser width (1280px or 1440px are recommended). This ensures your demo looks good when embedded
  • Prepare your data: Pre-populate your product with realistic sample data. Empty states are less compelling than populated interfaces
  • Plan your flow: Map out the exact clicks you will make before starting capture. A planned 8-step demo is better than a wandering 20-step one
  • Slow down: Click deliberately and wait for pages to fully load before clicking the next element. The extension captures the current screen state

Step Editing

After capturing, you have full control over every step in your demo:

Adding Steps

Insert new steps between existing ones by clicking the "+" button in the step timeline. You can upload a screenshot or capture a new one directly from the editor.

Removing Steps

Delete unnecessary steps by selecting them and pressing Delete, or right-clicking for the context menu. Removing transitional or redundant steps makes your demo more focused.

Reordering Steps

Drag and drop steps in the timeline to reorder them. This is useful when you captured actions out of order or want to restructure the flow.

✅
Editing tip: After capturing, review your demo and remove any "filler" steps — loading screens, unnecessary navigation, or redundant clicks. A tight demo with 5-8 focused steps outperforms a long demo with 20+ steps every time.

AI Text Generation for Annotations

SupaDemo's AI generates annotation text automatically, but you can refine it:

  • Regenerate: Click the AI button on any annotation to get a new version. Each regeneration produces different wording
  • Change tone: Ask the AI to rewrite in a specific tone: professional, friendly, technical, or concise
  • Translate: Convert annotations to other languages for international audiences
  • Bulk edit: Apply tone or style changes across all steps at once
  • Manual override: Edit any annotation text directly. Your edits are preserved even if you regenerate other steps

Hotspot Creation

Hotspots are interactive elements that guide viewers to the right place on each step:

Hotspot Type Use Case
Click indicator Shows where the viewer should click with a pulsing animation. Auto-generated from your captured clicks
Highlight box Draws a rectangle around a UI area to focus attention. Great for highlighting sections or changes
Tooltip A floating text box that explains a specific element. Position it near the element it describes
Blur/focus Blurs the rest of the screen to draw attention to a specific area. Creates a spotlight effect

Branching Paths

Branching lets viewers choose their own adventure through your demo. This is powerful for products with multiple workflows:

  1. Create Branch Points

    At any step, add a branch with two or more options (e.g., "Create a project" or "Join an existing project").

  2. Build Each Path

    Each branch leads to its own sequence of steps. Capture or add steps for each path independently.

  3. Merge or End

    Paths can merge back to a common step or end independently. Design the flow to match your product's user journey.

💡
When to branch: Use branching when your product serves different user personas or has multiple entry points. For example, a CRM demo might branch between "Sales Rep view" and "Manager view" so each viewer sees what is relevant to them.

Video Demos vs. Interactive Demos

SupaDemo supports both formats. Choose based on your needs:

Format Best For Engagement
Interactive (click-through) Product tours, onboarding, documentation High — viewer actively participates
Video Complex workflows, narrated explanations Medium — passive viewing
Hybrid Combining video narration with interactive steps Highest — best of both worlds

Multi-Page Captures

For demos that span multiple pages or tabs:

  • The capture extension automatically tracks page navigation
  • New pages are captured seamlessly as new steps
  • Modal dialogs and popups are captured within their parent page step
  • For cross-domain flows, you may need to capture sections separately and combine them in the editor

Mobile App Demos

SupaDemo is not limited to web applications. For mobile demos:

  • Browser emulation: Use Chrome DevTools mobile view to capture mobile-sized screenshots
  • Screenshot upload: Take screenshots directly on your phone and upload them to SupaDemo
  • Screen recording: Record your mobile screen and convert it to an interactive demo
  • Responsive frame: SupaDemo can wrap your captures in a phone or tablet frame for a realistic appearance

💡 Try It: Advanced Demo Creation

Create a demo with at least one branching path. Pick a product feature with two options (e.g., "Import from CSV" vs. "Create manually") and capture both paths. How does branching change the viewer experience?

Branching demos typically see higher completion rates because viewers only see content relevant to their needs.