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

# Integrations

> Connect your CRM, marketing tools, and messaging platforms to Navattic, then automate what happens when visitors 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 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>;
};

The Integrations hub is the central place to manage everything that connects Navattic to your go-to-market stack. Navigate to **Integrations** in any product sidebar to open it.

The hub has three tabs:

* **Connections**: View and manage the tools connected to your workspace.
* **Playbooks**: Build automations that run when visitors match an audience. See [Playbooks](/integrations/playbooks).
* **Audiences**: Create and manage saved visitor and account audiences. Audiences are used by playbooks to decide when to run.

<MediaCard url="https://navattic-website.navattic.com/u4s0miy" type="demo" title="Integrations hub tour" />

<MediaCard url="https://www.loom.com/share/b0ba58400cdb419c8df33477170c1b2b" type="video" title="Connections, playbooks, and audiences" />

## Connections

The Connections tab shows every integration available for your workspace. Connected tools appear at the top in a **Connected** section. The rest are grouped by category:

| Group | Integrations |
| :- | :- |
| CRM & Marketing | HubSpot, Salesforce, Pardot, Marketo, ZoomInfo |
| Destinations | Segment, Slack, Email, Webhook |
| Tracking scripts | Navattic JS |
| Sales tools | Gmail, Outlook, Outreach, Salesloft, Front, Highspot, Gong, Seismic |

<Note>
  Sales tools integrations are available on Launchpad workspaces.
</Note>

### Connection states

Each integration card shows one of these states:

| State | Button | Meaning |
| :- | :- | :- |
| Connected | Manage | The integration is active. |
| No playbooks | Add playbook | Connected but no playbook uses it yet. |
| Failing | Reconnect | The connection has an authentication error. |
| Not connected | Learn more | Not yet connected to your workspace. |

An orange banner appears on a connected integration when no active playbook sends data through it: "No playbooks are using this connection yet. A playbook decides which visitors get synced. Nothing is sent until you add one."

### Connect an integration

Click **Learn more** on an integration card to open its detail page. Click **Connect** (or **Install** for guide-only tools) to start the connection flow. Some integrations require admin credentials for the third-party tool; have those ready before starting.

To reconnect a failing integration, open its detail page and click **Reconnect**.

### Integration detail page

Each connected integration has a detail page with a persistent connection card showing when the connection was established and who connected it. The detail page has up to three tabs depending on the integration:

* **Playbooks**: Lists playbooks that use this integration, with a button to create a new one.
* **Runs**: Shows recent playbook run history for this integration.
* **Settings**: Manages field mappings, sync direction, and other integration-specific options. Available for Salesforce, HubSpot, Marketo, Pardot, Slack, and Email.

### Disconnect an integration

Open the integration's detail page, open the settings or connection card menu, and click **Disconnect**. A warning shows how many active playbook actions will be deactivated.

## Next steps

<CardGroup columns={2}>
  <Card title="Playbooks" href="/integrations/playbooks" icon="play">
    Build When/Then automations triggered by audience matches.
  </Card>

  <Card title="Field mappings" href="/integrations/field-mappings" icon="sliders-horizontal">
    Control which Navattic fields sync to your CRM.
  </Card>

  <Card title="HubSpot" href="/integrations/hubspot" icon="hubspot">
    Sync engagement data to HubSpot contacts and companies.
  </Card>

  <Card title="Salesforce" href="/integrations/salesforce" icon="salesforce">
    Sync engagement data to Salesforce leads and accounts.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.