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

# Outlook

> Create and share demos from within Outlook.

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>;
};

<Frame>
  <img src="https://mintcdn.com/navattic-app/c6crWyX_VwcL814J/images/outlook-inbox.png?fit=max&auto=format&n=c6crWyX_VwcL814J&q=85&s=50a9e18561b82dcaa17550bcc10a7988" alt="Salesloft Inbox Navattic Integration" className="overflow-hidden rounded-xl border" width="1414" height="848" data-path="images/outlook-inbox.png" />
</Frame>

Sales reps can create and share demos from within <img src="https://mintcdn.com/navattic-app/c6crWyX_VwcL814J/images/outlook.png?fit=max&auto=format&n=c6crWyX_VwcL814J&q=85&s=25031c3e7d3c570ef0b056f50ac6909d" alt="Outlook Logo" className="h-4 w-4 inline-block m-0 -mt-px" width="826" height="769" data-path="images/outlook.png" /> **Outlook**.

To access the Outlook integration, please install the Navattic Outlook Add-in from the [AppSource store](https://appsource.microsoft.com/en-us/product/office/WA200009256).

<Panel>
  <Card
    href="https://appsource.microsoft.com/en-us/product/office/WA200009256"
    title="Install Navattic for Outlook"
    icon={
  <img
    src="https://mintcdn.com/navattic-app/c6crWyX_VwcL814J/images/outlook.png?fit=max&auto=format&n=c6crWyX_VwcL814J&q=85&s=25031c3e7d3c570ef0b056f50ac6909d"
    alt="Outlook Logo"
    className="m-0 -mt-px inline-block h-6 w-6"
  />
}
  >
    Download from the Outlook AppSource store.
  </Card>
</Panel>

After installing the Add-in, reps will see the Add-in in their Outlook compose window.

<MediaCard url="https://navattic-docs.navattic.com/6xt9053t" type="demo" title="Outlook Setup" />

## How to send a demo in Outlook

<Steps>
  <Step title="Click the Apps icon in the compose window">
    <img src="https://mintcdn.com/navattic-app/ZCha297cPk0e9bDw/images/outlook-ribbon-classic.png?fit=max&auto=format&n=ZCha297cPk0e9bDw&q=85&s=5dd871269ec0159ceb92945d6c09382c" alt="" width="1752" height="790" data-path="images/outlook-ribbon-classic.png" /> In the add-in window, click on the Navattic logo to
    launch the add-in.
  </Step>

  <Step title="Create a custom demo">Follow steps to create a custom demo.</Step>

  <Step title="Send the email">
    After creating the demo, the demo link and preview will be injected into the email body.
  </Step>
</Steps>

## Crafting emails with demos best practices

Read best practices for crafting emails based on use cases:

<CardGroup cols={2}>
  <Card horizontal title="Outbound" icon="mail-check" href="/launchpad/use-cases/outbound" />

  <Card horizontal title="Pre-call discovery" icon="package-check" href="/launchpad/use-cases/pre-call-discovery" />

  <Card horizontal title="Post-call followup" icon="user-round-check" href="/launchpad/use-cases/post-call" />
</CardGroup>