> ## Documentation Index
> Fetch the complete documentation index at: https://docs.navattic.com/llms.txt
> Use this file to discover all available pages before exploring further.

# In-app demos

> Embed demos directly within your application for contextual user guidance.

export const MediaCard = ({title = '', url, type = 'demo'}) => {
  const attributes = type === 'demo' ? {
    'data-navattic-open': url,
    'data-navattic-title': title
  } : {
    'data-video': url
  };
  return <div {...attributes} className="hidden w-auto cursor-pointer overflow-hidden rounded-lg border border-gray-200 shadow-sm md:inline-block dark:border-gray-700">
  <div className="flex items-center gap-3 bg-white px-3 py-2 dark:bg-gray-800">
    <div className={`flex h-7 w-7 items-center justify-center rounded-md ${type === 'video' ? 'bg-blue-100 dark:bg-blue-900' : 'bg-orange-100 dark:bg-orange-900'}`} style={{
    backgroundColor: type === 'video' ? 'var(--video-bg)' : 'var(--demo-bg)'
  }}>
      <Icon icon={type === 'video' ? 'circle-play' : 'square-mouse-pointer'} color={type === 'video' ? 'var(--video-icon)' : 'var(--demo-icon)'} />
    </div>
    <div>
      <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
        {type === 'video' ? 'Watch video' : 'Try a demo'}
      </div>
      <div className="text-sm text-gray-500 dark:text-gray-400">{title}</div>
    </div>
  </div>
  <style jsx>{`
    :root {
      --video-bg: #dbeafe;
      --video-icon: #2563eb;
      --demo-bg: #ffedd5;
      --demo-icon: #ea580c;
    }
    :global(.dark) {
      --video-bg: #1e3a8a;
      --video-icon: #60a5fa;
      --demo-bg: #7c2d12;
      --demo-icon: #fb923c;
    }
  `}</style>
</div>;
};

export const CustomerQuote = ({quote, domain, name}) => {
  return <div className="relative rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800">
      <div className="flex items-start gap-3">
        <div className="flex-shrink-0">
          <Icon icon="quote" />
        </div>
        <div className="space-y-3">
          <div className="m-0 text-sm italic text-gray-700 dark:text-gray-300">{quote}</div>
          <div className="inline-flex items-center gap-2">
            <img src={`https://logo.navattic.com/${domain}`} noZoom alt={domain} className="m-0 h-5 w-5 rounded-full" />
            <span className="text-sm font-medium text-gray-900 dark:text-gray-100">{name}</span>
          </div>
        </div>
      </div>
    </div>;
};

<Icon icon="dock" /> **In-app demos** are used to boost new user activation rates for your app or a
newly launched feature by delivering value as soon as possible.

Similar to [Feature Highlights](/use-cases/feature-highlights), these demos enable and motivate users to adopt best practices and discover aha moments with minimal friction.Lastly, since demos are no-code to create, you can iterate based on demo completion data and experiment quickly with new ways of activating users.

<img src="https://mintcdn.com/navattic-app/eEo16-sBVsd0fYuf/images/in-product-demos-1.png?fit=max&auto=format&n=eEo16-sBVsd0fYuf&q=85&s=6ed9d196b9347717fc25052f659fe52c" alt="" width="2392" height="866" data-path="images/in-product-demos-1.png" />

# Recommendations

For a Free Trial, Freemium, or newly onboarded audience, we recommend:

* Keep your flows short (5-8 steps) to ensure new users are not overwhelmed by your product.
* Showcase related areas of your product by using a checklist that connects multiple flows. The benefits of this strategy are two-fold: Users stay motivated by their progress as they check off items on the list and users know exactly where they paused their progress should their learning be disrupted.
* Remember to include the why behind your ‘how to’ steps. If users understand the process, they are more likely to fully adopt your recommendations.
* Include CTA buttons that direct users to additional resources like docs or give users the opportunity to book time with a Customer Success Manager if they need further assistance.

<Note>
  **Blog**: Read{' '}

  <a href="https://www.navattic.com/blog/feature-announcements-examples-from-saas-companies" target="_blank">
    6 Feature Announcement Examples from SaaS Companies
  </a>

  to see how other customers promote feature demos.
</Note>

# Customer Examples

Below are some customer deployments we love. Keep an eye out for the recommendations highlighted above.

**1. Datadog**

To support the learning styles of all their users, Datadog offers multiple ways to get started with their product. Once users log in, they can dive straight in, watch a tutorial, or access a guided tour. Users click “See a Guided Tour,” which takes them to a full-screen landing page with an [interactive demo](https://datadog.navattic.com/hq7w0l17).

![](https://archbee-image-uploads.s3.amazonaws.com/YYk8JOCMmxT-GPN-0CkK6/qwmgtG6XTZLG7ZTa3CoUG_untitled-13.png "Click \"See a Guided Tour\" to start a demo")

**2. MonitorQA**

The Monitor QA team supports new users exploring their product for the first time. They trigger an exit intent pop up when a user is inactive for a period of time. Their demo clarifies the set up process and showcases key product features. This keeps slow-to-start users from dropping off before they’ve seen value.

<img src="https://mintcdn.com/navattic-app/eEo16-sBVsd0fYuf/images/in-product-demos-2.png?fit=max&auto=format&n=eEo16-sBVsd0fYuf&q=85&s=6ea495600d46bf04c9ec995af940c20d" alt="" width="1000" height="555" data-path="images/in-product-demos-2.png" />

**3. Matillion**

The Matillion team offers new users who need extra guidance a choice: go through a product tour, or jump right into using the tool. They use a checklist to give users a ‘choose your own adventure’ experience. Users can navigate the tour chronologically or explore the functionalities that interest them most.

<img src="https://mintcdn.com/navattic-app/eEo16-sBVsd0fYuf/images/in-product-demos-3.png?fit=max&auto=format&n=eEo16-sBVsd0fYuf&q=85&s=8d50d06dbe0db945c99259a43a6984a2" alt="" width="1200" height="609" data-path="images/in-product-demos-3.png" />

<img src="https://mintcdn.com/navattic-app/eEo16-sBVsd0fYuf/images/in-product-demos-4.png?fit=max&auto=format&n=eEo16-sBVsd0fYuf&q=85&s=883e5c1b40c15689c8b3d66de93c1e1f" alt="" width="1200" height="615" data-path="images/in-product-demos-4.png" />

**4. Navattic**

Our team wanted to increase awareness and adoption of our new Account based engagement feature. We created an in-app pop up that links out to a [feature specific demo](https://navattic-website.navattic.com/il1vk0u1h). Anyone who clicks on our new ‘Accounts’ tab has the opportunity to learn more about the feature via the interactive demo.

<img src="https://mintcdn.com/navattic-app/eEo16-sBVsd0fYuf/images/in-product-demos-5.png?fit=max&auto=format&n=eEo16-sBVsd0fYuf&q=85&s=76b826c7b002f761f65af943eb304973" alt="" width="1284" height="713" data-path="images/in-product-demos-5.png" />

***

# Implementation Guide

Follow the guidance below to start optimizing your activation rates with customizable demos. Demos built with these best practices deliver value early to users. Keep an eye on your demo analytics to track completion rates and consider revising any steps with significant drop off rates.

## 1. Content

**Bundle essential workflows with a checklist**: Include a checklist with flows that are chronological or focus on a shared product area. Add goal-oriented descriptions to each item on your checklist to help users find the content that is most relevant to them.
**Make it interactive**: Use tooltips, triggers, and beacons to let viewers experience the feature or picture using it day-to-day.
**Focus on a goal**: Activate users early on by presenting a value-driven **5-10 step flow** that help users achieve enablement milestones.<img src="https://mintcdn.com/navattic-app/eEo16-sBVsd0fYuf/images/in-product-demos-6.png?fit=max&auto=format&n=eEo16-sBVsd0fYuf&q=85&s=fd6fea5a76debddc20d8c649053b2103" alt="Section Length vs Average Completion Rate" width="1868" height="862" data-path="images/in-product-demos-6.png" />

## 2. CTAs

Keep your audience in mind and be strategic. Create CTAs that are specific to each part of the user or trial customer journey. For instance, consider linking to a:

* Call booking page for your sales or support team
* Knowledge base
* Webinar registration page
* Product feedback form
* Pricing page for additional features

## 3. Deployment

**Add product tours to email onboarding sequences (easy)**: Optimize your existing email sequences by including a Product Demo. Consider making multiple demos that highlight your most essential features to help new users experience aha moments early on.

**Present demos in an in-app chat available only to your product's users (medium)**: Add a short demo to your FAQ snippets. It resolves common mishaps while customers wait to chat with a representative.

<img src="https://mintcdn.com/navattic-app/eEo16-sBVsd0fYuf/images/in-product-demos-9.png?fit=max&auto=format&n=eEo16-sBVsd0fYuf&q=85&s=a82fb744beb9bc5cb1cbdb0f33b356c0" className="mx-auto max-w-xs rounded-xl border" size="54" width="856" height="1184" position="center" caption="" data-path="images/in-product-demos-9.png" />

**Add an interactive demo as an exit intent pop up (medium)**: Activate users who are unsure where to start. Set the pop up to appear after a certain amount of inactivity passes.

<img src="https://mintcdn.com/navattic-app/eEo16-sBVsd0fYuf/images/in-product-demos-7.png?fit=max&auto=format&n=eEo16-sBVsd0fYuf&q=85&s=6430c280d8b075b36921e53b6cd049f0" alt="" width="1000" height="555" data-path="images/in-product-demos-7.png" />

**Include demos in your product onboarding experience (advanced)**: Support all new users with in-product demos they can explore before diving into your product. We recommend using our [Navattic-Chameleon integration](https://www.chameleon.io/integrations/navattic) to show-case in-app interactive demos from any prebuilt Chameleon Experience.

<img src="https://mintcdn.com/navattic-app/eEo16-sBVsd0fYuf/images/in-product-demos-8.png?fit=max&auto=format&n=eEo16-sBVsd0fYuf&q=85&s=9b44d2036de024802f1c5959d97c12b9" alt="" width="1200" height="557" data-path="images/in-product-demos-8.png" />

## 4. Maintenance

You can sync updates to live demos wherever you share them: embedded in your app, in an exit intent pop-up, or in onboarding sequences. No need to re-record an onboarding video or revise your email templates every time this is a UI update in your product.

Whenever you need to revise your Product Demo, make your edits with the associated Captures, Flows, or Checklists and click “Publish”. This will automatically push the revised version out to all instances of your Product demo that have been shared or embedded.

Need to replace a few captures? Do so without impacting the rest of your demo:

<MediaCard url="https://www.loom.com/embed/037846e9284943d3ab6d2a7cb660e12c?sid=ca77c705-a9f8-4562-aa1a-407f7f070897" type="video" title="In Product Demos" />
