Integrations

Navattic JS

Navattic JS will take the place of Embed Events. If you have previously set up Embed Events, no action is required on your part. However, you have the option to switch to Navattic JS if you prefer.

Document image


Introduction

Navattic JS is a JavaScript widget 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.

Setup

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.

1.1 Configure your installation

Configuration
Configuration


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:

  • Automatic third-party form submissions: Automatically capture visitor identify information from forms embedded outside of Navattic
    • 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 send elsewhere.
    • This is the automatic method of "manually send website data to Navattic using JavaScript (see here)".
  • Domain-level Visitor 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 Cookie Tracking: 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 demo engagement data will be reconciled with their HubSpot contact directly in HubSpot.
    • If you have "Automatic third-party form submissions" toggled on above or are manually sending website visitor emails to Navattic through JavaScript (see here), this demo visitor's email address will also be sufaced directly in the Navattic Visitors tab.
  • Track Query Parameters: 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

Copy the snippet and add it 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.

Implementation checklist
Implementation checklist


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

Next Steps

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