Anyone know how to embed WebGL generated by Unity 5 into. Squarespace webpage?

Anyone know how to embed WebGL generated by Unity 5 into. Squarespace webpage?

 

OK. I figured out how to embed WebGL generated by Unity 5 into a Squarespace webpage. And It runs fine in desktop Safari, Firefox. But not in iPad Mobile Safari...although the WebGL loads showing the progress bar, after the progress bar finishes, the page stays blank.

You can see this at http://www.azumachogames.com/home/

In Desktop Safari, if you click on the "MUSIC & SOUNDS" you can see the Unity Player version of what is supposed to be displayed... to see the WebGL version of this same page, click the "O" which is right of "MUSIC & SOUNDS".
(If you try this on an iPad of course the Unity Player version will not run.)

My question is why won't this WebGL page run in Mobil Safari?

 

Hey Dan,

I'm currently trying to get WebGL running in Squarespace - with not much success. Would it be possible to share how you did it?

Thanks,

L

 

Hi Half_Res I just got up and I forget at the moment. Let me investigate what I did and I'll get back to you later today.

 

Hi Half_Res. Here we go...

A. COPY UNITY GENERATED WEBGL TO DROPBOX:

First of all upload the WebGL output by Unity to Dropbox. It should be in a folder that you create in the Dropbox 'Public' folder.

My hierarchy looks like this:

Public/
----MarioClipsNEW/ (this is the folder I created)
--------Compressed/ (This and everything below was created by Unity)
--------Release/
--------TemplateData/
--------index.html

NOTE: This may be different depending on the Unity version. I did this with an early version of Unity 5 over a year ago.

Then generate a public link to the 'index.html file. I don't know how to do this in the Dropbox app so please do it from the Dropbox website by logging in, manuevering to the folder (in the Public folder) where you uploaded the WebGL content, right-click on the 'index.html' file and select 'Copy public link...'. The link that appears is the one you'll use in SquareSpace.


B. GET YOUR WEBGL EMBEDDED IN A SQUARESPACE PAGE:

1. In SquareSpace edit mode, in the sidebar, click 'PAGES'. A different sidebar should slide out. In that sidebar, add the page where you want to embed the WebGL content by clicking the '+' to the right of 'NOT LINKED.

2. On the 'CREATE NEW PAGE' dialog, click the 'Page' icon.

3. A 'New Page' should be created.

4. Select the 'New Page' in the side bar, then click on the actual page to select it. Then ON that page cursor over until the Page Content section bar shows, click 'EDIT'to the right of 'Page Content', then cursor over near the left edge in the black text box just above the text that begins 'Lorem ipsum dolor...' until an icon that looks like a sideways teardrop shows up. Click that teardrop icon to bring up a dialog. Scroll down in that dialog until you see the 'MORE' section and click on the code icon that looks like '</>'.

5. The 'Code' window appears. Replace the Hello World code with this code which points to your WebGL that was generated in Unity and which you should have uploaded to Dropbox:

<iframe src="https://dl.dropboxusercontent.com/u/34724021/MarioClipsNEW/index.html" style="border:none" width="790" height="610"></iframe>

Note: of course replace the URL with the Dropbox shared URL to your 'index.html' file.

6. Click 'APPLY' to get rid of the dialog.
7. Click 'SAVE' at the top left of the Content area.

That should do it. Please let me know how it goes.

 

Hi Toyko Dan,

Thanks for this - it worked a treat. The mistake I was making was trying to link a file via a shared link from a standard dropbox folder. It only works if the WebGL project's index.html file is shared from the /Public folder on dropbox.

Cheers,

L

 

this thread just saved me a whole lot of hrs thank you so much.

 

Also wondering for future people who might want help, is there a way to do this with other website holders like google drive or with the newer version of dropbox

 

Is there a way to do this where the files are actually on SquareSpace? Creating a Dropbox account and linking inside an Iframe isn't really "embedding" as far as I'm concerned.

 

From the docs:

"Note that Unity WebGL content is not currently supported on mobile devices. It may still work, especially on high-end devices, but many current devices are not powerful enough and don’t have enough memory to support Unity WebGL content well."

http://docs.unity3d.com/Manual/webgl-browsercompatibility.html

 

Yes it should work. You can put it in your own site by making a folder that takes all that info. Store the info and cop then address. Then follow all the instructions but instead of making it link to dropbox it would link to the file you made.

 

Every time I try to use iFrame on Squarespace to access a WebGL build on Dropbox in a code block, instead of running the html, is opens up a dialog on my computer for me to download the actual file.

<iframe src="https://dl.dropboxusercontent.com/u/8405736/Games/index.html" style="border:none" width="790" height="610"></iframe>

Does anyone know why this happens? It happens in every browser I have tried. Instead of accessing the content on DropBox, it tries to have me download the index.html file.

Thanks

 

You misunderstand what I am asking. I want to host the files on SquareSpace. The answer provided above *literally* just describes how to link to externally hosted files, which is trivial.

Is there a way to host the WebGL data files on SquareSpace and get them to work on SquareSpace?

 

Don't know if this will help but a quick google came up with this: http://www.muno.space/code-snippets/uploading-files

 

That link only contains instructions on how to upload files to SquareSpace and get a link to those files.

The problem seems to be that SquareSpace needs to be "told" to dynamically decompress the .datagz and the other .*gz files when they are sent to the browser for an embed link.

 

We have successfully used Square Space to host our WebGL content. Hit this Square Space page to see it in action.

Short version, as mentioned above, you paste the embed code into the "code" block in the SS CMS.

We optimized the experience by breaking the page load & webgl load into two steps... the user first loads the page, then taps "start" to run the actual WebGL content (30MB package). This is a bit like Youtube, where you must tap "play" to initiate a video stream. Before that you get a "cover" "title" and "description".

 

Thanks Getreadyio, love your website

Could you elaborate on what the embed code actually is and where you would get it?

 

Looks like dropbox no longer supports this... My testing suggests it doesn't. Would love to hear otherwise.

 

I don't know about Dropbox. But I managed to get this up and running with the content on my ftp. But it won't work unless I configure Squarespace to not use SSL.

https://support.squarespace.com/hc/en-us/articles/205815898-Squarespace-and-SSL

That's not great. Does anyone have a workaround on this? Using mixed content/Unity WebGL on Squarespace without disabling SSL? Or maybe some line of code withing the Code Block to override SSL for the given content only ...

 

This was extremely helpful for me as a person who knows nothing about code. Thank you so much