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

# HubSpot JS

> Integrate demo engagement with the HubSpot CRM

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 **HubSpot** tracking script provides a very low-lift way to start with Navattic integrations. Once enabled, the script shows demo activity as "page view" events under the correct HubSpot contact. This works even when the viewer is not identified in Navattic.

<img src="https://mintcdn.com/navattic-app/eEo16-sBVsd0fYuf/images/hubspot-1.png?fit=max&auto=format&n=eEo16-sBVsd0fYuf&q=85&s=e446e0b5f6d19fb52ecfb8b2a7c8df64" alt="" width="1440" height="422" data-path="images/hubspot-1.png" />

**The HubSpot tracking script is great for:**

* Sales teams that share demo landing pages or demo centers as leave-behind
* Quickly tagging contacts with a Navattic page view event.

<Note>
  This differs from the direct HubSpot integration which documents demo activity as Contact
  Properties; features like field mapping for UTMs and form fills, and activity timeline events are
  only available with the direct HubSpot integration.
</Note>

### Add HubSpot tracking to your demos

Follow these steps to add HubSpot tracking to your Navattic demos:

<Steps>
  <Step title="Setup a Custom Domain">
    HubSpot will track the various activities that occur on a dedicated domain (ex. "stripe.com" or "arc). To configure this, first setup a [Custom Domains](/workspace/custom-domains).
  </Step>

  <Step title="Locate your HubSpot Account ID">
    To enable this tracking script, you'll need to find your HubSpot Account ID (or "HubSpot ID"). To find this, log into HubSpot. Then, open the Account dropdown in the top right corner. Your Account ID will be listed just under your HubSpot account name.

    <img src="https://mintcdn.com/navattic-app/eEo16-sBVsd0fYuf/images/hubspot-3.png?fit=max&auto=format&n=eEo16-sBVsd0fYuf&q=85&s=8ef80cb5c80d42ab587968c294a513f5" size="58" width="300" height="192" position="center" caption="" data-path="images/hubspot-3.png" />
  </Step>

  <Step title="Add your HubSpot Account ID to Navattic Demos">
    Visit your **Navattic demo** > select the three dots next to the Share button > **Tracking
    scripts**. Paste your HubSpot ID into the HubSpot input field. Once the HubSpot ID is added,
    publish your demo in Navattic.
  </Step>

  <Step title="Create Reports to see ROI">
    Once tracking scripts are enabled, you will see Page Views start to appear in HubSpot. Use the tutorial below to create our recommended HubSpot report attributing MQLs, Opps or Closed Won revenue to your interactive demos.

    <MediaCard url="https://www.loom.com/embed/b302884ea7da485fa337557dcb025a06?sid=ac3da942-3c21-4df7-a918-3fad0d463a0b" type="video" title="HubSpot" />
  </Step>
</Steps>