> ## 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.

# Arcade

> Capture events coming from Arcade interactive tours.

## Overview

[Arcade](https://arcade.software?ref=koala) is a tool to help you create beautiful demos and interactive tours for your product.

## Automatic Setup

1. [Install the Koala snippet](/docs/get-started/quick-start) on the site where you are embedding Arcade demos.
2. Koala will automatically detect and capture events from Arcade including:
   * Flow Rendered
   * Hotspot Clicked
   * Video Ended
   * Flow Restarted
   * Progress Bar Nav Clicked
   * Step Reached
   * Overlay Clicked
   * External URL Clicked
   * Powered by Arcade Button Clicked
   * CTA Clicked

## Manual Setup

If you don't want all Arcade events captured, or need to control when it's turned on, you can manually setup Arcade with Koala. With a small bit of code you can capture key events in Koala as visitors interact with your Arcade demos.

1. [Install the Koala snippet](/docs/get-started/quick-start) on the site where you are also embedding the Arcade demo iframe.
2. Turn off the Arcade 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}
<script>
  window.addEventListener(
    "message",
    function (event) {
      if (event.origin === "https://demo.arcade.software") {
        if (window.ko && event.data && event.data.eventName) {
          window.ko.track("Arcade " + event.data.eventName, event.data);
        }
      }
    },
    false
  );
</script>
```

This will start capturing all events bubbled from the Arcade tour in Koala, prefixed with the name "Arcade" (e.g. "Arcade CTA Clicked" or "Arcade Hotspot Clicked"). You can see the full list of events in [their docs](https://docs.arcade.software/kb/learn/advanced-features/in-arcade-event-propagation?ref=koala#what-events-are-propagated).

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

```html theme={null}
<script>
  const eventsToCapture = ["CTA Clicked", "Hotspot Clicked"];

  window.addEventListener(
    "message",
    function (event) {
      if (event.origin === "https://demo.arcade.software") {
        if (
          window.ko &&
          event.data &&
          event.data.eventName &&
          eventsToCapture.includes(event.data.eventName)
        ) {
          window.ko.track("Arcade " + event.data.eventName, event.data);
        }
      }
    },
    false
  );
</script>
```

## Turning off autotracking for Arcade

If you don't want all Arcade events captured, or need to control when it's turned on, you can disable autotracking for Arcade in the [Koala settings](https://app.getkoala.com/goto/settings/install).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.