Analyze
Identify

HubSpot Forms

As of May 2024, you can embed a Hubspot form directly. Learn more about adding a Hubspot embed step.

Overview

This section covers how to use a HubSpot form to identify website Visitors who engage with your Navattic demo. This allows you to consolidate A) visitor data gathered by HubSpot with B) demo engagement data gathered by Navattic, and view the full data story in both platforms.

Implementation

Step 1: Create a HubSpot form and add this to the page hosting your Navattic demo iFrame

The first step is to create a HubSpot form and add this to the page hosting the Navattic demo iFrame. This will allow HubSpot to create HubSpot Contacts when visitors fill out the HubSpot form.

Tips:

  • Here is HubSpot documentation on how to embed a HubSpot form that disappears on submission.
  • If it's not already added, be sure to enable the HubSpot tracking code across your site. The tracking code is automatically included on HubSpot blog pages, landing pages, and website pages.

Step 2: Add the Navattic script to this same page

Copy the below Navattic snippet and add it below the header on the page hosting the Navattic demo embed (this is the same page from step 1). This JS snippet should be installed after your existing third-party script tags.

JS


The Navattic script is used to send the website visitor's HubSpot Cookie to Navattic, which allows Navattic to send the demo engagement to the corresponding Hubspot Contact later in Step 4. This step does not allow HubSpot form fill data to enter Navattic.

Step 3: Pass HubSpot form fill data into Navattic

This step is used to send visitor data from your HubSpot form into Navattic, so that Visitor emails are attached to the appropriate demo engagement data within the Navattic application.

While highly recommended, this step is not necessary if your organization has privacy concerns with visitor emails entering the Navattic platform.

If you would like to pass HubSpot form fill data into Navattic, the Navattic snippet gives you access to our Identify API (more here). With this, You can call window.navattic.identify in your website code to pass in data to Navattic for things like email, name, company name, etc. To complete the form connection, have a website engineer use this API to pass the submitted form data into Navattic.

  1. Any known UTMs (pulled from the parent page URL) will automatically be passed into Navattic via the Identify API
  2. Since each HubSpot form can contain different field names, this step does require custom implementation from your team to call window.navattic.identify
  3. Here is an example snippet that your team can build on:
JS


Step 4: Set up the direct Navattic HubSpot integration

You have completed the necessary steps for identifying Navattic Visitors using a HubSpot form! The last step is to enable the HubSpot direct integration.

This connects all the available demo engagement and visitor identification data to the corresponding HubSpot Contact.