​
Overview

Navattic is a tool to build interactive demos of your product.

​
Automatic Setup

  1. Install the Koala snippet on the site where you are embedding Navattic demos.
  2. Koala will automatically detect and capture events from Navattic including:
    • View Step
    • Start Flow
    • Complete Flow
    • Start Checklist
    • Open Checklist
    • Close Checklist
    • Identify User
    • Converted
    • Navigate
    • Complete Task
Koala will also automatically identify users from Navattic forms and interactions.

​
Turning off autotracking for Navattic

If you don’t want all Navattic events captured, or need to control when it’s turned on, you can disable autotracking for Navattic in the Koala settings.

​
Manual Setup

With a small bit of code you can capture key events in Koala as visitors interact with your Navattic demos.
  1. Install the Koala snippet on the site where you are also embedding a Navattic demo iframe with Embed Events installed.
  2. Turn off the Navattic plugin in the Koala settings.
  3. Anywhere after the Koala snippet, within the <body> tag of your html add this code snippet:
<!-- On a page with a Navattic demo and Navattic embed events -->
<script>
  var navattic_events = {
    VIEW_STEP: "Step Viewed",
    START_FLOW: "Flow Started",
    COMPLETE_FLOW: "Flow Completed",
    START_CHECKLIST: "Checklist Started",
    OPEN_CHECKLIST: "Checklist Opened",
    CLOSE_CHECKLIST: "Checklist Closed",
    COMPLETE_TASK: "Task Completed",
    CONVERTED: "User Converted",
    NAVIGATE: "User Navigated",
    IDENTIFY_USER: "User Identified",
    ENGAGE: "User Engaged",
  };

  if (navattic && typeof navattic.onEvent === "function") {
    navattic.onEvent(function (event) {
      if (window.ko && event.type) {
        window.ko.track(
          "Navattic " + (navattic_events[event.type] || event.type),
          event
        );
      }
    });
  }
</script>
This will send all Navattic events to Koala, prefixed with the name “Navattic” (e.g. “Navattic View Step” or “Navattic Navigated”). You can see the full list of events in their docs. If you only want to capture some of the events you can add a conditional check like this: 
<script>
  // only the events you want to capture
  var navattic_events = {
    START_FLOW: "Flow Started",
    COMPLETE_FLOW: "Flow Completed",
    CONVERTED: "User Converted",
    IDENTIFY_USER: "User Identified",
  };

  if (navattic && typeof navattic.onEvent === "function") {
    navattic.onEvent(function (event) {
      if (window.ko && event.type && navattic_events[event.type]) {
        window.ko.track("Navattic " + navattic_events[event.type], event);
      }
    });
  }
</script>