Skip to main content

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.
Make sure to load the popup chat script before listening these events.

Available Event Types

The eventName parameter must be one of the following enum values:
Event NameDescriptionPayload
action.callTriggered when a action is called.{ id, name, args }
action.resultTriggered when a action returns a result.{ id, name, args, result }
message.userTriggered when a user sends a message.{ content }
message.assistantTriggered when the assistant sends a message.{ content }

Adding an Event Listener

To listen for a specific event, use the following syntax:
window.chatnode.addEventListener(eventName, callback);

Parameters

  • eventName (enum) — Must be one of the event names listed in 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:
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:
window.chatnode.removeEventListener(eventName, callback);

Parameters

  • eventName (enum) — Must be one of the event names listed in Available Event Types.
  • callback (function) — The exact callback function used when adding the event listener.

Example

Remove a user message listener:
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
    {
      id: 'unique-id',
      name: 'action-name',
      args: {},
    }
    
  • action.result
    {
      id: 'unique-id'
      name: 'action-name',
      args: {},
      result: {},
    }
    
  • message.user
    {
      content: "Hello, agent!";
    }
    
  • message.assistant
    {
      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.
  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.

I