Embed Events

While Embed Events will continue to work, we recommend setting up Navattic JS﻿ instead. 
Overview
Your Navattic demo may use one of these Visitor or Account identification methods, although it is not required.
﻿Event-based analytics platforms are used to analyze how users interact with your website, and may receive Navattic events similar to how they receive other website events. 
Navattic demos emit events about user interaction - which step they're on, if they complete a form, if they click a CTA button, etc. When your demo is embedded on a page, our universal event integration allows you to easily send those events to any third-party service that can accept them like Amplitude, PostHog, and Mixpanel. 
Use events-based platforms to answer questions like:
How many users or sessions engage with my Navattic demo?
Where in my website flow do users engage with my Navattic demos?
Which of my Navattic demos lead to the most conversions? 
Note:  If you're not sure what counts as an event-based platform, they usually:
Ask you to install a script on your website
Track or analyze actions taken by your users
Read the Blog: 3 Ways to Use Navattic Embed Events with Event Platforms﻿
Navattic Events
Event data for each Navattic Product Demo includes: 
Navattic Event Name
Example
Description
View Step
(VIEW_STEP)
﻿Example﻿
A Flow step is viewed.
Start Flow
(START_FLOW)
﻿Example﻿
A user starts a Flow.
Complete Flow
(COMPLETE_FLOW)
﻿Example﻿
A user reached the last step of a flow OR completed a "Complete flow" step
Start Checklist
(START_CHECKLIST)
﻿Example﻿
A user loads a Checklist for the first time.
Open Checklist
(OPEN_CHECKLIST)
﻿Example﻿
A user expands a Checklist.
Close Checklist
(CLOSE_CHECKLIST)
﻿Example﻿
A user clicks "x" to close a Checklist or starts a flow.
Complete Task
(COMPLETE_TASK)
﻿Example﻿
A user completed a Task in a Checklist.
Converted
(CONVERTED)
﻿Example﻿
A user completed a step tagged "Mark as converted".
Navigate
(NAVIGATE)
﻿Example﻿
A user clicked a button with the click action "Navigate to URL".
Identify
(IDENTIFY_USER)
﻿Example﻿
A form has been filled out in the demo that can identify the user.
Engage
(ENGAGE)
﻿Example﻿
A user makes it past the first step of a flow.
The exact event shape is as follows:
JS
{
	// event can be one of:
	// - VIEW_STEP
	// - START_FLOW
	// - COMPLETE_FLOW
	// - START_CHECKLIST
	// - OPEN_CHECKLIST
	// - CLOSE_CHECKLIST
	// - IDENTIFY_USER
	// - CONVERTED
	// - NAVIGATE
	// - COMPLETE_TASK
	type: "VIEW_STEP",
	
	// Current project.
	project: {
		id: "ID_OF_PROJECT",
		name: "NAME_OF_PROJECT",
	},
	
	// Current flow.
	flow: {
		id: "ID_OF_CURRENT_FLOW",
		name: "NAME_OF_CURRENT_FLOW",
	},
	
	// Current step.
	step: {
		name: "NAME_OF_CURRENT_STEP",
		indx: 0, // Steps start counting at 0!
	},
	
	// NOTE: checklist can be undefined if the project
	// has no checklist.
	checklist: {
		id: "ID_OF_CHECKLIST",
		name: "NAME_OF_CHECKLIST",
	},
	
	// Current task (only defined if on checklist).
	task: {
	  title: "TITLE_OF_TASK",
	  id: "ID_OF_TASK",
	}
	
	// List of IDs of completed tasks.
	completions: ["...", "..."],
	
	// URL that the visitor clicked.
	// Only populated if event is NAVIGATE.
	url: "",

	// shows up at https://app.navattic.com/your-workspace/customers/{customerId}
	customerId: "ID_OF_CURRENT_VISITOR",

	// a session is scoped to a browser tab, so any action
	// performed in that tab is tied to a session
	sessionId: "ID_OF_CURRENT_SESSION",
	
	// Technical metadata about the user (ex: browser, device, etc).
	clientSideMetadata: ...,
	
	// Attributes that have been identified from the user, grouped
	// by the source they come from (i.e. "FORM").
	eventAttributes: {
	  // The source can be one of
	  // - FORM
	  // - IDENTIFY
	  // - QUERY_PARAMS
	  // - SHARE_LINK
	  // - ENRICHMENT
	  // - OTHER
	  "FORM": {
  	    // Example attributes.
  	    "user.email": "[email protected]",
  	    "company.fullName": "Steve Jobs"
  	  },
  	  "QUERY_PARAMS": {
  	    // Example attributes.
  	    "utm_source": "linkedin",
  	    ...
  	  },
  	  ...
  	}
}
{
	// event can be one of:
	// - VIEW_STEP
	// - START_FLOW
	// - COMPLETE_FLOW
	// - START_CHECKLIST
	// - OPEN_CHECKLIST
	// - CLOSE_CHECKLIST
	// - IDENTIFY_USER
	// - CONVERTED
	// - NAVIGATE
	// - COMPLETE_TASK
	type: "VIEW_STEP",
	
	// Current project.
	project: {
		id: "ID_OF_PROJECT",
		name: "NAME_OF_PROJECT",
	},
	
	// Current flow.
	flow: {
		id: "ID_OF_CURRENT_FLOW",
		name: "NAME_OF_CURRENT_FLOW",
	},
	
	// Current step.
	step: {
		name: "NAME_OF_CURRENT_STEP",
		indx: 0, // Steps start counting at 0!
	},
	
	// NOTE: checklist can be undefined if the project
	// has no checklist.
	checklist: {
		id: "ID_OF_CHECKLIST",
		name: "NAME_OF_CHECKLIST",
	},
	
	// Current task (only defined if on checklist).
	task: {
	  title: "TITLE_OF_TASK",
	  id: "ID_OF_TASK",
	}
	
	// List of IDs of completed tasks.
	completions: ["...", "..."],
	
	// URL that the visitor clicked.
	// Only populated if event is NAVIGATE.
	url: "",

	// shows up at https://app.navattic.com/your-workspace/customers/{customerId}
	customerId: "ID_OF_CURRENT_VISITOR",

	// a session is scoped to a browser tab, so any action
	// performed in that tab is tied to a session
	sessionId: "ID_OF_CURRENT_SESSION",
	
	// Technical metadata about the user (ex: browser, device, etc).
	clientSideMetadata: ...,
	
	// Attributes that have been identified from the user, grouped
	// by the source they come from (i.e. "FORM").
	eventAttributes: {
	  // The source can be one of
	  // - FORM
	  // - IDENTIFY
	  // - QUERY_PARAMS
	  // - SHARE_LINK
	  // - ENRICHMENT
	  // - OTHER
	  "FORM": {
  	    // Example attributes.
  	    "user.email": "steve@apple.com",
  	    "company.fullName": "Steve Jobs"
  	  },
  	  "QUERY_PARAMS": {
  	    // Example attributes.
  	    "utm_source": "linkedin",
  	    ...
  	  },
  	  ...
  	}
}
﻿
Installation
Copy the below snippet and add it below the header of your website. This JS snippet should be installed after your existing third-party script tags.
JS
<script>
  window.navatticQueue=[],window.navattic=new Proxy({},{get:function n(t,u,e){return function(){for(var n=arguments.length,t=Array(n),e=0;e<n;e++)t[e]=arguments[e];return navatticQueue.push({function:u,arguments:t})}}});
 </script>
 <script src="https://js.navattic.com/embed-events.js"></script>
<script>
  window.navatticQueue=[],window.navattic=new Proxy({},{get:function n(t,u,e){return function(){for(var n=arguments.length,t=Array(n),e=0;e<n;e++)t[e]=arguments[e];return navatticQueue.push({function:u,arguments:t})}}});
 </script>
 <script src="https://js.navattic.com/embed-events.js"></script>
﻿
Implementations
Send Navattic events to third-party systems
The installed script has some tools to help your website communicate bi-directionally with the embedded demo. To send Navattic event data to other tools such as PostHog, Amplitude, Mixpanel, or Segment, add a script like the following.
JS
<script>
	navattic.onEvent(function(eventData){
		posthog.capture("navattic_event", eventData); // PostHog example.
		amplitude.track("navattic_event", eventData); // Amplitude example.
		mixpanel.track("navattic_event", eventData); // Mixpanel example.
		analytics.track("navattic_event", eventData); // Segment example.
	});
</script>
<script>
	navattic.onEvent(function(eventData){
		posthog.capture("navattic_event", eventData); // PostHog example.
		amplitude.track("navattic_event", eventData); // Amplitude example.
		mixpanel.track("navattic_event", eventData); // Mixpanel example.
		analytics.track("navattic_event", eventData); // Segment example.
	});
</script>
﻿
Once the JS snippet is installed on your website, you should now see a new event named "navattic_event" in your third-party platform.
Be sure to follow the best practices provided by your third-party platform for analyzing and organizing your events.
Tip: For the most helpful tracking, give each Demo and Flow an informative name. This will help organize your data in third-party platforms.
Pass identification information into Navattic
If you're generating identification information from another source like a third party form, reveal API, or internally, you can pass that data into an embedded Navattic iframe to identify each visitor.
After installing the embed events JavaScript snippet, use our navattic.identify function to pass information into Navattic.
JS
...
navattic.identify({
  "user.fullName": George Washington,
  "user.email": gw@foundingfathers.net
  // ... any other fields you'd like to pass in go here!
})
...
...
navattic.identify({
  "user.fullName": George Washington,
  "user.email": gw@foundingfathers.net
  // ... any other fields you'd like to pass in go here!
})
...
﻿
Go to Navattic Docs﻿

Navattic Event Name	Example	Description
View Step (VIEW_STEP)	Example	A Flow step is viewed.
Start Flow (START_FLOW)	Example	A user starts a Flow.
Complete Flow (COMPLETE_FLOW)	Example	A user reached the last step of a flow OR completed a "Complete flow" step
Start Checklist (START_CHECKLIST)	Example	A user loads a Checklist for the first time.
Open Checklist (OPEN_CHECKLIST)	Example	A user expands a Checklist.
Close Checklist (CLOSE_CHECKLIST)	Example	A user clicks "x" to close a Checklist or starts a flow.
Complete Task (COMPLETE_TASK)	Example	A user completed a Task in a Checklist.
Converted (CONVERTED)	Example	A user completed a step tagged "Mark as converted".
Navigate (NAVIGATE)	Example	A user clicked a button with the click action "Navigate to URL".
Identify (IDENTIFY_USER)	Example	A form has been filled out in the demo that can identify the user.
Engage (ENGAGE)	Example	A user makes it past the first step of a flow.

Did this page help you?