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

# Event Listeners

## Overview

ChatNode enables developers to track and respond to key events during a agent's lifecycle. By using `window.chatnode.addEventListener` and `window.chatnode.removeEventListener`, you can listen for and handle specific events to create interactive and dynamic user experiences.

This guide explains how to initialize ChatNode, register event listeners, and handle event payloads.

<Note>
  Make sure to load the [popup chat
  script](https://app.chatnode.ai/account/chatbot?path=/share) before listening
  these events.
</Note>

## Available Event Types

The `eventName` parameter must be one of the following **enum** values:

| **Event Name**      | **Description**                               | **Payload**                  |
| ------------------- | --------------------------------------------- | ---------------------------- |
| `action.call`       | Triggered when a action is called.            | `{ id, name, args }`         |
| `action.result`     | Triggered when a action returns a result.     | `{ id, name, args, result }` |
| `message.user`      | Triggered when a user sends a message.        | `{ content }`                |
| `message.assistant` | Triggered when the assistant sends a message. | `{ content }`                |

***

## Adding an Event Listener

To listen for a specific event, use the following syntax:

```javascript theme={null}
window.chatnode.addEventListener(eventName, callback);
```

### Parameters

* **`eventName`** (enum) — Must be one of the event names listed in [Available Event Types](#available-event-types).
* **`callback`** (function) — Function to be called when the event is fired. The event payload is passed as an argument.

### Example

Listen for a user message:

```javascript theme={null}
window.chatnode.addEventListener("message.user", (event) => {
  console.log("User message received:", event.payload.content);
});
```

***

## Removing an Event Listener

To remove a listener for a specific event, use the following syntax:

```javascript theme={null}
window.chatnode.removeEventListener(eventName, callback);
```

### Parameters

* **`eventName`** (enum) — Must be one of the event names listed in [Available Event Types](#available-event-types).
* **`callback`** (function) — The exact callback function used when adding the event listener.

### Example

Remove a user message listener:

```javascript theme={null}
const userMessageHandler = (event) => {
  console.log("User message received:", event.payload.content);
};

// Attach the event listener
window.chatnode.addEventListener("message.user", userMessageHandler);

// Remove the event listener
window.chatnode.removeEventListener("message.user", userMessageHandler);
```

***

## Event Payloads

Each event type has a specific payload. Below are the details for each event type:

* **`action.call`**

  ```javascript theme={null}
  {
    id: 'unique-id',
    name: 'action-name',
    args: {},
  }
  ```

* **`action.result`**

  ```javascript theme={null}
  {
    id: 'unique-id'
    name: 'action-name',
    args: {},
    result: {},
  }
  ```

* **`message.user`**

  ```javascript theme={null}
  {
    content: "Hello, agent!";
  }
  ```

* **`message.assistant`**

  ```javascript theme={null}
  {
    content: "Hello, user!";
  }
  ```

***

## Troubleshooting

If you encounter issues, consider the following tips:

1. **Check the event name.** Ensure you're using a valid event name listed in [Available Event Types](#available-event-types).
2. **Match the callback function.** Ensure the callback reference used in `removeEventListener` matches the one used in `addEventListener`.
3. **Check SDK initialization.** Ensure the ChatNode script has loaded before registering event listeners.

***