Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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

Difficulty level: 
Status
colourBlue
titleModerate

 

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

...

       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 login on https://www.wix.com:

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

...

     Fig. 3 - Creating a new website. You will be prompted to set a website description and to give it a final name

 

   After creating your new website, you will be redirected to your personal dashboard. On the left side of your dashboard you have a List panel with all of your websites.

   Click on Manage & Edit Site blue button (see Fig. 4):

        Fig. 4 - Manage & Edit your website by clicking on it

 

Step 3:

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

 

   After clicking the Manage & Edit Site button, you will be redirected to your Administration page of that selected website (see Fig. 5):

   Click Edit SIte to start editing your website

    Fig. 5 - Your personal website dashboard

 

   Now you have entered your website. You can choose a template, personalize, add images, etc.

   The first thing you need to do before inserting your iFrame animation is to search for the <iframe> plugin from Wix -> Add Apps (see Fig. 6):

  Fig. 6 - Your website editing panel is located on the left side of the main website window

 

  Start searching by typing iframe in the search field:

   Fig. 7 - Searching the iframe plugin. Click on it when it appears in the search dropdown

 

  The second thing is to Add to site the iframe plugin. Click on the blue button (Fig. 8):

  Fig. 8 - Click on the '+Add to site' button to install your plugin and to start embed your iframe animation

 

  Now the iframe canvas has been added to your website page. You can move it around, resize and place it anywhere you want.

  Click on Enter Website Address

   Then click on Code to Add your html iframe animation and check(Fig. 9):

    Fig. 9 - Here we insert our <iframe> html tag

 

Code Block
languagexml
titleSample Code
linenumberstrue
<iframe allowFullscreen='allowFullScreen' src="https://stream.iconasys.com/viewer.php?application=360&type=iframe&id=c5d9636719c7764f35104aa7814b2b2e9012fcda" width="700" height="500">
</iframe>
Tip
titleTips

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"
Info
titleiFrame reference

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

 

...