Embedding Unity projects in HTML

In three easy steps you can build, upload and embed your Unity project to be playable online.

Unity used to support a Unity Player plugin for internet browsers, however, using the iframe widget it’s easier than ever to make your game publicly available on the internet without imposing unnecessary hurdles. Follow these three steps to embed your Unity project in HTML based websites.

Step 1: build for WebGL

Open the Build Settings window (File -> Build Settings), select “WebG:” from the list of platforms and if necessary refer to the WebGL project documentation for recommended build settings.

Unity conveniently creates an index.html document for you that loads the game.

Step 2: upload your WebGL build

Upload the build consisting of an index.html document and two folders named “build” and “templateData” to a new folder on a public server. If you are new to FTP Servers, download Filezilla and login to your server to upload files.

For example, we uploaded one of our pilot projects to www.innovatiestudio.hku.nl/LEC_WebGL/

Should you paste the URL in your webbrowser it should already load and run the Unity project as long as WebGL is supported by your browser ( Chrome, Firefox, Internet Explorer, Opera, and Safari are known to have good WebGL support).

Step 3: insert HTML code in your website

To embed the Unity project into your website you need to insert an iframe tag into HTML code, alternatively when using WordPress you can add HTML for text formatting.

Using the iframe-tag you can embed another document inside the document you’re working in, so this way you could just embed the index.html document that Unity generated inside your website. To do this copy the HTML quote below, paste it into your HTML document and change the “src” attribute to the path of your own Unity build.

For example, this is the HTML script used to embed the pilot project into the InnovatieStudio WordPress website:

<iframe src="https://innovatiestudio.hku.nl/LEC_WebGL/index.html" 
    class="webgl-content" style="border:0px #000000 none;" 
    scrolling="no" frameborder="1" marginheight="px" 
    marginwidth="960px" height="600px" width="960px">
</iframe>

To preserve the indended dislay ratio it’s generally a good idea to copy the width and height parameters from the index.hrml document that came with the build.

You can find an example of an embedded Unity Player in our Treetale post.

References:
Arango, Ricardo (2016). How Can I Make The Canvas Transparent On WebGL? Unity. [Available here].

Unity Documentation (2019). Building and running a WebGL project. Unity. [Available here]