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

# Overview

> Listen for custom JS events sent by Explo in your app

## Web Component

Explo uses the [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) spec to fire our own events when certain things happen in the app that you might want to respond to in your app.

### How do I interact with Custom JS events?

Add an event listener in your app to respond to any of the available events listed on this page.

```js theme={null}
const listener = (e) => {
  console.log(e.detail);
};

elem.addEventListener("EVENT_NAME", listener);
```

Be sure to clean up the event listener when you're done with it.

```js theme={null}
elem.removeEventListener(listener);
```

## Iframe

For Iframes, Explo uses the [PostMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) spec to fire the events

### How do I interact with Custom JS events?

Add an event listener in your app to respond to the events listed on this page.

```js theme={null}
const messageListener = (e) => {
  // Check origin of message before reading
  if (e.origin != "https://app.explo.co") return;
  switch (e.data.event) {
    case "sendVariableUpdatedEvent":
      console.log(e.data.detail);
      break;
  }
};

window.addEventListener("message", messageListener);
```

Just make sure you clean up the event listener when you're done with it.

```js theme={null}
window.removeEventListener(messageListener);
```