> ## 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.

# Customer onboarding

> Create demos to onboard users and showcase best practices.

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 md:inline-block w-auto cursor-pointer overflow-hidden rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm">
<div className="flex items-center gap-3 bg-white dark:bg-gray-800 px-3 py-2">
<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 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 p-4">
      <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>;
};

<CustomerQuote
  quote={
<>
  "Navattic tours add a <strong>layer of interactivity to our content</strong> that helps users
  quickly understand the value of our product."
</>
}
  domain="form.com"
  name="Form"
/>

Interactive demos are a great way to activate new users. Use demos throughout your knowledge base and customer journey to help customers master essential workflows, train on advanced features such as integrations, or to showcase exciting product updates. Keep in mind that demos can support your internal team enablement efforts, too.

### Recommendations

For training purposes, we recommend:

* Divide your content into digestible Flows of no more than 5-8 steps each
* Use a [checklist](/build#AIJEa) or demonstrate multiple workflows or to showcase important features. Aim to include 4-6 Flows in each checklist that are chronological or focus on a shared product area.
* Introduce your demos early in the customer journey: provide a demo onboarding option via in-app chat or in your onboarding resources to support different types of learners
* Consider using a demo to address FAQs that may be answered in 5-8 steps.
* Ungate demos to provide immediate value to your customers

### Customer Examples

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

<CardGroup cols={2}>
  <Card title="Traackr: Quickstart Course" href="https://academy.traackr.com/quickstart-course" img="https://mintcdn.com/navattic-app/KyLVfu_TECs3vwBD/images/training-2.png?fit=max&auto=format&n=KyLVfu_TECs3vwBD&q=85&s=d5d5067c0b4d4315cc759960bd579be0" width="1466" height="573" data-path="images/training-2.png" />

  <Card title="Coursedog: Coursedog Universe" href="https://www.coursedog.com/resources/universe" img="https://mintcdn.com/navattic-app/KyLVfu_TECs3vwBD/images/training-3.png?fit=max&auto=format&n=KyLVfu_TECs3vwBD&q=85&s=169fc8828ce9451bc32f633aa166e2b0" width="1424" height="668" data-path="images/training-3.png" />

  <Card title="Navattic: What's New?" href="https://training.navattic.com/r04504re" img="https://mintcdn.com/navattic-app/KyLVfu_TECs3vwBD/images/training-4.png?fit=max&auto=format&n=KyLVfu_TECs3vwBD&q=85&s=3a23fed98f1ba919d100388ac99d7ddf" width="2532" height="1206" data-path="images/training-4.png" />

  <Card title="Vitally Academy: Interactive Demos" href="https://www.vitally.io/academy#interactive-product-tours" img="https://mintcdn.com/navattic-app/KyLVfu_TECs3vwBD/images/training-5.png?fit=max&auto=format&n=KyLVfu_TECs3vwBD&q=85&s=0a1f062c37eef1f28c786b5a1ffabbfc" width="2668" height="1098" data-path="images/training-5.png" />
</CardGroup>

### Implementation Guide

Follow the guidance below to create training demos that will drive product adoption and usage across your existing customer base. Remember to check the [Project Analytics](/analyze) to view drop-offs for each step and use that data to continue improving your demo.

## 1. Structure

**Starting Flow**: Start with a goal-oriented introduction to the training module (ex. "Take the Navattic Crash Course to see how to create a project, view visitor data, and invite your teammates.")

**Checklist**: Include a Checklist to help users find the content that is most relevant to them. Make sure each Checklist task includes a clear goal-oriented description, just like your starting flow. Isolate your most essential workflows to help users get activated ASAP.

**Navigation**: It's important to make your onboarding resources as user-friendly as possible. Turn on Navigation Buttons in your [Flow Settings](https://demo-staging.navattic.com/docs) to help first-time users navigate smoothly throughout your demo. Consider adding a Progress Bar to your [Theme](/build/themes), to help users view their progress and manage their time.

<Note>
  **Tip:** Use a training demo to excite users about the product solutions they are about to unlock.
  No need to show every single click or feature in your onboarding demo, as users will likely have
  access to your product already.
</Note>

## 2. CTAs

**Consider your audience and get creative**:
Use the appropriate CTA for each part of the customer journey. Consider linking to a:

* Knowledge base
* Webinar registration page
* Product feedback form
* Pricing page for additional features

**Existing users may have some product familiarity already and be ready to skip ahead.**

Turn on [Escape View](https://training.navattic.com/7429hwxgx) to make your demo CTAs accessible at any time. ## 3. DeploymentDeploy demos alongside other training mediums like videos, written documentation, or live webinars to help customers find the resource that aligns with their learning style. We recommend an ungated experience for low friction new user onboarding. Consider these form-alternatives for managing the audience for your demos: \* Turn on [Passcode Protection](/product-updates#CENjZ) for any top-secret demos

* Embed demos on an existing website or learning management system that is only accessible to users
* Present demos through an in-app chat that is only accessible to users of your product

<img src="https://mintcdn.com/navattic-app/KyLVfu_TECs3vwBD/images/training-1.png?fit=max&auto=format&n=KyLVfu_TECs3vwBD&q=85&s=fe242ec7f35b4ab991afe083ef47801f" className="max-w-xs rounded-xl border mx-auto" caption="Use an in-app chat to share your demos" position="center" width="856" height="1184" data-path="images/training-1.png" />

<Note>
  **Tip:** Empower your chatbot! Customers look to chatbots for real-time resources or support.
  Include a short demo in your FAQ snippets to clear up common mishaps while customers wait to chat
  with a representative.
</Note>

## 4. Maintenance

Navattic demos are easy to update, even after they have been Published and shared with your customers. No need to re-record a training video every time there is a UI update in your product. When it is time to update your Project, simply edit the associated Captures, Flows, or Checklists and click "**Publish**". This will push changes directly to all instances of this Project that has been shared or embedded. Replace outdated Captures at any time without impacting the rest of your demo.

<MediaCard url="https://www.loom.com/embed/037846e9284943d3ab6d2a7cb660e12c" type="video" title="Training" />