# Frontend Side - Sending & Receiving JSON

## 📘Overview

The frontend communicates with Unreal via the **Pixel Streaming messaging system**.

* **Sending → Unreal**: You can send json message to your unreal engine application.
* **Receiving ← Unreal**: You can listen for responses and messages coming from the Unreal side.

There are two ways to send JSON from the frontend:

1. **Via URL** – pass a JSON payload in the launch URL (one-time, no frontend code required).
   * Sometimes you only need to send a message once, at the very start of the application, and not for the rest of the session.
   * To avoid building a custom frontend just for this, Streampixel lets you include a JSON message directly in the stream’s **URL**.
   * This is useful for one-time configuration, like setting the default map, graphics quality, or toggling UI elements when the session launches.
2. Via WebSDK / Iframe – send JSON interactively at any point after the stream has launched.
   * If you need ongoing control — sending messages while the app is running — use our WebSDK or Iframe API.
   * This method supports unlimited, interactive communication. You can send commands in response to button clicks, toggle HUD elements, update camera views, or push live analytics at any point during the session.

***

## 🚀Sending Messages to Unreal

### 🔗 Option A: Via URL

If you only need to send a message **once at the start of the application**, you don’t need to create a custom frontend.

You can simply include the JSON data as **parameters in your stream URL**.

{% embed url="<https://www.youtube.com/watch?v=GgUBZ24aRKc>" %}

#### URL Structure

```
https://share.streampixel.io/PROJECT_ID?fieldname=value
```

* `PROJECT_ID` → your project identifier.
* `?` → indicates the start of parameters.
* `fieldname` → the JSON key.
* `value` → the data you want Unreal to receive.

#### 📝 **Examples**

**Single field**

<pre class="language-javascript"><code class="lang-javascript"><strong>https://share.streampixel.io/abcd1234?message=hello
</strong><strong>Unreal Receives → { "message": "hello" }
</strong></code></pre>

**Multiple fields**

```json
https://share.streampixel.io/abcd1234?message=set&field=quality&value=4k
Unreal Receives → {"message": "set", "field": "quality", "value": "4k" }
```

### 🛠️ **URL Generator Tool**

To make this easier, you can use our helper tool:\
👉 <https://urlgenerator.streampixel.io/>

The tool automatically encodes special characters and generates a ready-to-use URL. No data is stored. Its purpose is to help you understand how **URL encoding** works.

Even if you choose not to use the tool and create the URL manually, it will still work as long as you apply proper encoding.

***

### ⚡Option B: Via Iframe or WebSDK

If you need to send messages while the app is running, use the Streampixel **WebSDK** or **Iframe API**. This gives you full interactivity and unlimited control.

* For Iframe integration refer to [#sending-messages](https://docs.streampixel.io/iframe-integration/frontend-and-application-communication#sending-messages "mention")
* For WebSDK integration refer to [communicating-with-ue](https://docs.streampixel.io/resources/getting-started/features/communicating-with-ue "mention")

***

## 📥 Receiving Messages from Unreal

When the Unreal app sends a message to the frontend, your frontend must register **handlers/listeners** to process it. Both the **Iframe API** and the **WebSDK** support this.

* For Iframe integration refer to [#listening-for-messages](https://docs.streampixel.io/iframe-integration/frontend-and-application-communication#listening-for-messages "mention")
* For WebSDK integration refer to [communicating-with-ue](https://docs.streampixel.io/resources/getting-started/features/communicating-with-ue "mention")