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

# Slack

> Get real-time notifications in Slack when prospects engage with your demos.

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

<Frame>
  <img className="overflow-hidden rounded-xl border" src="https://mintcdn.com/navattic-app/KyLVfu_TECs3vwBD/images/slack.png?fit=max&auto=format&n=KyLVfu_TECs3vwBD&q=85&s=846faf2731f9dc28ec90d73fa8990d6f" alt="Slack integration" width="1736" height="768" data-path="images/slack.png" />
</Frame>

<Info>
  Check that you are [Identifying visitors](/tracking/identify/visitors) before setting up the Slack integration.
</Info>

Send identified visitor and/or account information directly to Slack. Once a visitor or account has been [identified](/tracking/identify/visitors), send that information to a Slack channel.

## Setting up the Slack Integration

Use this interactive demo or the written steps below to set up your integration.

<MediaCard url="https://navattic-docs.navattic.com/845d0rkl" type="demo" title="Slack Setup" />

<Steps>
  <Step title="Connect to Slack">
    Visit [app.navattic.com](https://app.navattic.com) > Playbooks > Integrations > Slack > Manage > Connect > Log into your Slack account if prompted > Authorize certain permissions within your Slack workspace.

    <Note>
      You can customize the Slack message under **Configuration**. Click **+ Add property** to select which properties to include in the message.
    </Note>
  </Step>

  <Step title="Add the Navattic app to your channel">
    Once you have connected your Slack workspace, navigate to your channel and connect the Navattic app by sending **@navattic** in a message. You must follow this step before adding the channel to your Playbook (see the next step).
  </Step>

  <Step title="Create a Playbook">
    Once your integration for Slack is fully set up, visit [Playbooks](/integrations/playbooks) in your Workspace to start pushing data into Slack. You can use a Template or create your own Playbook.

    There are two Action that you can set up: Send visitor message and Send account message (if you have Accounts set up). Additionally, make sure to select the Slack Channel you want to send data to. You can toggle on **Use ID** if the channels aren't populating in the dropdown.

    <Note>
      A Playbook consists of [Audiences](/integrations/playbooks) and Actions. You can use one of the default Audiences or you can create your own. If you create your own, remember to add new demos to the Audience if you are choosing to filter by specific demos.
    </Note>
  </Step>

  <Step title="See identified Visitors and Accounts in Slack">
    Your connected Slack channel will now receive notifications in real time.

    <img src="https://mintcdn.com/navattic-app/KyLVfu_TECs3vwBD/images/slack-1.png?fit=max&auto=format&n=KyLVfu_TECs3vwBD&q=85&s=2aa397cb9e0b29bc6245fbc7f573df4a" alt="" width="2625" height="1333" data-path="images/slack-1.png" />
  </Step>
</Steps>