Marketplace Events | Pandium Docs

Emitted Events from the Pandium Marketplace

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. 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', ...) 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