Game <--> Browser Communication

We are currently investigating stability issues in this functionality. Please reach out to support if this is not functioning as expected.

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. The example will use In-world browser 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.

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.

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

<!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>

PreviousLoading embedded pages NextAccess control and security

Last updated 2 months ago

Was this helpful?

<!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>

hashtagSending a message from the browser to the game

hashtagSending a message from the game to the browser

Sending a message from the browser to the game

Sending a message from the game to the browser