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

> Increase response rates by including personalized demos in your sales outreach.

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={
<>
  "Our Navattic demos have generated <strong>1000s of high-intent leads</strong> that are
  entering our sales cycle already familiar with our product and key use cases."
</>
}
  domain="useinsider.com"
  name="Insider"
/>

# Goals

**"When can I see the product?"** Start your sales process with a short product tour that engages your prospects, differentiates your sales process from competitors, and prepares prospects for a deeper-level conversation with AEs.

**This guide covers how to**:

* Create demos that follow content best practices
* Track visitors without using a form
* Receive real-time notifications of demo engagement

<MediaCard url="https://www.navattic.com/customers" type="demo" title="Sales Outreach" />

***

# Implementation Guide

<img src="https://mintcdn.com/navattic-app/Wym34-C-snZlIePn/images/sales-outreach-1.png?fit=max&auto=format&n=Wym34-C-snZlIePn&q=85&s=81a70fbc9b5a0d8af03b3e2128d80815" alt="" width="1494" height="681" data-path="images/sales-outreach-1.png" />

## 1. Content

**Share context**: Include a short introduction on step 1 of your demo to help viewers understand the objective and time commitment. For example, "See how Navattic supports customers in fintech with a 2-minute interactive demo."

**Try ungating**: Remember, sales outreach demos are used to garner interest in the product. Consider ungating to reduce friction and the Visitor Tracking methods below to identify your audience.

**Make it personal**: Consider presenting [multiple options](https://swipedon.navattic.com/product-tour-2023) in your demo to accommodate different stakeholder personas, features, or use cases. You can also add a [watermark](/product-updates#Sci_l), personal video greeting, or [personalization variables](/personalize).

**Make it user-friendly**: Your audience in this use case may be time-constrained. Include [navigation buttons](https://www.loom.com/share/dde828c52d4e4e4e820ddf64b2db5550) and value-driven copy to convey important points quickly. Keep each flow under 15 steps to encourage completion.

<img src="https://mintcdn.com/navattic-app/Wym34-C-snZlIePn/images/sales-outreach-2.png?fit=max&auto=format&n=Wym34-C-snZlIePn&q=85&s=eb238e07359165e277213ea06a8c8b7a" alt="" width="1770" height="1150" data-path="images/sales-outreach-2.png" />

## 2. Visitor Tracking

<Note>
  While forms are an effective way to identify your demo visitors, they are not always a fit for the
  Sales Outbound use case as you have your recipients' contact information already. We recommend
  using these\*\* no-form\*\* tracking methods instead.
</Note>

**Track recipient engagement with Share Links:**

You can [customize Share Links](/identify#xcueE) directly within your Navattic workspace. This works similarly to a form, except you are filling in the information rather than asking your recipient to.

To customize your share link, visit your Product Demo --> Share Links --> Create Link > Identification & Personalization > add your variables as shown below.

<MediaCard url="https://training.navattic.com/qw10b37" type="demo" title="Sales Outreach" />

<img src="https://mintcdn.com/navattic-app/Wym34-C-snZlIePn/images/sales-outreach-7.png?fit=max&auto=format&n=Wym34-C-snZlIePn&q=85&s=6be6ef35343e090cd04497d98b235316" size="76" width="1280" height="726" position="center" caption="" data-path="images/sales-outreach-7.png" />

**Track recipient engagement with query strings:**

Query strings are a quick and easy way to identify visitors without a form fill. Simply add the string `?user.email=XXX@domain.com` to the end of your existing demo share link. This will tie the stated email to the browser that opens the link.

Be careful not to open the link yourself, as this will identify your own browser as your recipient instead.

You can combine this method with a tool like SalesLoft, Hubspot, Outreach, etc. to add query strings automatically by following the format: `navattic-demo-link``?user.email={{EMAIL_VARIABLE}}&user.fullName={{NAME_VARIABLE}}`

Take care to use the correct attribute name as these may vary between platforms. Here are a few common examples:

| Platform                                                                                              | Value | Attribute Name        | Complete query string for outreach                  |
| ----------------------------------------------------------------------------------------------------- | ----- | --------------------- | --------------------------------------------------- |
| [HubSpot](https://knowledge.hubspot.com/website-pages/personalize-your-content)                       | Email | \{\{contact.email}}   | navattic-demo-link?user.email=\{\{contact.email}}   |
| [Outreach](https://support.outreach.io/hc/en-us/articles/226680368-Outreach-Variables-Overview)       | Email | \{\{email}}           | navattic-demo-link?user.email=\{\{email}}           |
| [Salesloft](https://help.salesloft.com/s/article/Available-Dynamic-Fields?language=en_US#Person_Tags) | Email | \{\{email\_address}}  | navattic-demo-link?user.email=\{\{email\_address}}  |
| [Pardot](https://help.salesforce.com/s/articleView?id=sf.pardot_handlebars_merge_fields.htm\&type=5)  | Email | \{\{Recipient.Email}} | navattic-demo-link?user.email=\{\{Recipient.Email}} |

## 3. Notifications

**Get a real-time Slack or Email notification when visitors engage with your demo**. We recommend creating an Audience for "Identified visitors who view 2+ steps" and sending notifications to a Slack channel or individual emails. Visit [Playbooks]() to set this up.

**Tip:** You can even [set up routing to specific sales reps](/integrations/playbooks).

<img src="https://mintcdn.com/navattic-app/Wym34-C-snZlIePn/images/sales-outreach-3.png?fit=max&auto=format&n=Wym34-C-snZlIePn&q=85&s=9bffa529d1c048a788b89d321a96c9a8" alt="" width="1280" height="886" data-path="images/sales-outreach-3.png" />

## 4. CTAs

**Be direct**: Include a single CTA at the end of the demo that pushes prospective customers towards the next step in your sales cycle.

**Embed your calendar**: Embed a Calendly or Chili Piper booking page directly in your demo. When choosing your step type, select **Embed** > **Calendly** or **Chilipiper** > **Enter the URL.** Try [this demo](https://training.navattic.com/0u13e0bqe)to see a Calendly embed in action.

<img src="https://mintcdn.com/navattic-app/Wym34-C-snZlIePn/images/sales-outreach-4.png?fit=max&auto=format&n=Wym34-C-snZlIePn&q=85&s=cdcdd64ec9be123b08f20c5d1ab73e21" alt="" width="992" height="472" data-path="images/sales-outreach-4.png" />

<img src="https://mintcdn.com/navattic-app/Wym34-C-snZlIePn/images/sales-outreach-5.png?fit=max&auto=format&n=Wym34-C-snZlIePn&q=85&s=888db7cb2990005feea887fbf44a7da2" alt="" width="996" height="472" data-path="images/sales-outreach-5.png" />

## 5. Recommended Structure

**Steps 1-2:** Share the context for your demo. What does this product do? When is it used? ([Klue's Triage Mode demo](https://klue.com/blog/introducing-triage-mode?utm_campaign=triage%20mode\&utm_source=linkedin\&utm_medium=social\&utm_content=employees#navatic-iframe) is a great example)

<img src="https://mintcdn.com/navattic-app/Wym34-C-snZlIePn/images/sales-outreach-6.png?fit=max&auto=format&n=Wym34-C-snZlIePn&q=85&s=23ce411b970f2c474868c4ed9b87d094" alt="" width="1626" height="738" data-path="images/sales-outreach-6.png" />

**Steps 3-9:** Use Tooltips, Beacons, and Triggers to create an interactive experience. Keep text minimal to keep the focus on your product and reinforce those "wow" moments from your previous conversation.

**Steps 10-12:** What is the next step for qualified prospects? Conclude your demo with 1 direct CTA that is related to the next step in your sales process.