How to Host/Embed a Unity WebGL Build on Squarespace. (It's do-able and pretty simple actually!)
Finally figured it out!
The solution to the elusive WebGL Unity integration conundrum!
So here's the problem - You create something in Unity and want to show it off on a portfolio or blog site. You are using one of the many excellent and popular web services (in this case Squarespace) but don't know how to load your build from Unity to the site. You trawl the internet and forums for information but even solutions that are only a few months old don't seem to work any more because Dropbox and then Google shut down one method of hosting the build and no one else seems to have come up with a solution, or if they have they haven't publicised it. I have followed all those searches, talked to Squarespace reps and wandered through the Unity and Squarespace forums and have pieced together a fix. It's a touch convoluted but works and works pretty well thanks to the good people at itch.io.
In my case I was attempting to rebuild what had been created as an iPad app in WebGL in order to add it to my portfolio site. It was by no means going to be a perfect port and I really didn't know if it would even work at all but I had to give it a shot. It has built out and built out quite well but a few things needed to be added to the steps to ensure it would work online.
Item the first:
If you don't already have your project on a Git service you will need to do so. My preferred combination is Bitbucket and Sourcetree as your PC-side client. This is crucial for the next step which is.....
Item the second:
While you can use Unity's built in processor and build system on your PC I have found that the best optimised builds come from Unity's Cloud Build service. While I was getting WebGL builds topping out over 600mb from my PC, I was getting 70mb builds from Unity. To link to Unity's Cloud Build service you will need to use a Git service which Unity taps to build the content.
**(Setting up the Git repo was possibly the hardest part of this whole procedure for me. I wasn't very experienced with them previously and it took a while to set it up properly and have my project and repo properly synced properly. However once you do, you are pretty set for the rest of the process.)
You connect the two using an SSH code which Unity's website will guide you to find and add. This code authorises Unity's servers to access your Git repo. When Unity has built out your file you can try it there and then on the site or download the zip containing the index.html and all your other code. Once you have tested the built file and are happy download the .zip file and put it somewhere safe.
Item the third:
Now you will need an account with Itch.io. I was hesitant about doing this at first as I wasn't overly keen to have my app out on the site for all to see. If people are going to see it I want it to be through my, or my team mates, site. However you can set the visibility of your projects on Itch and keep them private if you so choose. It is as easy as any other site to set up an account and start using it, so once you have, create a page for your project, set its visibility, and upload your .zip.
Item the fourth:
In the Dashboard for your Itch project page you will find a Distribute section. Here it might be worth your time to customise the standard Itch formatting for the widget and embedding options. This is a great little tool and an absolute gift for our purposes. If you are trying to keep to a design guide or colour scheme for your site this is for you. You can add RGB or hex values for the colours of the widget border, background, font and other elements making sure it integrates nicely into your site.
At this point you have a choice, you can either embed the widget, which will bring you to Itch.io to play the game/content (simply by copying the short piece of HTML generated), or if you go to Embed you can copy a similar yet different piece of code. This option means you will have a windows within your Squarespace site directly loading your content from Itch without needing to navigate elsewhere.
This is the Widget section so if you copy and paste this into your Squarespace site you will get a button that will transport you to Itch.io.
This is the Embed section, copy and paste this code and your content will appear in your Squarespace site.
Item the fifth:
The final step is to go back your Squarespace page, add a Code block, and paste the copied HTML into the block. And voila! You ought to have your Unity WebGL baked into your Squarespace site. You can go back and modify the HTML to alter the styling, size and shape if you want but that ought to be all you need!
Paste code, save and you should be done.