# Built-in Voice & Text Chat

## 📞Built-in Voice and Text Chat Guide

This page provides a comprehensive guide on using Streampixel’s **built-in voice and text chat**, enabling real-time communication within your Unreal Engine applications. You’ll learn how to enable chat options, understand the system behavior, and customize chat interactions for various use cases like collaborative apps, multiplayer simulations, or virtual showrooms.

***

## 🧩 Chat Features Overview

Streampixel provides integrated **text** and **voice** chat features out of the box, available to enable per project.

<figure><img src="https://4054772100-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAxFCxNtDJTPCgUnSsK1%2Fuploads%2Fr6AalkNqRPZZy3DEILuz%2Fimage.png?alt=media&#x26;token=a5c12b45-6330-4be5-9968-808e399c5ac0" alt=""><figcaption></figcaption></figure>

| **Text Chat**                      | Enables a real-time chat window for users to exchange messages during the stream.                            |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| **Voice Chat**                     | Activates high-quality, low-latency voice communication using WebRTC.                                        |
| **Chat UI Theme**                  | Select between **Light** or **Dark** theme for the chat interface.                                           |
| **Chat UI Position**               | Align the chat interface to the **Left** or **Right** side of the screen.                                    |
| **Mute on Entry**                  | Automatically mute the microphone of each user when they join the session.                                   |
| **Communication Startup Behavior** | Choose whether chat starts automatically with the session or only when triggered by your Unreal application. |

***

## Enabling Communication

To enable chat features for your project:

1. Go to your **Project Dashboard**.
2. Navigate to the **Communication** tab.
3. Toggle **Text Chat** and/or **Voice Chat** to “Enabled”.
4. Choose your **Chat UI Position** (Left or Right).
5. Set your **Chat UI Theme** (Light or Dark).
6. (Optional) Enable **Mute User on Entry** if you want microphones to be muted when users join.

***

## Communication Startup Behavior

This setting determines **when** the chat interface appears during a session.

| Option                          | Behavior                                                                                                 |
| ------------------------------- | -------------------------------------------------------------------------------------------------------- |
| **Start on Session Begin**      | The chat interface becomes visible automatically as soon as the stream starts.                           |
| **Start When Triggered by App** | The chat interface is only shown when explicitly triggered from the Unreal Engine app, Iframe or WebSDK. |

{% hint style="warning" %}
If you choose **Start on Session Begin** and do **not** trigger chat from your Unreal Engine application, Streampixel will automatically assign:

* A temporary **display name**
* A randomly generated **profile picture**

These are visible to other users, allowing communication to happen even without manual setup.
{% endhint %}

***

## Programmatic Connection & Disconnection

You can start or stop the built-in communication system — including both **text** and **voice chat** — programmatically by sending messages from either:

* Unreal Engine (via Pixel Streaming Blueprint)
* A custom frontend (via `iframe` message)
* WebSDK (`window.postMessage()` or WebSocket command)

This gives you full control over when and how communication features are enabled in your application.

{% hint style="warning" %}
Make sure that `Communication Startup Behavior` is set to `Start when triggered by App`
{% endhint %}

***

## **💡 Trigger Methods**

This message can be sent via:

* **Unreal Engine:** Using `send pixel streaming response` node via the blueprints
* **iframe Embed:** Using `iframe.contentWindow.postMessage(...)`

***

## **🔌 Connect to Chat**

To start a communication session, send the following JSON message either from Unreal or Iframe:

```json
{
  "message": {
    "type": "comms",
    "value": {
      "name": "Alice",
      "pfpUrl": "https://example.com/avatar.jpg",
      "roomId": "room-123"
    }
  }
}
```

**Parameters:**

* **`name`** *(string)* – Display name of the user in the chat window.
* **`pfpUrl`** *(string)* – URL to the user's profile picture. This will be shown next to their messages and in the voice chat panel.
* **`roomId`** *(string)* – A unique ID representing a communication room. Users with the same `roomId` will be able to see and talk to each other.

> If `roomId` is not specified, all users will be placed into a default room based on the project — i.e., **one room per project**. This means every user connected to the same project instance will be able to communicate.

## **🔌 Disconnect from Chat**

To disconnect the user from the chat system, simply send:

```json
{
  "message": {
    "type": "comms",
    "value": "disconnect"
  }
}
```

This will:

* Immediately stop both voice and text communication
* Remove the user from the current room
* Clean up the UI for a seamless experience

***

## Unreal Engine Setup (Blueprint Method)

To trigger chat from Unreal:

### ✅ Start Connection (Blueprint)

<figure><img src="https://4054772100-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAxFCxNtDJTPCgUnSsK1%2Fuploads%2Fqsj1uWM0DSpYhyyw7mNY%2Fimage.png?alt=media&#x26;token=e69b514a-680c-4649-962a-f1cea54a548d" alt=""><figcaption></figcaption></figure>

Use the `Send Pixel Streaming Response` node. Append the following string parts to create the message:

```
A: {"message":{"type":"comms","value":{"name":"
B: Input Display Name
C: ","pfpUrl":"
D: Input URL
E: ","roomId":"
F: Input Room ID
G: "}}}
```

{% hint style="warning" %}
JSON structure must be perfect. Avoid missing quotes or brackets.
{% endhint %}

### 🔄 Disconnect (Blueprint)

<figure><img src="https://4054772100-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUAxFCxNtDJTPCgUnSsK1%2Fuploads%2FkiT2I3Lm2QPAhkDSAgdL%2Fimage.png?alt=media&#x26;token=adea7520-2778-4d88-803b-30ae62e3687f" alt=""><figcaption></figcaption></figure>

To disconnect from chat, send:

```
{"message":{"type":"comms","value":"disconnect"}}
```

Use the same `Send Pixel Streaming Response` method.

***

## 🔁 Iframe Setup

If you’re embedding the experience via an iframe, you can initiate or terminate communication by sending the same JSON messages ([#connect-to-chat](#connect-to-chat "mention") and [#disconnect-blueprint](#disconnect-blueprint "mention") Jsons.) described above using `postMessage`. No additional configuration is required — just ensure the iframe is actively streaming your project. For more info check [stream-control-commands](https://docs.streampixel.io/resources/iframe-integration/stream-control-commands "mention")