> For the complete documentation index, see [llms.txt](https://docs.supademo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.supademo.com/use-cases/marketing-and-growth/website-demos.md).

# Website Demos

How to embed an interactive product demo on your website with Supademo: inline and popup embeds, form-based lead capture, and analytics on every visitor.

A website demo is an interactive product tour embedded on your marketing site that lets visitors click through real workflows before they sign up or book a call. It answers the question every landing page dodges, "what does this actually look like to use," and unlike a video it reports where each visitor stopped clicking, so you can fix the exact step that loses them.

## How to build it in Supademo

1. Create a tight guided demo of the workflow the page is about. For text-heavy products, a [guided HTML demo](/create/by-demo-type/guided-html-demos.md) keeps UI text sharp at any size; [screenshot demos](/create/by-demo-type/guided-screenshot-and-video-demos.md) work on every plan.
2. Embed it with the standard snippet where the traffic lands: above the fold on feature pages, beside the primary CTA on the homepage. Supademo embeds on any site, including Webflow, WordPress, Framer, and custom stacks.
3. For pages where an inline demo does not fit, use a popup embed: a "Take a tour" button opens the demo in an overlay without redesigning the page.
4. Set up [lead capture](https://docs.supademo.com/capture-leads): a native [form chapter](https://docs.supademo.com/customize/chapters/forms-and-lead-capture) placed after the demo's value moment, with the business-email-only toggle and domain rules keeping the list clean, and CRM sync mapping fields into HubSpot, Salesforce, Marketo, Zoho, or Pipedrive automatically.
5. Match the demo's end CTA to the page's own conversion goal, one action only: start a trial on the pricing page, book a demo on the homepage.
6. Serve multiple personas from one embed with [conditional branching](https://docs.supademo.com/customize/chapters/conditional-branching), letting viewers choose their path, or group flows in a [Showcase](https://docs.supademo.com/share/multi-demo-sharing/showcase-collection).
7. Watch [per-step drop-off and UTM attribution](/analyze/session-metrics.md) weekly; trim the steps where visitors exit and double down on the sources that complete.

**Example:** This product marketing demo shows off Robinhood Legend, Robinhood's advanced trading platform — a website demo built to let visitors experience a flagship feature instead of reading about it.

[**Explore the Robinhood Legend website demo →**](https://app.supademo.com/demo/cmc25hqf5k8r8sn1r3mr0sov3)

## Recommended setup

| Decision           | Recommendation                                                                |
| ------------------ | ----------------------------------------------------------------------------- |
| Demo type          | Guided HTML demo (Growth+) for sharp text; guided screenshot demo on any plan |
| Sharing method     | Inline embed above the fold; popup embed for secondary pages                  |
| Analytics to watch | Per-step drop-off, completion by UTM source, Lead Data volume and quality     |

## Frequently asked questions

### How do I embed an interactive demo on my website?

Copy the embed code from your Supademo's share modal and paste it into your page; it works on any site or CMS, from Webflow and WordPress to fully custom builds. Use the inline embed for dedicated demo sections and the popup embed when you want a button-triggered overlay. Platform-specific walkthroughs are in embed instructions for popular apps.

### Should I gate my website demo with a form?

Place the form after the demo has shown value, not in front of it, and keep it short. Supademo lets you position a form chapter at any step, so a common setup is three to five free steps, then a form, then the deeper content. The business-email-only toggle and domain block lists keep junk out. Leave changelog and docs demos fully ungated.

### Can leads from my website demo go straight to my CRM?

Yes. Native form chapters sync to HubSpot, Salesforce, Marketo, Zoho, and Pipedrive with AI field mapping, and Zapier and webhooks cover everything else. Each lead arrives with its demo engagement context, and Lead Data analytics keeps the full list with CSV export.