Skip to content

Unity WebGL

This guide will walk you through adding support for any global wallet into a Unity app by integrating the Mobile Wallet Protocol.

When doing Build And Run from your Unity Build Settings with the target platform WebGL you will notice that no popups are allowed. This is due to the Cross-Origin-Opener-Policy header being set to same-origin-allow-popups by default. This is a security feature to prevent popups from different origins.

There are two main things to consider when running your Unity WebGL build with global wallet support:

  1. For any global wallet to work, you need to host the build or run it locally with Cross-Origin-Opener-Policy set to same-origin-allow-popups.
  2. Compression Format: Set to Disabled (Player Settings > Publishing Settings) for final builds.

Setup

Here's an example setup for testing your global wallet locally using express server. Please note that in this example, the build output is in the build-output directory. Once your build is done, follow these steps:

1. Create a Project Folder and Setup Files

Create a new folder for your server project and navigate to it:

mkdir unity-webgl-server
cd unity-webgl-server

Create a new subfolder called build-output where you'll place your Unity WebGL build files:

mkdir build-output

Copy all the files from your Unity WebGL build into the build-output folder. This should include files like:

  • index.html
  • .unityweb files
  • Other assets and build files

2. Initialize Your Node.js Project

Initialize a new Node.js project and install Express:

npm init -y
npm install express

Create a new file called server.js in the root folder with the following content:

const express = require("express");
const path = require("path");
 
const app = express();
const port = 8000;
 
app.use((req, res, next) => {
  res.header(
    "Cross-Origin-Opener-Policy",
    "same-origin-allow-popups",
  );
  next();
});
 
app.use(express.static(path.join(__dirname, "build-output")));
app.listen(port, () =>
  console.log(`Server running on http://localhost:${port}`),
);
{
  "name": "express-webgl",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.21.2"
  }
}

3. Run Your Local Server

Start your Express server by running:

node server.js

You should see the message: Server running on http://localhost:8000

Open your browser and navigate to http://localhost:8000 to see your Unity WebGL build running with global wallet support enabled.

Troubleshooting

If you encounter any issues:

  1. Make sure your build-output folder contains all the necessary Unity WebGL build files
  2. Confirm that your server is properly setting the Cross-Origin-Opener-Policy header
  3. Check browser console for any errors
  4. Ensure your global wallet is properly configured to work with the Mobile Wallet Protocol