Install Navattic JS

Navattic JS is a script that you add to your website and app to connect demo activity to the visitors who later convert. Navattic JS is used to:

Attribute demo activity to pipeline by identifying visitors who submit a form or log in after viewing a demo.
Match demo visitors to existing HubSpot or Marketo contacts.
Send demo events to analytics tools already installed on your website, such as GA4, Segment and Amplitude.

How Navattic JS ties demos to pipeline

For example, a visitor views a demo on one page, then submits a demo request form on another page. Navattic JS identifies the visitor from the form submission and links their earlier demo activity to that email. Without Navattic JS, Navattic can’t connect the form submission to those earlier demo sessions. The visitor and their demo engagement then appear in the Visitors tab. You can sync them to your CRM with Playbooks.

Set up Navattic JS

Follow these steps to install Navattic JS on your website and app.

Copy your install snippet

In Navattic, go to Settings > Navattic JS and copy the snippet under Installation.One snippet works on every site: your marketing site, app, docs and blog.

Paste it into your site-wide <head>

Add the snippet once to the <head> of your site-wide template or tag manager. The snippet then loads on every page automatically, so you don’t need to add it to individual pages.

If you use Google Tag Manager, follow the Google Tag Manager setup.
If a developer manages your website, click Send to a developer to email them the snippet and a link to this page.

Paste the snippet step with Google Tag Manager and Send to a developer options

Load your site to verify

Open any page that has the snippet. Navattic detects the snippet automatically, usually within a minute. The Installation status then changes from Not connected to Connected.Click Check now to refresh the status, or Per-site status to see which of your sites have Navattic JS.

To identify the most visitors, add Navattic JS to your app (for example, app.company.com) as well as your website. Then identify logged-in users.

If the status stays Not connected, open Per-site status and confirm that your site URLs are listed. Navattic only checks for the snippet on the sites listed there.

Choose what Navattic JS tracks

Under Configuration on the same settings page, turn on the settings that match your website. For pipeline attribution, turn on Auto form tracking and Cross-domain tracking.

Setting	What it does	Turn it on if
Auto form tracking	Captures the email and other details when a visitor submits a form on your website.	Visitors fill out forms on your site outside your demos, such as a demo request form.
Cross-domain tracking	Uses a cookie to recognize the same visitor across pages and subdomains, such as `company.com`, `docs.company.com` and `blog.company.com`.	Your forms are on different pages than your demos.
CRM tracking scripts	Captures HubSpot or Marketo cookies so Navattic can match demo visitors to existing contacts.	Your website runs the HubSpot or Marketo tracking script.
Query parameter tracking	Saves the page’s query parameters, such as UTM tags, as visitor properties.	You track campaigns with UTM tags or other query parameters.
Segment integration	Identifies visitors when Segment identifies them.	Your website uses Segment.
RudderStack integration	Identifies visitors when RudderStack identifies them.	Your website uses RudderStack.
GA4 + Google Tag Manager integration	Sends Navattic events to GA4. Requires additional steps in Google Tag Manager.	You want demo events in GA4.

Auto form tracking can’t capture forms inside an iframe, such as many Pardot forms. To capture those forms, see Capture forms inside iframes.

Add tracking with code

These options require changes to your website or app code.

Identify visitors with Navattic JS

Call navattic.identify() whenever the visitor’s email is available, such as after they log in. This identification method is prioritized over the automatic tracking settings above.

// Add to a place where user.email is available
navattic.identify({ email: user.email });

Send events to your tracking scripts

Use navattic.onEvent() to forward every Navattic event, such as a step view or a completed flow, to analytics tools on your site. Add the code below your Navattic JS snippet.

navattic.onEvent(function (eventData) {
  // Your custom tracking code here
});

See Subscribe to events for examples for GA4, Amplitude, Mixpanel, Segment and other tools, and for the full list of events.

Capture forms inside iframes

Due to browser security restrictions, Navattic JS can’t capture form submissions inside an iframe, such as a Pardot form. To capture them, add the script below to the page that hosts the form. The script sends the submitted fields to the parent page, where Navattic JS identifies the visitor. Update these values before adding the script:

PARENT_ORIGIN: the origin of the page that embeds the form, such as https://www.company.com.
FIELDS_TO_SEND: your form’s field names, each mapped to the name Navattic should use. Map the email field to email.
iframe-form: the ID of your form element.

<script>
  // The origin of the page that embeds this form
  const PARENT_ORIGIN = 'https://www.company.com';

  // Your form's field names, mapped to the names Navattic should use
  const FIELDS_TO_SEND = {
    email: 'email',
    name: 'name',
    phone: 'phone',
  };

  function sendFormToNavattic(event) {
    const formData = new FormData(event.target);
    const fields = {};

    for (const [formKey, navatticKey] of Object.entries(FIELDS_TO_SEND)) {
      const value = formData.get(formKey);
      if (value) {
        fields[navatticKey] = value;
      }
    }

    if (Object.keys(fields).length > 0) {
      window.parent.postMessage({ kind: 'navattic:iframe-form-submission', fields }, PARENT_ORIGIN);
    }
  }

  const formElement = document.getElementById('iframe-form'); // Use your form's ID
  formElement?.addEventListener('submit', sendFormToNavattic);
</script>

If your site uses a cookie consent banner, Navattic JS respects your visitors’ consent choices. You can configure embedded demos to suppress tracking until a visitor accepts cookies, and integrate with consent platforms such as OneTrust and Cookiebot. See Cookie consent for integration details, including how to send consent signals to embedded demos using postMessage.

Build

AI

Share

Tracking & Integrations

Workspace

Help

Product

How Navattic JS ties demos to pipeline

Set up Navattic JS

Choose what Navattic JS tracks

Add tracking with code

Identify visitors with Navattic JS

Send events to your tracking scripts

Capture forms inside iframes

​How Navattic JS ties demos to pipeline

​Set up Navattic JS

​Choose what Navattic JS tracks

​Add tracking with code

​Identify visitors with Navattic JS

​Send events to your tracking scripts

​Capture forms inside iframes

​Cookie consent and tracking

How Navattic JS ties demos to pipeline

Set up Navattic JS

Choose what Navattic JS tracks

Add tracking with code

Identify visitors with Navattic JS

Send events to your tracking scripts

Capture forms inside iframes

Cookie consent and tracking