> ## Documentation Index
> Fetch the complete documentation index at: https://docs.streampixel.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Frontend side - sending and receiving JSON
> Send JSON messages from your frontend into Unreal via URL or the WebSDK/Iframe API, and listen for messages sent back from Unreal.
## 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**.
#### URL structure
```text theme={"dark"}
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**
```javascript theme={"dark"}
https://share.streampixel.io/abcd1234?message=hello
Unreal Receives → { "message": "hello" }
```
**Multiple fields**
```javascript theme={"dark"}
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/](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](/resources/iframe-integration/frontend-and-application-communication#sending-messages).
* For WebSDK integration refer to [Communicating with Unreal Engine](/resources/web-sdk/features/communicating-with-ue).
***
## 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](/resources/iframe-integration/frontend-and-application-communication#listening-for-messages).
* For WebSDK integration refer to [Communicating with Unreal Engine](/resources/web-sdk/features/communicating-with-ue).
## Next steps
Set up the Unreal blueprints that consume these messages.
See the iframe postMessage patterns in detail.