# Website Demos

{% embed url="<https://youtu.be/dluKmuMzIiA?feature=shared>" %}

### Why Growth & Marketing Teams Choose Supademo for Website Demos

Embedded Supademos give visitors a hands-on feel for your product the moment they land. You can place a single demo or a multi-demo Showcase directly on key pages, personalize with variables (names, companies, logos), and track who engages—so you know which journeys convert. Brand it to match your site and optimize over time with analytics to lift completion and CTA clicks.

***

### How Teams Use Supademo for Website Demos

* **Homepage & pricing pages** → Embed a concise, above-the-fold tour that tees up your main CTA (trial, demo request).&#x20;
* **Feature & solutions pages** → Use a [Showcase Collection](https://docs.supademo.com/share/multi-demo-sharing/showcase-collection) to group 2–5 flows by persona or use case (e.g., Admin, End-user, Manager).&#x20;
* **Launch & change log posts** → Drop a quick product tour that highlights what’s new and routes to the next action.
* **Global audiences** → Localize text/voiceover with [Translations Hub](https://docs.supademo.com/customize/personalize/translations) so the same embed serves multiple languages.

***

### Tips for Building Better Website Demos 👇

{% stepper %}
{% step %}

#### 🎯 **Design for the fold**

[Embed](https://docs.supademo.com/share/embed) a short, value-led tour where traffic lands (hero or first section). Keep flows tight (≈10–15 steps max) and use [chapters](https://docs.supademo.com/customize/chapters)/back-forward controls in [Hotspots](https://docs.supademo.com/customize/hotspot), or [progress bars](https://docs.supademo.com/admin-and-billing/workspace-maintenance/browser-and-progress-bar) so visitors always know where they are in the demo.&#x20;
{% endstep %}

{% step %}

#### 📚 **Curate with Showcases & Conditional Branching**

Bundle focused demos into a [Showcase](https://docs.supademo.com/share/multi-demo-sharing/showcase-collection) (playlist/checklist) and apply [conditional branching](https://docs.supademo.com/customize/chapters/conditional-branching) so visitors can self-select the most relevant path without leaving the page.&#x20;

{% hint style="info" %}
**👉 Pro Tip:** Skip user-enabled transitions by turning on [autoplay](https://docs.supademo.com/customize/animation/autoplay-and-loop) to keep the momentum going.
{% endhint %}
{% endstep %}

{% step %}

#### 🎬 **Drive Action with CTAs**

Marketing demos only work if they point visitors to the next step. Keep your CTA consistent with your site’s main conversion goal — whether that’s “Start Free Trial,” “Book a Demo,” or “See Pricing.” Use [Share Page Buttons](https://docs.supademo.com/customize/settings) or [Watermarks](https://docs.supademo.com/customize/personalize/custom-branding/watermark) so CTAs stay visible throughout the experience, not just at the end. For longer Showcases, consider adding micro-CTAs using [Chapters](https://docs.supademo.com/customize/chapters) after key “wow” moments to capture momentum before drop-off.

{% hint style="info" %}
**👉 Pro Tip:** Align the demo CTA with the **primary CTA on the hosting page** (e.g., trial on pricing page, demo request on homepage) so visitors aren’t confused or pulled in different directions.
{% endhint %}
{% endstep %}

{% step %}

#### 🖼️ **Match your brand**

Apply [Showcase theme](https://docs.supademo.com/customize/personalize/custom-branding/showcase-theme), backgrounds, and [workspace/theme](https://docs.supademo.com/customize/personalize/custom-branding/workspace-theme) settings so embeds feel native to your site and [SEO-friendly](https://docs.supademo.com/customize/settings/seo-and-titles) when shared.&#x20;

{% hint style="info" %}
👉 **Pro Tip:** If you’re serving a global audience, use [AI Voiceovers](https://docs.supademo.com/customize/voiceovers/instant-ai-voiceover) and [AI Translations](https://docs.supademo.com/customize/personalize/translations) to create one branded demo that can be seamlessly translated and consumed in multiple languages.
{% endhint %}
{% endstep %}

{% step %}

#### 📊 **Measure & iterate**

Share via [trackable links](https://docs.supademo.com/share/share-link/trackable-share-links) or UTM’d URLs and review session metrics (views, completion, drop-offs). Pipe identified traffic to CRM via integrations (e.g., [HubSpot](https://docs.supademo.com/admin-and-billing/integrations/hubspot)/[Salesforce](https://docs.supademo.com/admin-and-billing/integrations/salesforce)) or send notifications to [Slack](https://docs.supademo.com/admin-and-billing/integrations/slack) for fast, informed follow-up.
{% endstep %}
{% endstepper %}