Skip to main content

​
Overview

Arcade is a tool to help you create beautiful demos and interactive tours for your product.

​
Automatic Setup

  1. Install the Koala snippet 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 on the site where you are also embedding the Arcade demo iframe.
  2. Turn off the Arcade plugin in the Koala settings.
  3. Anywhere after the Koala snippet, within the <body> tag of your html add this code snippet:
<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. If you only want to capture some of the events you can add a conditional check like this: 
<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.
⌘I