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

# Sales enablement

> Empower your sales team with interactive demos to accelerate deal cycles.

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={
<>
  "On the presales side, with interactive product tours as a part of our sales rep playbook,{' '}
  <strong>solutions consultants are spending 30% less time on early stage demos</strong> and can
  now fully focus on higher value and more strategic deals."
</>
}
  domain="sourceday.com"
  name="SourceDay"
/>

# Goals

Create a demo using Invisible Steps and Beacons to help sellers reliably demo your most common workflows. These demos are designed to support synchronous settings or **presenter-led conversations** rather than asynchronous settings (ex. marketing use cases).

# Recommendations

* Use [Nav Links](https://www.loom.com/share/453383a381c84c92b6d34e4035eae19a?sid=0d53859a-0d4f-4490-8d9f-d53e67082e10)to quickly add multiple triggers to similar elements across Captures.
* Use Presenter Mode to hide dialog boxes using the keyboard shortcut Ctrl + P.
* Turn on Keyboard Navigation to progress through your interactive demo using your arrow keys.
* Keep Flows short (5-10 steps) and include a [Checklist]() to aid navigation
* Use the [Navattic Capture Editor](/build/captures/web) to help present the best version of your product
* Adjust the Beacon color in [Themes](/build/themes) to make this more or less apparent
* Add Trigger in a reliable space to allow presenters to "go back a step"

<img src="https://mintcdn.com/navattic-app/Wym34-C-snZlIePn/images/sales-enablement-1.gif?s=a10c1d430b26b0a4af4c532e99c4106e" alt="" width="800" height="458" data-path="images/sales-enablement-1.gif" />

# Customer Examples

Locate the Beacon on each step to navigate through the demo.

<CardGroup cols={2}>
  <Card title="Explore Vitally" href="https://training.navattic.com/6oa07tr" img="https://mintcdn.com/navattic-app/Wym34-C-snZlIePn/images/sales-enablement-2.png?fit=max&auto=format&n=Wym34-C-snZlIePn&q=85&s=b31413aebbcea6c9df20811ae31344ce" width="2940" height="1600" data-path="images/sales-enablement-2.png" />

  <Card title="Explore Navattic" href="https://navattic-website.navattic.com/January2023" img="https://mintcdn.com/navattic-app/Wym34-C-snZlIePn/images/sales-enablement-3.png?fit=max&auto=format&n=Wym34-C-snZlIePn&q=85&s=96bb15286d68c1b4a0f4cf71a03e6e63" width="2190" height="916" data-path="images/sales-enablement-3.png" />
</CardGroup>

<Note>
  **Tip**: Create a version of your project that includes Modals and Tooltips, to share with your
  prospects as a sales leave-behind.
</Note>