# Conversation Component
URL: /docs/embeddable/conversation
LLM index: /llms.txt
Description: Mount the Conversation component to display a single message thread with send capability for the current End User.

# Conversation Component

The Conversation component shows a single message thread and a send field. Use it to embed a specific conversation in your application, useful when users navigate from your own inbox UI or when you want to open a specific thread.

![Conversation component showing a single message thread with a composer at the bottom](/images/conversation-hero.jpg)

## Mount the component

```html
<script src="https://embed.surge.app/v1/embed.js"></script>
<div id="surge-conversation"></div>
<script>
  SurgeEmbed.mount("conversation", {
    target: document.getElementById("surge-conversation"),
    token: "YOUR_USER_JWT",
    conversationId: "cnv_01jrzhe8d9enptypyx360pcmxk",
  });
</script>
```

## Options

| Option | Type | Required | Description |
|---|---|---|---|
| `target` | `HTMLElement` | Yes | The DOM element to mount the component into |
| `token` | `string` | Yes | A signed JWT for the current End User |
| `conversationId` | `string` | No | The ID of the conversation to display; omit to start a new conversation |
| `onMessageSent` | `function` | No | Callback when the user sends a message; receives the message object |
| `theme` | `object` | No | Custom color and font overrides |

## Opening a new conversation

Omit `conversationId` to show an empty thread where the user can compose a new message. The component creates the conversation when the first message is sent.

```javascript
SurgeEmbed.mount("conversation", {
  target: document.getElementById("surge-conversation"),
  token: "YOUR_USER_JWT",
  // No conversationId, starts a new conversation
  onMessageSent: (message) => {
    console.log("New message sent:", message.id);
  },
});
```