Skip to main content
Navattic JS is a script that can be added to your website or application to identify and track visitors to your demos. It’s a powerful tool to track visitors since it integrates with the existing identity layer of your application or website. There are two useful ways to use Navattic JS:

Identify Visitors

Unlock significantly more identified visitors by calling navattic.identify() whenever you have the visitor’s email.

Subscribe to events

Integrate with any tracking scripts already installed on your website by calling navattic.onEvent().
Follow these steps to add the Navattic JS tracking scripts to your websites and applications.
1

Navigate to setup steps

Navigate to the Navattic JS settings and then follow steps to add the Navattic JS tracking scripts to your website and app.Navattic JS Setup
2

Decide which websites and apps to track

Navattic JS can be added to any website or application that you want to track.To unlock the greatest number of identified visitors, we recommend adding Navattic JS to your app (app.company.com), as well as any websites hosting your demos.
3

Copy and paste the tracking script

Under the Implementation checklist, copy the script and follow instructions to add it to the <head> of your website or application.Calling Navattic JS Identify (Recommended).
4

Adjust configuration (optional)

Customize the behavior of Navattic JS by adjusting the configuration settings.
  • Auto form tracking
  • Cross-domain tracking
  • CRM tracking scripts
  • Query parameter tracking
Automatically track visitor information from external forms embedded outside of your Navattic demo.For example, if a Visitor completes a HubSpot form elsewhere on your marketing website, their email address will now be surfaced in the Navattic Visitors tab and available to use in Navattic Playbooks (i.e., Integrations).
See Capturing forms in iframes for details on browser restrictions.

​
Identify visitors with Navattic JS

Once you’ve installed Navattic JS, you can call the identify method to anytime you have the visitor’s email address available. This identification method will be prioritized over other automatic tracking configuration methods. 
// Add to a place where user.email is available
navattic.identify({ email: user.email })

​
FAQ

Due to browser security restrictions, Navattic JS can’t automatically capture form submissions from iframes. For those cases, as a workaround, it is possible to add code to the form that will send the submission to the parent page so that Navattic JS can identify the visitor and associate them with the demos elsewhere on your site.For Pardot and other form providers that allow you to include a script tag within the form, below is an example of a script that can be added to your form that will pass the form submission to Navattic JS.Note: you may need to update the KEYS_TO_SEND and the element ID values of your script with values that are specific to your form configuration.
<script>
  function sendFormToNavattic(event) {
    event.preventDefault();

    const form = event.target;
    const formData = new FormData(form);
    const KEYS_TO_SEND = ['name', 'email', 'phone']; // This can be customized

    const data = {};

    for (const [key, value] of formData.entries()) {
      if (KEYS_TO_SEND.includes(key)) {
        data[key] = value;
      }
    }

    if (Object.keys(fields).length > 0) {
      window.parent.postMessage({
        kind: 'navattic:iframe-form-submission',
        fields,
      });
    }
  }
  const formElement = document.getElementById('iframe-form'); // use the actual form selector
  formElement?.addEventListener('submit', sendFormToNavattic);
</script>
⌘I