WebRotate 360 Product Viewer Integration For Weebly | WebRotate 360 Blog

WebRotate 360 Product Viewer Integration For Weebly

by NewsMaster November 17, 2015 11:36

As with Squarespace that we have integrated not long ago (see here), Weebly still lacks support for third-party plugins. So our approach to integrating with Weebly is very similar to Squarespace which also shares some similarity with the embed shortcode in our WordPress and Joomla plugins.

Weebly also doesn't have an online storage option for uploading your 3D product views, so you would still need a place online (FTP, Amazon S3, etc) where you can upload your published 360 or 3D product views. The good news is that having spare 5-10 GB online these days doesn't cost much and there're plenty of options.

Now lets review how to integrate your published webrotate 360 product views in Weebly.

 

DEMO

 

1) Publish your 360 product view using WebRotate 360 SpotEditor that you can download here. Here's a quick video that walks you through the basic steps.

2) Upload the contents of the 360_assets folder that you will see in the published folder under your SpotEditor project directory (or wherever you have chosen to output your published 360 product view) to your web hosting. You can upload it right away on publish in SpotEditor using our built-in FTP option (check "Upload assets only") or use a popular FTP client such as FileZilla or a browser based file manager that comes with your web hosting.

3) Once uploaded, note the location of the xml file inside the uploaded folder (e.g http://my-domain.com/360-views/my-product/my-product.xml). You'll will need this file's URL for the next steps.

4) Login to Weebly and navigate to Settings -> SEO


5) Paste the following lines under Header Code and click Save.

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.webrotate360.com/lib/imagerotator/3.6/js/imagerotator.js"></script>
<link href="https://cdn.webrotate360.com/lib/imagerotator/3.6/css/retina.css" rel="stylesheet"/>

 


Note that you may not need the first line (jQuery script) as your Weebly theme may already include it. You may also replace retina.css with your WebRotate 360 viewer skin of choice (e.g, basic.css, thin.css, empty.css, round.css). 

 

6) Close Settings and expand a Weebly page where you would like to add your 3D product spin.

 

7) Select Build and drag the Embed Code widget onto your page as needed.


 

8) Click on the embed code widget that you have just placed on your page to enter the edit mode and paste the following snippet, replacing the URL next to "xmlfile" with the one your have uploaded in the previous step. Change width and height values as well to make it fit well into your page layout.


<div class="wr360embed-cdl" style="width:100%;height:600px;" data-imagerotator='{"xmlfile":"http://your-config-url.xml"}'></div>



PS: there're a few options that you can configure in the last step. Below is an example with all of the available options listed in one place:

<div class="wr360embed-cdl" style="width:100%;height:600px;" data-imagerotator='{
    "xmlfile":"http://your-config-url.xml",
    "graphics": "https://cdn.webrotate360.com/lib/imagerotator/3.6/img/retina",
    "basewidth": 1024,
    "minheight": 400
    "events": true,
    "name": "my-view",
    "rootpath": "http://my-cdn-for-images.com/product1/",
    "onready": your-javascript-callback}'>
</div>

  • basewidth - viewer width in pixel that you can set to allow the viewer window to scale not just horizontally, which works by default if a parent container has relative width, but also vertically as well. It usually represents your default viewer width as per your base (default) page layout design before any responsive scaling is applied. When it's set, the height of the viewer is automatically scaled relative to the scaled width.
  • minheight - if basewidth is specified, this setting represents the minimum viewer height in pixel. This can be helpful on small mobile screens where you may not want the viewer window height go beyond some fixed minimum. 
  • events - set it to true if your website has Google Analytics integrated and you would like to track user engagement with your 3D product views as per this recent article on our blog. 
  • name - if specified, this name will appear in your Google Analytics event tracking so you could sort out the events by each view. 
  • rootpath - if you host images on a CDN server or if you need to have a single xml config for all of your 360 views, you can configure the image location using this path. Please find more details in our user guide under API / rootPath.
  • graphics - absolute path to a folder with hotspot indicator images (if you use hotspots!). Note that we share all of the skin folders with our default hotspot indicator images via our CDN (Amazon S3) so this path will work https://cdn.webrotate360.com/lib/imagerotator/3.6/img/retina, and you can replace retina with basic, empty, round, thin, though they currently have the same hotspot images.
  • onready - pass your JavaScript API callback that accepts one parameter being our API object. Please refer to our user guide under API / apiReadyCallback for more details about various functions we currently offer via this API.

 

Bookmark and Share

Powered by BlogEngine.NET 2.0.0.36
Theme by Mads Kristensen | Modified by Mooglegiant

About this Blog

WebRotate 360 are specialists in interactive e-commerce solutions, web and software development for Internet retailers, product manufacturers, and marketing agencies.

We're a team of great individuals who bring our commitment, passion and skills to help you showcase your products online.


Follow on Twitter  Follow on Facebook  Join us on Google plus  Follow on YouTube  Subscribe to this blog  

Back to WebRotate360.com »

360 Photography Articles

Browse our 360 product photography articles and tutorials

Find us on Facebook

Newsletter, November 2016

WebRotate 360 spin newsletter

Newsletter Signup

Subscribe to our regular newsletter updates and keep current with WebRotate 360 news, including our latest tips and tricks, new equipment guides, promotions, coupons, product releases and more.

Featured Product

Browse 360 photography equipment on photogear360

DIY 360 Photography Turntable

Our Latest Video

360 Product Viewer PRO

Download our 360 product photography software

Follow on Twitter