Embedding an HTML5 Animation in a Squarespace Site

Exporting & Previewing
1

To load your Tumult Hype document within Squarespace, you're going to need to host your exported files elsewhere. The snippet of code you will be embedding should contain a direct reference to the generated JS URL of your document, and should look similar to this:

<div id="index_hype_container" style="margin:auto;position:relative;width:600px;height:400px;overflow:hidden;">
    <script type="text/javascript" charset="utf-8" src="https://example.com/index.hyperesources/index_hype_generated_script.js?94966"></script>
</div>

So, this assumes that the URL https://example.com/index.hyperesources/index_hype_generated_script.js works. Export your Tumult Hype document to your desktop, then upload it to an FTP server. Unfortunately only expensive Business accounts on Squarespace allow arbitrary file and folder uploads. (See this topic for help with FTP uploading). Neocities is a great option if you don't have a hosting account somewhere.
When loading this into Squarespace, the runtime for Hype is loaded by this code -- this three line snippet should be all you need in most cases. Anything added to the <head> of your Hype document will not be included with this snippet, so if you are embedding any external JS, or custom fonts, keep that in mind.

As of April 12, 2019, here's how you can add the Hype snippet to a page. (This process sometimes changes, so reply below if this seems to not work for you).

Troubleshooting and Preparing

Before you start, make sure that the area you are placing your Tumult Hype document is the same size as your document, or larger. Since many Squarespace themes also have mobile layouts, keep in mind that sometimes your Tumult Hype document won't appear perfectly on smaller screens.

  • If your Hype document does not appear, make sure that you have a set 'height' for your Hype document.

  • If you have many layouts and one of your layouts doesn't appear, you may need to run the following JavaScript function 'On Layout load':

    window.addEventListener('DOMContentLoaded', function () {
  hypeDocument.relayoutIfNecessary();
})

What this does is resets which layout is displaying in the event that the page is reloaded. For some reason, Squarespace sometimes loads additional pages in the background for subpages.

3 Likes
2

If the hype document I would like to upload is in a page that is not the home page or an index page, should the ‘src=’ part of the code read as follows…

src="http://MYSITE.COM/specified page where I want the document/HYPEDOCUMENT.html/mydocument_Resources/mydocument_hype_generated_script.js?12345>

The current code I pulled from my exported html doc is:

<div id="1916demo_hype_container" style="margin:auto;position:relative;width:1024px;height:768px;overflow:hidden;" aria-live="polite">
		<script type="text/javascript" charset="utf-8" src="1916demo.hyperesources/1916demo_hype_generated_script.js?21756"></script>
	</div>

I’m can’t tell if the extra “overflow:hidden;” aria-live=“polite”>" is causing a problem

3

Basically you just need to change the src attribute to be the full URL. So it would simply change to:

<div id="1916demo_hype_container" style="margin:auto;position:relative;width:1024px;height:768px;overflow:hidden;" aria-live="polite">
	<script type="text/javascript" charset="utf-8" src="http://MYSITE.COM/PATH/1916demo.hyperesources/1916demo_hype_generated_script.js?21756"></script>
</div>

(thus you just need to replace http://MYSITE.COM/PATH/ with the correct beginning part of the URL)

1 Like