Inbox component

The Inbox component shows a list of conversations for the current User. It handles loading, pagination, and real-time updates automatically.

Installation

The simplest version of the inbox component can be embedded with an iframe:

<iframe
  src="https://embed.surge.app/conversations?user_id={SURGE_USER_ID}&token={ACCOUNT_TOKEN}&phone_number_id={PHONE_NUMBER_ID}"
></iframe>

Both {SURGE_USER_ID} and {ACCOUNT_TOKEN} are required for this account-token form. {PHONE_NUMBER_ID} is optional; include it when you want the inbox to show only conversations associated with a specific phone number. If you use a signed User JWT from your server, pass that JWT as token and omit user_id; the JWT identifies the User. See Embeddable UI components for the two authentication options.

Events

The Inbox component emits postMessage events that you can listen to from the parent window.

Event	When it fires
`conversation-selected`	The user selects a conversation
`conversation-deselected`	The active conversation is cleared
`filter-changed`	The inbox filter changes

Listen for events from https://embed.surge.app:

window.addEventListener("message", (event) => {
  if (event.origin !== "https://embed.surge.app") return;

  switch (event.data?.type) {
    case "conversation-selected":
      console.log("Conversation selected", event.data);
      break;
    case "conversation-deselected":
      console.log("Conversation deselected", event.data);
      break;
    case "filter-changed":
      console.log("Filter changed", event.data);
      break;
  }
});

See the Inbox component reference for the full event payload shapes.

Working with Users Conversation Component

⌘I

Get started

Register your business

Sending messages

Receiving messages & webhooks

Phone numbers

Verifications

Channels roadmap

Embeddable UI components

Concepts

Inbox component

Installation

Events

​Installation

​Events

Installation

Events