> For the complete documentation index, see [llms.txt](https://docs.spara.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.spara.com/guides/platform-guides/product-demo-use-cases.md).

# Product Demo Use Cases

The [https://docs.spara.com/agents/capabilities/product-demo](https://docs.spara.com/agents/capabilities/product-demo "mention") capability delivers interactive, voice-narrated demos to your prospects. This guide covers the most common ways to deploy it — each pattern solves a different go-to-market challenge and takes only a few minutes to set up.

For technical details on the JavaScript methods used below, see [https://docs.spara.com/developers/spara-api/javascript-api](https://docs.spara.com/developers/spara-api/javascript-api "mention").

## Convert Website Visitors into Pipeline

**The problem:** Buyers arrive mid-evaluation with strong purchase intent, yet leave without converting. Static forms and generic landing pages fail to surface the product experience needed to drive pipeline.

**The solution:** Embed a CTA button (e.g., "Start AI Demo") directly on your website. When a visitor clicks it, the Product Demo launches in a fullscreen overlay — no navigation away from your site, no form fill, no scheduling friction.

### How to set it up

{% stepper %}
{% step %}
**Add a button to your page with a unique ID**

Place the button wherever you want the CTA to appear (hero section, pricing page, product page, etc.):

```html
<button id="demo-cta">Start AI Demo</button>
```

{% endstep %}

{% step %}
**Add a click handler after your Spara embed script**

Your Spara embed script can be found in [**Settings > Chat > Configuration**](https://app.spara.co/settings/chat/configuration). Add the following JavaScript after it:

```javascript
document.getElementById('demo-cta')?.addEventListener('click', () => {
  SparaActions.openProductDemo();
});
```

When a visitor clicks the button, `SparaActions.openProductDemo()` launches the Product Demo in a fullscreen overlay.
{% endstep %}
{% endstepper %}

## Turn Outgoing Sequences into Interactive Experiences

**The problem:** Outgoing sequences generate opens but not responses. Reps default to generic homepage links that lack relevance, causing prospect engagement to drop off.

**The solution:** Drop a direct link to the Product Demo in your cold emails, LinkedIn messages, or SMS campaigns. Recipients click and immediately experience an interactive, personalized product demo — no form fill, no scheduling friction. The demo acts as a self-serve first touchpoint that warms the prospect before your reps follow up.

### How to set it up

Use `SparaActions.openProductDemo()` to launch a Product Demo session programmatically. Add a query parameter to your landing page URL (e.g., `?demo`) and include JavaScript on your site that checks for the parameter and opens the demo automatically:

```javascript
if (window.location.search.includes('demo')) {
  SparaActions.openProductDemo();
}
```

Then link to `https://yoursite.com/?demo` in your outgoing emails, LinkedIn messages, or SMS campaigns. When a recipient clicks the link, your landing page loads and the Product Demo opens automatically.

See [https://docs.spara.com/developers/spara-api/javascript-api](https://docs.spara.com/developers/spara-api/javascript-api "mention") for additional setup instructions and code examples.

## Convert Chat Conversations into Product Demos

**The problem:** Conversational interfaces excel at top-of-funnel qualification, but fall short when buyers are ready to evaluate the product. The inability to transition from chat to a live product experience results in drop-off at peak purchase intent.

**The solution:** Enable the Product Demo as a suggested action inside your Spara Navigator chat widget. Visitors can click "Start product demo" directly from the chat interface to launch the demo — zero code changes required on your end. Buyers who are already engaged get a natural next step to see the product live.

### How to set it up

Ask your Spara CSM to enable the Product Demo as a suggested action in the Navigator chat widget. Once enabled, it appears automatically — no changes are required on your end.

## Accelerate Sales Cycles with a Pre-Sales Demo Link

**The problem:** Sales cycles lose momentum between calls when prospects have no way to explore the product independently. Scheduling friction extends deal timelines and creates openings for competitive displacement.

**The solution:** Host the Product Demo on a private, non-indexed page that only exists for those with the direct link. Reps share this URL in follow-up emails or deal sequences, and prospects can explore the product on their own time before the next call — no public exposure and no sales engineering required.

### How to set it up

{% stepper %}
{% step %}
**Create a non-indexed page on your website**

In your CMS or website builder (Webflow, WordPress, HubSpot, etc.), create a new blank page with a simple, non-descriptive URL (e.g., `yourcompany.com/demo-preview`).
{% endstep %}

{% step %}
**Exclude the page from search engines**

Add a `noindex` meta tag to the page's `<head>`, or use the built-in "hide from search engines" toggle in your CMS. Do not link to the page from your navigation or anywhere else on your site.
{% endstep %}

{% step %}
**Add the Product Demo to the page**

Follow the steps in [#convert-website-visitors-into-pipeline](#convert-website-visitors-into-pipeline "mention") to embed the Spara script and a CTA button on this page. Alternatively, use the `?demo` query parameter approach from [#turn-outgoing-sequences-into-interactive-experiences](#turn-outgoing-sequences-into-interactive-experiences "mention") to open the demo automatically when the page loads.
{% endstep %}

{% step %}
**Share the link**

Share the page URL (optionally with `?demo` appended) in follow-up emails or deal sequences. Only people with the direct link can access it.
{% endstep %}
{% endstepper %}

## Accelerate Customer Onboarding In-App

**The problem:** New customers often struggle to understand product capabilities during onboarding, resulting in slower time-to-value, more support requests, and increased reliance on CSMs. Traditional onboarding approaches like documentation and live training sessions are difficult to scale.

**The solution:** Embed the Product Demo directly inside your product or customer portal as an in-app widget. New users can launch it at any time to get an interactive walkthrough of features, ask questions in natural language, and get instant answers — without leaving your platform.

### How to set it up

Implementation varies depending on your product's architecture. Work with your Spara CSM to determine the best approach for your use case.

## FAQ

### Can I use more than one of these patterns at the same time?

Yes. Each pattern is independent. You can embed a CTA on your marketing site, use the `?demo` link in outbound emails, enable the chat suggested action, and host a private demo page — all simultaneously, all pointing to the same Product Demo capability.

### Do I need to create separate Product Demo capabilities for each use case?

No. A single Product Demo capability works across all deployment patterns. The demo content, features, and visuals are shared regardless of how the prospect reaches it.

### How do I track which channel is driving demo sessions?

Use different query parameters for each channel (e.g., `?demo&utm_source=email`, `?demo&utm_source=linkedin`) so your analytics platform can attribute sessions to the right source.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.spara.com/guides/platform-guides/product-demo-use-cases.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.