The following article will guide you step by step on how to upload a 360 Product View to your personal WIX Website.

Difficulty level: MODERATE


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

     Fig. 2 - Go to https://www.wix.com/ and click Log In to enter your personal Dashboard.
   Now you have successfully logged in, click the blue button Create Site to create a new website (Fig. 3):

     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


Sample Code
<iframe allowFullscreen='allowFullScreen' src="http://stream.iconasys.com/viewer.php?application=360&type=iframe&id=069467dc327b90dbfaa422e76ffbd3cadc83cb3d" width="700" height="500">
</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

 Final part is publishing your website. Click on the Publish button in the right up corner and then click on View my site (Fig. 11):

Fig. 11 - Click publish and then share your website by copying the address link from your browser