Getting Started with SupaDemo

Go from zero to your first interactive demo in minutes. Set up your account, install the capture tool, and create a polished product walkthrough.

Step 1: Create Your Account

1. Visit SupaDemo

   Go to supademo.com and click "Get Started Free." You can sign up with Google, email, or SSO.

2. Choose Your Workspace

   Create a workspace for your team or personal use. Workspaces organize your demos and manage team access.

3. Complete Onboarding

   SupaDemo walks you through a brief onboarding that introduces the key features - and yes, this onboarding is itself a SupaDemo demo.

Step 2: Install the Chrome Extension

The Chrome extension is your primary tool for capturing demos:

• Open the Chrome Web Store and search for "SupaDemo" or follow the link from your dashboard
• Click "Add to Chrome" and confirm the installation
• Pin the extension to your toolbar for easy access
• Sign in to the extension with your SupaDemo account

Step 3: Capture Your First Demo

1. Navigate to Your Product

   Open the web application or page you want to demo in your browser.

2. Start Capturing

   Click the SupaDemo extension icon and select "Start Capture." The extension enters capture mode with a visible indicator.

3. Click Through Your Flow

   Navigate your product as you normally would. Each click captures a screenshot and records which element you clicked. The extension tracks your actions automatically.

4. Stop Capturing

   When you have completed the flow, click the SupaDemo icon again and select "Stop Capture." Your demo is created with all the steps you performed.

5. Review in the Editor

   SupaDemo opens the editor where you can see all captured steps. The AI has already generated annotations for each step.

Step 4: Understanding the Editor

The SupaDemo editor is where you refine your demo. Key areas include:

AI Auto-Annotation

One of SupaDemo's standout features is AI auto-annotation. When you capture a demo, the AI:

• Identifies the UI element you clicked (button, link, input field, menu item)
• Generates a descriptive instruction like "Click the 'Create Project' button to start a new project"
• Positions the annotation tooltip near the clicked element
• Adds a visual highlight or hotspot to draw attention to the element

You can always edit, regenerate, or replace the AI-generated text. Think of it as a first draft that saves you significant time.

Preview and Editing

Before sharing your demo, preview it to see the viewer experience:

• Click the Preview button to see the demo as a viewer would
• Click through each step to test the flow and check that annotations make sense
• Return to the editor to make adjustments - edit text, reposition annotations, add or remove steps
• Use the AI to regenerate annotations with a different tone (professional, casual, technical)

Quick Start Workflow

Here is a complete quick start workflow for creating a demo in under 5 minutes:

1. Open your product in Chrome
2. Click SupaDemo extension → Start Capture
3. Click through 5-10 key steps of a workflow
4. Click SupaDemo extension → Stop Capture
5. Review AI-generated annotations in the editor
6. Edit any annotations that need refinement
7. Click Preview to test the experience
8. Click Share to get your demo link
Done! You have a shareable interactive demo.