# Marketplace Events

In addition to the multiple customization options and ways of implementing the Pandium Marketplace, we also support emitted events from the iframe that you can use to trigger additional custom actions. or navigate outside of the iframe. 

The Pandium Marketplace iframe communicates with your parent application using the [browser's window.postMessage() API](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage). When a user performs an action inside the iframe (installing, saving, navigating, etc.), Pandium sends a structured message to the parent window. Your application listens for these events using [window.addEventListener('message', ...)](https://developer.mozilla.org/en-US/docs/Web/API/Window/message_event) and can respond accordingly. For example, closing a modal, navigating to another page, or showing a confirmation.\
\
Each message contains a `message` field with the event name, and depending on the event, a `tenant` object with the tenant and integration IDs.

#### Example Listener

```
window.addEventListener('message', (event) => {
    // Always verify the origin in production
    // if (event.origin !== 'https://your-pandium-domain.com') return

    const { message, tenant } = event.data

    switch (message) {
        case 'pandium-install-cancel':
            console.log('User cancelled install for tenant:', tenant?.id)
            closeModal()
            break
        case 'pandium-save-sync':
            console.log('User saved and synced tenant:', tenant?.name)
            showSuccessNotification()
            break
        case 'pandium-content-height-change':
            // Resize the iframe to match content
            const iframe = document.getElementById('pandium-iframe')
            iframe.style.height = event.data.height + 'px'
            break
        default:
            console.log('Pandium event:', message, tenant)
    }
})
```

#### Tenant Payload Shape (When Included)

```
{
  "message": "pandium-install-save",
  "tenant": {
    "id": 123,
    "name": "tenant-name",
    "integration": {
      "id": 456,
      "name": "integration-name"
    }
  }
}
```

#### Supported Events

| Event                                 | Screen              | Trigger                              | Payload    |
| ------------------------------------- | ------------------- | ------------------------------------ | ---------- |
| `pandium-install-cancel`              | Install flow        | Cancel new install  (deletes tenant) | { tenant } |
| `pandium-install-next`                | Install flow        | Next button — advance to next tab    | { tenant } |
| `pandium-install-back`                | Install flow        | Back button — go to previous tab     | { tenant } |
| `pandium-install-save`                | Install flow        | Save without syncing                 | { tenant } |
| `pandium-save-sync`                   | Install flow        | Save & Sync Now — succeeded          | { tenant } |
| `pandium-save-sync-error`             | Install flow        | Save + Sync Now — sync failed        | { tenant } |
| `pandium-connection-settings-cancel`  | Connection Settings | Settings Cancelled                   | { tenant } |
| `pandium-connection-settings-save`    | Connection Settings | Settings Saved                       | { tenant } |
| `pandium-uninstall`                   | Tenant Settings     | Uninstall Confirmed                  | { tenant } |
| `pandium-uninstall-cancel`            | Tenant Settings     | Uninstall Cancelled                  | { tenant } |
| `pandium-connector-connect`           | Connector auth      | Connector Connected                  | { tenant } |
| `pandium-connector-connect-cancel`    | Connector auth      | Connect Cancelled                    | { tenant } |
| `pandium-connector-connect-next`      | Connector auth      | Next in connect flow                 | { tenant } |
| `pandium-connector-connect-back`      | Connector auth      | Back in connect flow                 | { tenant } |
| `pandium-connector-disconnect`        | Connector Auth      | Connector Disconnected               | { tenant } |
| `pandium-connector-disconnect-cancel` | Connector Auth      | Disconnect Cancelled                 | { tenant } |
| `pandium-content-height-change`       | All                 | iFrame content resizes               | { height } |
| `pandium-connect-app`                 | Integration Show    | 'Connect' button clicked             |            |
| `pandium-all-integrations`            | Integration Show    | "All Integrations" nav               |            |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.pandium.com/marketplaces/marketplace-events.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.