Embedding in a Squarespace Site


To load your Tumult Hype document within Squarespace, you’re going to need to host your exported files elsewhere. The steps below show how to add a ‘code’ block to Squarespace V6:

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.

Export your Tumult Hype document, and upload it to an FTP server. (See this topic for help with that). Neocities is a great option if you don’t have a hosting account somewhere.

On your page where you’d like to place your Hype document, switch into Edit mode. Click ‘Add Block’, or use a ‘Code Injection Point.

Click the ‘code’ button:

In the resulting window, click the ‘Display Source’ (#1) button so that you can paste HTML code.

Within your ‘resources’ folder, you will have a .js file that needs to be referenced in the code editor in Squarespace. This file should be accessible from the web, so you can test that you have the correct URL by trying it in your browser: http://MYSITE.COM/HYPEDOCUMENT/mydocument_Resources/mydocument_hype_generated_script.js?37681

Then, click Save and your document should appear. That’s it! Let us know if you have any questions with this process.

Embedding your document in an iframe
Exporting FAQ: Guides for exporting to Websites, Apps, Content Management Systems, and more
Super newbie questions
Multiply shapes to create overlay effect?
(Danny) #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>

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

(Jonathan Deutsch) #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>

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