> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://developers.upwardli.com/ui-components/component-messaging/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://developers.upwardli.com/_mcp/server.

# Component Messaging

Upward’s components communicate with the parent application using **iframe messages**.\
Partners can listen for these messages and take appropriate actions within their app or browser.

---

# Listening for Messages

Add the following code block to the browser console window to see the messages

```js
window.addEventListener("message", (event) => {
  const { Event, body } = event.data;

  switch (Event) {
    case "component.navigation":
      console.log("Navigation detected", body);
      break;

    case "component.closed":
      console.log("The component was closed", body);
      break;

    case "component.alert":
      console.log("Alert received", body);
      console.log(body.message || "Component alert");
      break;

    case "plaid.token":
      console.log(body || "Component Plaid");
      break;

    default:
      console.warn("Unknown event received:", Event);
  }
}, false);
```