> ## Documentation Index
> Fetch the complete documentation index at: https://getkoala.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Navattic

> Capture events coming from Navattic interactive demos.

## Overview

[Navattic](https://www.navattic.com?ref=koala) is a tool to build interactive demos of your product.

## Automatic Setup

1. [Install the Koala snippet](/docs/get-started/quick-start) 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](https://app.getkoala.com/goto/settings/install).

## 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](/docs/get-started/quick-start) 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](https://app.getkoala.com/goto/settings/install).
3. Anywhere *after* the Koala snippet, within the `<body>` tag of your html add this code snippet:

```html theme={null}
<!-- 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](https://docs.navattic.com/embed-events#HlKP6).

If you only want to capture some of the events you can add a conditional check like this:

```html theme={null}
<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>
```
