Install Navattic JS

Navattic JS is a script that can be installed on your web properties to help:

Identify visitors who do not fill out a Navattic form directly in your demo
Integrate with event-based analytics platforms such as GA4, Mixpanel, and more

Navattic JS is disabled by default in all workspaces. However, Navattic Workspace Admins can enable it using the setup steps below.

Try a demo

Navattic JS

1. Install Navattic JS

Install Navattic JS on any of your web properties where you will be embedding demos, identifying visitors, or passing demo events on to other analytics platforms. The resources referenced below are available in your workspace’s Settings > Navattic JS.

Try a demo

Navattic JS

1.1 Configure your installation

In your Navattic workspace, navigate to Settings > Navattic JS. Toggle on the information you would like to track before copying the snippet. Navattic JS will allow you to track:

Auto form tracking: Automatically capture Visitor information from external forms (i.e., 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).
- This is the automatic method of “manually send website data to Navattic using JavaScript (see here)”.
- Note: This will capture forms that are embedded on the same page that Navattic JS is running on (eg. Hubspot, Marketo, or vanilla HTML forms). It will not be able to capture forms embedded in iframes (for example, Pardot) due to browser cross-domain security restrictions. For those cases, see Capturing Forms in iFrames in the FAQ below.
- It is possible to capture form submissions from pages other than the one your demo is on. However, this will require the “Domain-level Visitor tracking” setting to be enabled so that Navattic JS can associate the visitor to the page the form is on with the one the demo is on.
Cross-domain tracking: Use a cookie to consolidate visitor data across subdomains.
- For example, if a visitor visits embedded demos in docs.navattic.com and blog.navattic.com, they will now be recognized as the same visitor.
CRM tracking scripts: Automatically capture HubSpot or Marketo cookies from visitors and sync Navattic demo data with the corresponding contact in your CRM
- For example, if a Visitor was cookied by HubSpot last month and now visits your demo on the same browser, their Navattic visitor fields (see all available fields) will be mapped to HubSpot Contact Properties, and their Navattic demo activity will appear in the HubSpot Activity Timeline. This will not send the Visitor’s email address from HubSpot to Navattic, unless you have Automatic Form Submission toggled on as well (see above).
- If you have “Automatic third-party form submissions” toggled on above or are manually sending website visitor emails to Navattic through JavaScript, this demo visitor’s email address will also be surfaced directly in the Navattic Visitors tab.
Query parameter tracking: Automatically include page query parameters from the parent page as Navattic visitor attributes
- For example, if a demo visitor views an embedded demo on navattic.com/pricing?utm_medium=internal&client_id=chromestore, the parameters “utm_medium” and “client_id” will automatically turn into Visitor attributes that can be included in Navattic Field Mappings.

1.2 Copy the snippet

Under Settings > Developer: Setup, open the dropdown for the specific site, and copy the snippet to add to the head of your website. It should look something like the example script below and will include an SDK key that is unique to your Navattic Workspace.

And that’s it! You’re all set to start identifying visitors or subscribing to events.

1.3 Developer Checklist (Optional)

Visit the Developer Checklist to make sure everything is connected correctly. Find the Developer Checklist in your Navattic workspace > Settings > Developer: Setup. Under Website configuration, add the corresponding page URLs for your application, marketing website, docs website, and blog to see which ones are connected as well as which ones may be experiencing issue.

The Implementation checklist will help you understand which sites you have added Navattic JS to.

Next Steps

Identify Visitors (recommended) - do this to identify visitors to your Navattic demo
Subscribe to Events (optional) - do this to send Navattic events like step_viewed or flow_started to an events-based platform.

FAQ

Capturing Forms in iFrames

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>

Build

For Sellers

Share

Analyze

Tracking

Integrations

Workspace

Help

1. Install Navattic JS

1.1 Configure your installation

1.2 Copy the snippet

1.3 Developer Checklist (Optional)

Next Steps

FAQ

Build

For Sellers

Share

Analyze

Tracking

Integrations

Workspace

Help

​1. Install Navattic JS

​1.1 Configure your installation

​1.2 Copy the snippet

​1.3 Developer Checklist (Optional)

​Next Steps

​FAQ

1. Install Navattic JS

1.1 Configure your installation

1.2 Copy the snippet

1.3 Developer Checklist (Optional)

Next Steps

FAQ