# Game <--> Browser Communication

{% hint style="warning" %}
We are currently investigating stability issues in this functionality. Please reach out to support if this is not functioning as expected.
{% endhint %}

You can send messages from the game to the browser and back using JSON communication.

This guide assumes you've followed [setup-the-browser-widget](https://docs.msquared.io/creation/unreal-development/features-and-tutorials/web-browser/setup-the-browser-widget "mention"). The example will use [in-world-browser](https://docs.msquared.io/creation/unreal-development/features-and-tutorials/web-browser/in-world-browser "mention") as the example.

Communication with a viewport browser is the same except for where the difference is specified.

### Sending a message from the browser to the game

We'll add a feature that on clicking a button in the browser, we'll print the text input provided in the browser in the game client.

### Sending a message from the game to the browser

We'll add a feature that will display the player's XYZ position in the browser.

First, make a blueprint structure called `SPosition` with the parameters `X Y Z`. We'll use this to serialize the vector into a JSON struct.

<figure><img src="https://1456550285-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoWTlPaoHd1McSakqMigu%2Fuploads%2Fgit-blob-8ce41fcc1d837969b02ff1b1b25253abf550c12a%2Fimage.png?alt=media" alt="" width="327"><figcaption></figcaption></figure>

In your browser widget blueprint, add the following nodes. This will call the function `setPlayerPosition` in the browser every tick alongside the player's location as a struct.

{% @blueprintue-embed/embed url="<https://nextjs-boilerplate-jl63.vercel.app/b517b0d2-a699-4df8-80a7-5ff76fa1c425>" %}

In the `index.html`, update the code to the below.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: 'Roboto', sans-serif;
            font-size: 4rem;
	    background: #ffffff;
        }
    </style>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script>
	jQuery(function()
	{
	// required initialisation
	"object"!=typeof ue&&(ue={}),uuidv4=function(){return"10000000-1000-4000-8000-100000000000".replace(/[018]/g,function(t){return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)})},ue5=function(r){return"object"!=typeof ue.interface||"function"!=typeof ue.interface.broadcast?(ue.interface={},function(t,e,n,o){var u,i;"string"==typeof t&&("function"==typeof e&&(o=n,n=e,e=null),u=[t,"",r(n,o)],void 0!==e&&(u[1]=e),i=encodeURIComponent(JSON.stringify(u)),"object"==typeof history&&"function"==typeof history.pushState?(history.pushState({},"","#"+i),history.pushState({},"","#"+encodeURIComponent("[]"))):(document.location.hash=i,document.location.hash=encodeURIComponent("[]")))}):(i=ue.interface,ue.interface={},function(t,e,n,o){var u;"string"==typeof t&&("function"==typeof e&&(o=n,n=e,e=null),u=r(n,o),void 0!==e?i.broadcast(t,JSON.stringify(e),u):i.broadcast(t,"",u))});var i}(function(t,e){if("function"!=typeof t)return"";var n=uuidv4();return ue.interface[n]=t,setTimeout(function(){delete ue.interface[n]},1e3*Math.max(1,parseInt(e)||0)),n});

        // register the listener for setting the player position
        ue.interface.setPlayerPosition = function(position) {
	    const {x, y, z} = position;
            if (x && y && z) {
                $('body').text(`X: ${x.toFixed(2)} Y: ${y.toFixed(2)} Z: ${z.toFixed(2)}`);
            } else {
                console.error('Invalid position object:', position);
            }
        };
	});
    </script>
</head>
<body>
    X: 0 Y: 0 Z: 0
</body>
</html>
```
