Unity3D: Hosting a web build on Squarespace using Dropbox

Hosting a Unity3D Web Build on Squarespace is easy.  But, due to the way squarespace is set up, it’s more complex than just dragging the files that are output from a web build onto the server.  The steps to get it working are as follows:

Generate the files

  1. Make a web build from inside Unity by selecting File -> Build Settings… -> Web Player -> Build
  2. Navigate to the 2 created files (an HTML file and a .unity3d file)

Click to View More

Upload to Dropbox

  1. Upload the .unity3d file to dropbox
  2. Generate a public link to the file by navigating to dropbox.com, locating the file, right-clicking on it and selecting the “Share…” option
  3. The end of the URL should read “?dl=0”.  Change this to “?dl=1”
    1. This is a query string that tells any browser externally accessing the file whether to download it directly or not.
  4. Copy this URL, it’s used in the next section

Edit the HTML file

  1. Open the HTML file created by Unity
  2. Find the line of javascript that reads something like the following:
    ‘u.initPlugin(jQuery(“#unityPlayer”)[0], “[buildName].unity3d”)’
  3. Replace the “[buildName].unity3d” with the URL copied from step 4 of the previous section
  4. Copy the entire contents of the HTML file, it’s used in the next section

Add the code to a Squarespace page

  1. Logged into the squarespace admin site, navigate to the page you want to add the web build to
  2. Insert a new code block onto the page
  3. Paste the contents of the HTML file into the code block
  4. Save the code block and the page, and the web build should now be working

So that’s it!  It’s a pretty simple process, though it takes some time to figure out without knowing the process ahead of time.