Problem: I have difficulties to embed my 360 product views into my WordPress or WooCommerce website.

Solution: Please take the final output folder and upload this to your web server (I use FileZilla). For more information on how to upload your 360 files on your web server, please go to this link:

https://confluence.iconasys.com/display/SHSKB/Upload+360+Product+View+Creator+Files+Using+Your+FTP+Server


I had also made a folder on our server called Downloads – in which I upload the 360 output folder to this master folder, then copy the link location to the iframe.html file. For ex. our Asics shoe example:

https://www.iconasys.com/Downloads/Asics-shoe-18-mouse-wheel/iframe.html

Step-by-Step instructions for Embedding a 360 Product View in your WordPress Website

To integrate the 360 view in your page, you might need to download the iframe widget for WordPress (https://wordpress.org/plugins/iframe/) – then simply upload using an iframe wrapper (although some themes will already support iframe integration).
Ex. enter this code into the HTML editor area:


[iframe src="https://www.iconasys.com/Downloads/Asics-shoe-18-mouse-wheel/iframe.html" width="100%" height="600"]


You will have to replace the link https://www.iconasys.com/Downloads/Asics-shoe-18-mouse-wheel/iframe.html with your link.

You can find the iframe plugin for WordPress at the link:

https://wordpress.org/plugins/iframe/

or you can use this one:

https://wordpress.org/plugins/woocommerce-embed/

Also, as an option, there are a couple plugin options for WooCommerce that will support a tighter integration (360 product view placed in main image placeholder rather than inserting 360 view in Product Description area).

So both those would be a tighter integration, allowing customer to insert into main product image placeholder. Then it's simply upload individual frames.

To test your 360s, you don't need a website domain name, or a WordPress account. You just have to load a test output from 360Creator, on a web server, then inspect the hosted iframe.html with a web browser.

Step-by-step guide

The main steps are:

  1. upload your 360 view to your web server
  2. you might need to download the iframe widget
  3. embed the code

Some themes already support iframe integration, so you might not need to download the iframe widget.

If your 360s are not displayed, please try with HTTPS instead of HTTP at the beginning of your link.