> ## Documentation Index
> Fetch the complete documentation index at: https://docs.surge.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Conversation Component

> Mount the Conversation component to display a single message thread with send capability for the current User.

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.

<img src="https://mintcdn.com/surge-67d47b03/TCCrlfgdQylYa0Zn/images/conversation-hero.jpg?fit=max&auto=format&n=TCCrlfgdQylYa0Zn&q=85&s=a56c60eaae60cd56b946bccdb79de4f8" alt="Conversation component showing a single message thread with a composer at the bottom" width="1200" height="600" data-path="images/conversation-hero.jpg" />

## Installation

The conversation component requires one of the following: a Surge Conversation ID, a Surge Contact ID, or a phone number. The conversation ID is the preferred method and will be the most performant, since the other methods redirect to the conversation ID when one exists, so the iframe may take longer to load.

### With a conversation ID

```html theme={null}
<iframe
  src="https://embed.surge.app/conversation/{CONVERSATION_ID}?user_id={SURGE_USER_ID}&token={ACCOUNT_TOKEN}"
></iframe>
```

Both `{SURGE_USER_ID}` and `{ACCOUNT_TOKEN}` are required parameters. You can find them in the Surge dashboard. The `{CONVERSATION_ID}` parameter is also required and should be the ID of the conversation to display.

### With a contact ID

```html theme={null}
<iframe
  src="https://embed.surge.app/conversation/new?contact={CONTACT_ID}&user_id={SURGE_USER_ID}&token={ACCOUNT_TOKEN}"
></iframe>
```

The `{CONTACT_ID}` is required in this instance and should be the ID of the contact whose conversation should be displayed.

### With a phone number

```html theme={null}
<iframe
  src="https://embed.surge.app/conversation/new?phone_number={PHONE_NUMBER}&first_name={FIRST_NAME}&last_name={LAST_NAME}&user_id={SURGE_USER_ID}&token={ACCOUNT_TOKEN}"
></iframe>
```

The `{PHONE_NUMBER}` is required and is the phone number for the person whose conversation should be displayed, or to whom messages should be sent if no conversation exists yet. `{FIRST_NAME}` and `{LAST_NAME}` are optional but encouraged, since they let the contact's information display properly in the inbox; if no contact or conversation exists yet for the given phone number, these are attached to the contact when a message is sent and the contact is created.