WebRotate 360 Product Viewer Integration Sample

These quick samples show how to edit your WordPress posts or pages to insert one or more 360 views. First you need to install this module and upload your WebRotate 360 product views via ftp to your web server. Then note the location of xml configuration file(s) in the upload as you will need it inside the shortcode as shown below.

Then simply add the following line inside your post or page where you would like to see the 360 view integrated substituting name, width, height and config with your own values.

[wr360embed name="view01" width="100%" height="450px" config="/wordpress/360-assets/sampleshoe/config.xml"]

You can add multiple 360 views by pasting the same shortcode with a different name, config and dimensions as needed.

You can also add an extra shortcode parameter called basewidth and specify the original width of your embedded 360 product viewer (i.e., basewidth=”620px”). So when your primary shortcode width parameter is relative (i.e 100% as in the example above), the basewidth setting will force the 360 product viewer to scale its height relative to your original viewer width (basewidth). If the basewidth parameter is not set, the viewer height is not scaled when it’s embedded in a responsive layout environment.

It’s also possible to integrated the 360 viewer as a popup:

Popup 360 View

Use the following shortcode to acheive the same effect:

[wr360popup name="view02" width="620" height="450" config="/wordpress/360-assets/sampleshoe2/config.xml"]your thumbnail image or text[/wr360popup]

If you need to show a gallery of your 360 views via a popup, add multiple wr360popup shortcodes for each of your 360 views with an extra parameter called gallery to get something like this:

The shortcode lines don’t need to go one after another like shown below – you can arrange them as needed.

[wr360popup name="view02" gallery="true" width="620" height="450" config="/wordpress/360-assets/sampleshoe2/config.xml"]your thumbnail image or text[/wr360popup]
[wr360popup name="view03" gallery="true" width="400" height="400" config="/wordpress/360-assets/sampleshoe3/config.xml"]your thumbnail image or text[/wr360popup]

Both shortcodes support the rootpath parameter that allows loading images from your CDN or external webserver. It can be also useful when all 360 views share the same settings such that you could only use a single viewer configuration XML file for all your 360 views and have the rootpath point at each corresponding image folder on your server.

Contact WebRotate 360 for any related questions.