Skip to end of metadata
Go to start of metadata

The following article will guide you step by step on how to upload your 360 animation project to your personal Squarespace Website.

Difficulty level: MEDIUM

 

Step 1:

The very first step is to upload your 360 animation project on a hosting website

First of all, your 360 project should be uploaded already on a hosting server. We will use https://stream.iconasys.com in this tutorial

  • Log in to your personal dashboard: https://stream.iconasys.com
  • Click the 'Upload New 360 Product' button to upload a new 360 animation
  • Now that it uploaded successfully, every 360 project has 3 URL links: Preview, Index and iFrame. Click to copy the iFrame URL as in the picture below (Fig. 1):

 

       Fig. 1 - The iFrame URL is located in the same block of the uploaded 360 animation project. Click 'Copy iFrame URL' to copy your link.


Step 2:

    In this step we need to register a new account on squarespace.com or if you have one, simply login:

   Fig. 2 - Go to https://squarespace.com and click Log In to enter your personal Dashboard.

 

Now you have successfully logged in, click on your account name bubble in the right up corner and select 'My Sites' (Fig. 3):

 

  Fig. 3 - Your dropdown menu when clicking on 'My Account'.


The following image(Fig. 4) represents how your websites list looks like:

     Fig. 4 - In this example we have only one website, but you can add even more!


Step 3:

    The last part of the tutorial is how to insert your iFrame code to your personal website page.

    Single click on your website from (see Fig. 4) to open it:

    Fig. 5 - Shows a selected block of the page.


    Now all you need to do is to select your desired block of your page and this is where the 360 animation will be placed. You can do that by hovering the mouse on a block of the page and click 'EDIT' (Fig. 5).

    After you click 'EDIT' it will open up a new dialog and now we need to left click the 'plus' symbol to add a new block inside your selected element (see Fig. 6):

  Fig. 6 - The selected element has several option.


  In this list we need to scroll down and find the 'Code' option to insert our iFrame inside your selected block:


   Left click on 'Code' to finally start inserting our 360 animation iFrame. Here is the code you can paste to see how it works with our example:

     Fig. 7 - Inserting the iFrame URL code inside the <iframe> html tags.

 

 Press Enter key after the first paragraph <p> and insert your link to your iframe using the iFrame HTML tags (see Fig. 7).  In our example the sample code is:

Sample code
<p>Hello, World!</p>
<iframe allowFullscreen='allowFullScreen' src="https://stream.iconasys.com/viewer.php?application=360&type=preview&id=069467dc327b90dbfaa422e76ffbd3cadc83cb3d" width="600" height="400">
</iframe>

Tips

Use:

  • <iframe to open the iFrame tag 
  • allowFullScreen is optional, if you want to allow your 360 animation to appear on fullscreen when clicked
  • src ="https://example.com/iframe.html"> here we insert the source link to our animation
  • </iframe> to close the iFrame HTML tag 
  • Use "width" and "height" as iframe properties to enlarge you 360 animation canvas. For example add after src="source-link-to-your-file" width="600" and height="400"

iFrame Reference

Reference for the iFrame tag can be found here: https://www.w3schools.com/tags/tag_iframe.asp

 

     Now we click 'APPLY' form the Code editor then 'SAVE' to see the final results.

     Everything is done! Now you can review your changes by sharing the browser link to your page: