
# 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 the free LiveDemo Chrome extension from the Chrome Web Store to capture interactive demos of any web app or website.

Install the LiveDemo Chrome Extension

Install Chrome Extension

LiveDemo is an interactive demo platform: capture any web app with a Chrome extension, edit it, share it, track engagement and let an AI Demo Agent give demos.

Introduction

Create your first LiveDemo in four steps: install the Chrome extension, capture a workflow, edit it and share or embed it.

Quick Start

Recipes for using LiveDemo interactive demos: website product tours, sales outreach, help center guides, customer onboarding, product launches and AI-led inbound demos.

Use Cases

Sign up for LiveDemo with Google or email, verify your email address and answer the onboarding questions to get to your first interactive demo.

Create Your Account

Download the LiveDemo desktop recorder for Mac or Windows to record desktop apps and anything outside the browser.

Install Desktop App

Install the LiveDemo App plugin from the Figma Community to turn your Figma designs into interactive product demos.

Install Figma Plugin

Definitions of the terms used in LiveDemo: LiveDemo, screen, step, pointer, hotspot, popup, transition, workspace, AI Demo Agent, session, lead and more.

Glossary

Getting Started

Capture an interactive demo with the LiveDemo Chrome extension: screenshots and video, HTML, AI recording or a blank demo.

How to capture a LiveDemo

Compare LiveDemo demo types (screenshot, video, HTML, AI recording and AI Demo Agent) and pick the right one.

Demo Types

Record a click-through demo with the LiveDemo Chrome extension: a screenshot on every click plus a video of the tab.

Screenshots + Video

Capture the real HTML of your app with the LiveDemo Chrome extension, so text and images stay sharp and editable after recording.

HTML Demos

Browse your app with AI Recording on and LiveDemo suggests three ready-made demo flows. Pick one and generate a LiveDemo.

AI Recording

Enter your website URL and LiveDemo generates an interactive demo from it automatically, ready to edit.

URL to Demo

Start a blank LiveDemo and upload your own screenshots or videos, or add screens to an existing demo from the extension or the library.

Blank Demo & Uploads

Prepare your app before you record a LiveDemo: demo data, window size, notifications, sensitive data and how to click for clean steps.

Recording Tips

Capture a LiveDemo

Learn how to open a captured LiveDemo in the editor and change steps, text, design, zoom, popups and voiceover before you publish.

How to edit a LiveDemo

Rename, reorder, duplicate and delete screens in the LiveDemo editor, add screens from the library or by upload, and understand screen types.

Screens

Add, reorder, duplicate and delete the steps of your LiveDemo so the interactive demo follows the exact flow you want buyers to see.

Steps

Guide viewers with pointer steps (an animated cursor) or hotspot steps (a pulsing dot), and set their placement and options in LiveDemo.

Pointer & Hotspot Steps

Format tooltip text, personalize it with variables, change the Next button label and footer, and write step copy that converts.

Step Text & Buttons

Add the pointer click or hotspot that moves viewers from one screen of a LiveDemo to the next.

Transitions

Add popups to your LiveDemo to introduce a feature, explain a step or capture leads with a form inside the interactive demo.

Popup

Add call-to-action buttons to LiveDemo popups: go to the next step, jump to a screen or open a website, with colors and attention effects.

Popup Buttons & Effects

Add a lead capture form to a LiveDemo: fields, required answers, dropdowns, captcha, placement tips and where submissions go.

Lead Forms

Use an Embed popup to put a Calendly or Cal.com calendar, a Typeform, a video or any HTML embed inside your LiveDemo.

Embed Popups

Build a choose-your-own-path LiveDemo with popup buttons that jump to different screens, for different personas or features.

Branching

Use zoom in the LiveDemo editor to focus viewers on the important part of a screen and make small UI details readable.

Zoom

Speed up video screens, add zooms on the timeline and turn video frames into screenshot screens in the LiveDemo editor.

Video Screens

Add AI voiceover to your LiveDemo so each step of the interactive demo is narrated for viewers.

Voiceover

Use Enhance with AI to rewrite every step of your LiveDemo into a clear, contextual guide in one click.

AI Text

Turn on autoplay to play your LiveDemo step by step automatically, like a video, while keeping it interactive.

Autoplay

Change copy, numbers, colors and images on captured HTML screens in LiveDemo without recording again.

Edit Page Content

Blur or hide emails, names, revenue and other sensitive data in your LiveDemo before you share it.

Blur & Hide Data

Customize the look of your LiveDemo: brand colors, fonts, hotspots and tooltip styles that match your product and website.

Design

Match your LiveDemo to your brand with tooltip and button colors, a Google font, tooltip arrows, hover glow and footer button style.

Theme

Frame your LiveDemo on a solid color, gradient or wallpaper, with padding and blur, for a polished look on your website.

Background

Play a preset track or your own audio behind your LiveDemo, trim long files and set the volume.

Music

Turn on completion confetti, remove the browser wrapper, show navigation tabs, use a large custom cursor and control the watermark in LiveDemo.

Misc Settings

Add variables such as company or first name to a LiveDemo and fill them per prospect with custom links, so each viewer sees their own name.

Variables

Add Content Security Policy directives so embeds, fonts and images from other domains load inside your LiveDemo.

Content Security Policy

Edit a LiveDemo

Find, open, copy, tag and delete your LiveDemos, AI Recordings and AI Demo Agents from the Demos page.

Demos Page

Create tags, tag one or many LiveDemos at once and filter the Demos page by tag.

Tags & Filters

Duplicate a LiveDemo to make variants per prospect, language or audience, and delete demos you no longer need.

Copy & Delete Demos

Manage Demos

Publish your LiveDemo and share a public link so prospects and customers can explore the interactive demo without signing up.

Share your public LiveDemo

Control who can view your LiveDemo with the Public access switch, and what viewers see when a demo is private.

Public & Private Access

Create a LiveDemo link per prospect or campaign with its own variable values, so one demo shows each viewer their own name.

Custom Links

Share LiveDemos and AI Demo Agents from your own subdomain, like demos.acme.com, with one CNAME record and automatic HTTPS.

Custom Domain

Preview your LiveDemo as viewers see it and present it fullscreen on a sales call or at an event.

Preview & Fullscreen

Embed your LiveDemo on your website, landing pages or help center with a responsive iframe snippet.

Embed on website

Control where an embedded LiveDemo starts, autoplay, audio, custom links and personalization with URL parameters.

URL Parameters

Listen to step changes from an embedded LiveDemo and move it to any step from your page with postMessage.

Embed Events

Add an interactive LiveDemo to a WordPress page or post with a Custom HTML block, in the block editor or Elementor.

Embed in WordPress

Add an interactive LiveDemo to a Webflow page or CMS collection with a Code Embed element.

Embed in Webflow

Add an interactive LiveDemo to a Framer site with the Embed component.

Embed in Framer

Add an interactive LiveDemo to a Wix site with the Embed HTML element.

Embed in Wix

Add an interactive LiveDemo to a Squarespace page with a Code block.

Embed in Squarespace

Add an interactive LiveDemo to HubSpot landing pages, website pages, blog posts and knowledge base articles.

Embed in HubSpot Pages

Add an interactive LiveDemo to a Notion page for internal docs, onboarding wikis and public Notion sites.

Embed in Notion

Add interactive LiveDemos to Zendesk Guide, Intercom, HelpScout and other help center articles.

Embed in Zendesk & Help Centers

Add an interactive LiveDemo to a React or Next.js app with a small responsive iframe component and listen to step events.

Embed in React & Next.js

Share your LiveDemo in Medium articles so readers can try your product right inside the post.

Share on Medium

Share your LiveDemo on X (Twitter) with a link preview that drives followers into the interactive demo.

Share on X (Twitter)

Add your LiveDemo to marketing and sales emails with a preview image that links readers straight into the interactive demo.

Share into email platforms

Export your LiveDemo as a GIF or video to use in social posts, docs, presentations and anywhere iframes are not supported.

Export in GIF or Video

Share

See how viewers engage with your LiveDemos and AI Demo Agents: views, completion, drop-off, sessions and leads.

Analytics Overview

Understand LiveDemo views, unique users, engagement, completion and drop-off per demo and per viewing session.

Sessions

Replay exactly how a viewer moved through your LiveDemo, step by step, to find confusing steps and hot leads.

Session Replays

See every lead captured by LiveDemo forms and AI Demo Agents, and export them to CSV.

Leads

Stop your own team's views from counting in LiveDemo analytics with excluded IP addresses.

Exclude Internal Traffic

Send LiveDemo demo views, completions, leads and AI Demo Agent events to Google Analytics 4, server-side or from your own website.

Google Analytics

Send LiveDemo demo and AI Demo Agent events to Segment as track calls, server-side or from your own website, and on to any Segment destination.

Segment

Analytics

Remove the LiveDemo watermark from your interactive demos and AI Demo Agent on any paid plan, or replace it with your own logo.

Remove Watermark

Branding

Create an AI Demo Agent that answers buyer questions from your knowledge, opens the right LiveDemo, qualifies visitors and books meetings.

Create an AI Demo Agent

Set your AI Demo Agent's welcome message, starter questions and extra instructions so it sounds like your best sales rep.

Persona

Give your AI Demo Agent an ElevenLabs voice and an Anam or LemonSlice video avatar, or create an avatar from a photo.

Voice & Avatar

Pick which demos the AI Demo Agent can open, set its theme, and undo or revert changes with version history.

Demos, Theme & History

Teach the AI Demo Agent from your whole website, documents, FAQs and sales calls, see exactly what it reads, and fill the gaps.

Knowledge

Crawl your marketing site, docs or help center into the AI Demo Agent's knowledge and keep it up to date automatically.

Crawl Your Website

See the questions your AI Demo Agent couldn't answer, grouped by topic, and turn them into FAQ answers in one click.

Knowledge Gaps

Ask visitors for their name and email before the chat, capture emails during the conversation, or identify logged-in users from your site.

Lead Capture

Let the AI Demo Agent ask your qualification questions, decide who is qualified with your own rules, and book meetings inside the demo.

Qualification & Booking

Show every prospect a demo with their own company name, first name and logo, from an agent link or your website.

Personalized Demos

Every AI Demo Agent conversation gets a summary, topics, buying intent, unanswered questions and an optional recap email to the visitor.

Conversation Insights

Email AI Demo Agent visitors a recap of their conversation automatically, from LiveDemo or your own SMTP server.

Summary Emails

Every AI Demo Agent session gets a private, shareable recap page that visitors forward to their team, and you see who opened it.

Recap Page

Put the AI Demo Agent on your website as a chat bubble, email pill, smart search bar, button or inline iframe, with different behaviour per page.

Website Widget

Show a different teaser, starter questions or auto-open per page, or hide the AI Demo Agent widget on pages like checkout.

Page Rules

Open, close and identify visitors in the AI Demo Agent widget from your own code, and listen to lead, demo and booking events.

JavaScript API

Send AI Demo Agent leads, qualified visitors, bookings and conversation summaries to Slack, Zapier or your own endpoint with signed webhooks.

Webhooks & Slack

AI Demo Agent

Connect LiveDemo to HubSpot, Slack, Zapier or Make through webhooks, and Calendly or Cal.com, to sync leads and get alerts.

Integrations Overview

Connect HubSpot to LiveDemo to create contacts from demo and AI Demo Agent leads, add conversation notes, and use HubSpot forms in demos.

HubSpot

Get Slack alerts when an AI Demo Agent captures, qualifies or books a lead, with the summary and a replay link.

Slack

Send AI Demo Agent leads and events to Zapier, Make or n8n with webhooks, and on to Salesforce, Pipedrive, Google Sheets and more.

Zapier & Make

Let visitors book a meeting inside the AI Demo Agent with Calendly or Cal.com, or inside a demo with an embed popup.

Calendly & Cal.com

Connect Claude, ChatGPT, Cursor or Claude Code to LiveDemo with the MCP server to list demos, get share links, read leads and create demos from a URL.

Install Chrome extension

More in Getting Started