
# Install Figma Plugin

To use LiveDemo in Figma, you need to install the LiveDemo App plugin.

**Important:** LiveDemo integrates seamlessly with Figma through the plugin. Simply install it and start creating amazing product demos directly from your Figma designs.

Install the Figma Plugin with the link below : 

<a href="https://www.figma.com/community/plugin/1592001133823412557/livedemo-app" target="_blank" rel="noopener noreferrer">LiveDemo App - Figma Community</a>

* Open your Figma desktop app or go to <a href="https://www.figma.com" target="_blank" rel="noopener noreferrer">Figma</a> in your browser.
* Go to <a href="https://www.figma.com/community/plugin/1592001133823412557/livedemo-app" target="_blank" rel="noopener noreferrer">the LiveDemo App plugin page</a>.
* Click on "Open in Figma".
* The plugin will be added to your Figma account and will be available in your plugins menu on a right click.


<figure><img src="/images/docs/open-figma-plugin.png" alt="Open Figma Plugin" style={{maxWidth: 650}}></img><figcaption></figcaption></figure>

Install Figma Plugin


# Introduction

LiveDemo is a plug-and-play SaaS platform that enables anyone to create interactive demos, product tours, and step-by-step guides in seconds. A LiveDemo is an interactive demonstration that you can share with anyone via a link, embedded on a website, through an email campaign, inside a help center article, and more.

A LiveDemo helps you show how to do something on an app or website, how a feature works, and its value. You can then use the demos you've created to boost your team's productivity, increase conversion rates and sales, or guide users into your platform.

**Here is a LiveDemo example:**

<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62d774dbe0ef18000987c428/stories/635f1647fb0c61001ae02868/preview?step=1&embed"}/>

Here are some other examples of what you can use LiveDemo for:

**Sales**: As an interactive sales material to send inside cold outreach campaigns, follow-ups, or during live demos.

**Marketing**: As an interactive product tour that you can embed in your website to increase conversions and collect leads information.

**Customer Success**: As onboarding content to guide new users into using your solution and reduce the workload for CSM teams.

**Customer Support**: As a guiding material to embed inside help center articles or to share with users to guide them through complex workflows on your solution.

**Employee training/onboarding**: As a training material for internal use that you can insert in your company's knowledge base (to show how to use software with the company processes).

## How does LiveDemo work?

Thanks to LiveDemo, you can capture a workflow on any app or website, create a customized experience, share it, and get detailed analytics. LiveDemo relies on a Chrome extension and the web app. 

Thanks to the Chrome extension, you can capture a workflow on an app or a website. All screens and interactions (clicks and scrolls) will be captured to generate an interactive experience. After you capture the workflow with the Chrome extension, you can customize and manage your demos through our web app. There, you'll be able to add call-to-actions, edit the theme of your demo to make it match your brand identity, access detailed analytics, and various sharing options.

🚀 Ready to get started and capture your first LiveDemo?


## Getting Help

If you need assistance:

* Check our [FAQ section](/docs/resources/faq)
* Contact [support@livedemo.ai](mailto:support@livedemo.ai)


Introduction


# What can I use LiveDemo for?

LiveDemos can be used for various use cases. Here is a quick overview of what you can use LiveDemo for:

* **Sales:** As an interactive sales material to send inside cold outreach campaigns, follow-ups, or during live demos.
* **Marketing**: As an interactive product tour that you can embed in your website to increase conversions and collect leads information.
* **Customer Success**: As onboarding content to guide new users into using your solution, and reduce the workload for CSM teams.
* **Customer Support**: As a guiding material to embed inside help center articles or to share with users to guide them through complex workflows on your solution.
* **Employee training/onboarding:** As a training material for internal use that you can insert in your company's knowledge base (to show how to use software like Salesforce with the company processes).



What can I use LiveDemo for?


# Install Chrome extension

To capture a demo you need to install the Chrome extension. 

**Important:** LiveDemo creates your demo using the Chrome extension. Simply add it to Chrome and start creating demos in no time

Install the Chrome Extension with the link below : 

<a href="https://chrome.google.com/webstore/detail/livedemo-app/dnlnaeifccbhdnbppjjgleapjadjklbe" target="_blank" rel="noopener noreferrer">LiveDemo - Chrome Web Store</a>

* Open your Google Chrome browser.
* Go to <a href="https://chrome.google.com/webstore/detail/livedemo-app/dnlnaeifccbhdnbppjjgleapjadjklbe" target="_blank" rel="noopener noreferrer">this page</a>.
* Click on "Add to Chrome".
* A pop-up will appear, click on "Add extension".



Install Chrome Extension

Getting Started


# How to capture a LiveDemo

Make sure that you have the Chrome extension downloaded and installed on your browser before you get started.

* Open LiveDemo's Chrome extension.
* Select the capture type.
* Click Start capture.

## Guide
    
<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62d774dbe0ef18000987c428/stories/635f1647fb0c61001ae02868/preview?step=1&embed"}/>



## Available options

There are three methods used to capture content for interactive demos:

* **Manual recordring** - enables you to create a LiveDemo using screenshots and videos based on your clicks

<figure><img src="/images/docs/record-manual-demo.png" alt="Open Figma Plugin" style={{maxWidth: 350}}></img><figcaption></figcaption></figure>

* **AI recording** - enables you to create a LiveDemo from Demo Suggestions based on your visited pages during recording

<figure><img src="/images/docs/record-ai-demo.png" alt="Open Figma Plugin" style={{maxWidth: 350}}></img><figcaption></figcaption></figure>

You can combine Screenshots and Videos and Popups in a single LiveDemo.

Which capture method to use:

* Manual recording - when you know the workflow you want to demo
* AI recording - when you want to have an AI recommended demo for your application



How to capture a LiveDemo

# Demo Types

Learn how to create engaging, interactive demos with LiveDemo.

## Demo Types

LiveDemo supports several types of demos:

### Manual Recording

#### 1. Guided Tours
Step-by-step walkthroughs of your product features.

#### 2. Interactive Showcases
Let users explore features at their own pace.

#### 3. Video Demos
Combine video content with interactive elements.

#### 4. Sandbox Environments
Provide a safe environment for users to try features.

### AI Recording
AI Recording demo generates a few Demo Suggestions for you
based on your navigation pattern and you can select 
which Demo Suggestion you want to turn into a LiveDemo
LiveDemo AI automatically guesses what you are doing in the recording


## Best Practices

1. **Keep it Short**: 5-7 steps is ideal
2. **Clear Messaging**: Use concise, action-oriented language
3. **Visual Hierarchy**: Highlight important elements
4. **Mobile Friendly**: Test on mobile devices
5. **Loading States**: Handle async operations gracefully

## Demo Templates

Start with pre-built templates:

- Product Onboarding
- Feature Announcement
- Sales Demo
- Training Tutorial
- Support Guide

---


Demo Types

# Analytics

Track and analyze your demos with built-in analytics.

## Analytics Dashboard

<figure><img src="/images/docs/analytics-page.png" alt="Open Figma Plugin" style={{maxWidth: 650}}></img><figcaption></figcaption></figure>

Access detailed metrics in your LiveDemo dashboard:

- **Views**: Total demo views
- **Completion Rate**: % of users who finish
- **Drop-off Points**: On which step users leave
- **Average Time**: Time spent in demo
- **Engagement rate**: Users moved from first step
- **Captured Leads**: Number of Leads captured

---

Learn more about [Best Practices](/docs/guides/best-practices)



Analytics

Capture a LiveDemo


# How to capture a LiveDemo

Make sure that you have the Chrome extension downloaded and installed on your browser before you get started.

* Open LiveDemo's Chrome extension.
* Select the capture type.
* Click Start capture.

## Guide
<LiveDemoIframe src={"https://story-api.livedemo.ai/workspaces/62d774dbe0ef18000987c428/stories/635f1647fb0c61001ae02868/preview?step=1&embed"}/>


## Available options

There are three methods used to capture content for interactive demos:

* **Manual recordring** - enables you to create a LiveDemo using screenshots and videos based on your clicks
* **AI recording** - enables you to create a LiveDemo from Demo Suggestions based on your visited pages during recording

You can combine Screenshots and Videos and Popups in a single LiveDemo.

Which capture method to use:

* Manual recording - when you know the workflow you want to demo
* AI recording - when you want to have an AI recommended demo for your application



How to edit a LiveDemo

Steps

Design

Popup

Zoom

Voiceover

Autoplay

Edit a LiveDemo

Share your public LiveDemo

Embed on website

Share on Medium

Share on X (Twitter)

Share into email platforms

Export in GIF or Video

Share

# Integrations

Connect LiveDemo with your favorite tools and platforms.

## CRM Integrations

### HubSpot
Comming soon

---

Continue to [Support](/docs/resources/support)



Remove Watermark

Branding

# Best Practices

Follow these best practices to create effective demos.

## Demo Design

### 1. Start with a Goal
Define what you want users to learn or do:
- Sign up for trial
- Understand key feature
- Complete onboarding
- Explore advanced features

### 2. Keep It Focused
- Limit to 5-7 steps
- Cover one main topic per demo
- Avoid information overload

### 3. Use Clear Language
- Action-oriented copy
- Short sentences
- Avoid jargon
- Use "you" language


## Content Strategy

### Storytelling
Create a narrative:
- Set the context
- Show the problem
- Demonstrate the solution
- Highlight the benefit

### Call-to-Actions
End with clear next steps


## Maintenance

### Regular Updates
- Review analytics weekly
- Update outdated content
- Fix broken links/elements
- Refresh screenshots

---



Best Practices

Integrations

Guides

# Frequently Asked Questions

Common questions about LiveDemo.

## General

### What is LiveDemo?

LiveDemo is a product experience platform that helps you create interactive demos, product tours, and tutorials to accelerate product-led growth.

## Pricing & Plans

### Is there a free trial?

Yes! We offer a 14-day free trial with full access to all features. No credit card required.

### What plans are available?

- **Startup**: $Free
- **Business**: $299/Annually
- **Enterprise**: Custom pricing

### Can I self-host LiveDemo?

Contact support for more information

### Does LiveDemo support SSR/Next.js?

Yes! Check our [installation guide](/docs/getting-started/install-chrome-extension) for SSR setup.

## Demos & Content

### How many demos can I create?

Unlimited demos on all plans.

### Can I use custom branding?

Yes! All plans include custom branding. Remove "Powered by LiveDemo" on Business and above.


## Analytics

### What analytics are included?

- Views and unique visitors
- Completion rates
- Time spent per step
- Drop-off analysis
- User journey tracking
- Conversion tracking
- Full Session recording 

### Can I export analytics data?

Contact support for more information

## Security & Privacy

### Is LiveDemo GDPR compliant?

Yes! LiveDemo is fully GDPR compliant. We:
- Don't store PII without consent
- Support data deletion requests
- Provide data processing agreements
- Allow cookie consent controls

### Is my data secure?

Yes! We use:
- 256-bit SSL/TLS encryption in transit
- SOC 2 Type II compliant infrastructure, hosted on Google Cloud Platform 
- Regular security audits and monitoring
- Data encryption at rest


### Do you support SSO?

Contact support for more information

## Support

### What support do you offer?

- **Startup**: Email support + chat support (24-48h response)
- **Business**: Email + chat support (6h response)

### Do you offer onboarding?

Yes! Business include:
- Onboarding call
- Demo setup assistance
- Best practices consultation

### Where can I find documentation?

Right here! Browse our docs or search for specific topics.

## Integration

### What integrations do you support?

See our [Integrations page](/docs/guides/integrations) for the full list including:
- HubSpot

### Can I create custom integrations?

Contact support for more information

## Billing

### What payment methods do you accept?

- Credit/debit cards (Visa, Mastercard, Amex)
- ACH (US only)
- Wire transfer (annual plans)
- Purchase orders (Enterprise)

### Are there setup fees?

No setup fees on any plan!

## Still Have Questions?

- 📧 Email: support@livedemo.ai
- 💬 Chat: Available in dashboard
- 📅 Book a demo: https://cal.com/george-apostolov/30min

---

Check out our [Changelog](/docs/resources/changelog) for latest updates



# Changelog

Track all updates, improvements, and fixes to LiveDemo.

## [2.5.0] - 2025-12-31

### ✨ New Features

- **AI-Powered Demo Suggestions**: Get intelligent recommendations for demo creation
- **Advanced Branching**: Create complex multi-path demos with conditional logic
- **Custom Links**: Personalize demos for each prospect with custom templates

### 🚀 Improvements

- Enhanced mobile responsiveness
- Better keyboard navigation support
- Upgraded analytics dashboard with new charts

### 🐛 Bug Fixes

- Fixed tooltip positioning on scrollable containers
- Resolved Safari compatibility issues
- Fixed memory leak in long-running demos
- Corrected timezone handling in analytics



Visit [Support](/docs/resources/support) if you need help



Changelog

# Support

Get help with LiveDemo.

## Support Channels

### 📧 Email Support

**General Support**: support@livedemo.ai  
**Sales**: sales@livedemo.ai  
**Book a Call**: https://cal.com/george-apostolov/30min

**Response Times**:
- Starter: 24-48 hours
- Business: 6 hours

### 💬 Live Chat

Available in your LiveDemo dashboard:
- Monday-Friday: 9 AM - 6 PM EST
- Business plan and above

### 📚 Documentation

You're already here! Browse our comprehensive docs:
- [Capture a livedemo](/docs/capture-a-livedemo/how-to-capture-a-livedemo)
- [Best Practices](/docs/guides/best-practices)
- [FAQ](/docs/resources/faq)

## Learning Resources

### Blog

Read articles and best practices on our [blog](https://livedemo.ai/blog):
- Product announcements
- Customer stories
- Tips and tricks
- Industry insights


## Report a Bug

Found a bug? Let us know!

### Via Email

Email support@livedemo.ai with:
- Description of the bug
- Steps to reproduce
- Expected vs actual behavior
- Browser and OS info
- Screenshots or videos

## Feature Requests

Have an idea? We'd love to hear it!

### Direct Contact

Email support@livedemo.ai with:
- Feature description
- Use case
- Expected benefit
- Priority level

## Security Issues

Found a security vulnerability?

**Do NOT post publicly**. Email security@livedemo.ai with:
- Detailed description
- Steps to reproduce
- Potential impact
- Your contact information

We'll respond within 24 hours and work with you to resolve the issue.

### Maintenance Windows

Scheduled maintenance:
- Sundays 2-4 AM EST
- Announced 7 days in advance
- Zero-downtime deployments


## Connect With Us

### Social Media

- **Twitter**: [@Live_Demo_Live](https://twitter.com/Live_Demo_Live)
- **LinkedIn**: [LiveDemo](https://linkedin.com/company/livedemo)

---

**Thank you for using LiveDemo!** We're here to help you succeed.

