WebRotate 360 Product Viewer Integration Sample

There are two types of shortcodes currently available with WebRotate 360 Product Viewer for WordPress: wr360embed and wr360popup. The first one is for those views that you embed inside your page or post next to the rest of your content and the second one launches 360s in a dedicated prettyPhoto lightbox popup with gallery support. So lets take a look at both of them.

First, create your 360 views using our free Windows or Mac software (download) and then upload them via FTP to your WordPress installation. You only need to upload a single folder that is auto-created under 360_assets in the published folder of your SpotEditor project upon publish. Note the location of an xml configuration file(s) in the uploaded folder(s) as you will need it for the shortcodes as shown below.

Embedded viewer integration

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

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

Multiple embedded views can be added on the same page or post in PRO version of this plugin by pasting the same shortcode with a different name, config and dimensions as needed.

You can also add an extra shortcode parameter called basewidth to specify the original width of your embedded views (e.g, basewidth=”620px” as in this example above). So when your primary shortcode width parameter is relative (e.g, 100%), the basewidth setting will forceĀ  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 inside a responsive layout.

NOTE: alternatively, you can specify default viewer dimensions on the plugin settings page where you can configure other default options such as viewer and popup skins, master config and more. If default dimensions are specified in the plugin settings, you don’t need to repeat them again in your shortcodes.

Popup viewer integration

Popup integration is done in pretty much the same way. The only major difference is that you have to specify fixed width for your popup – prettyPhoto lightbox will scale automatically if the browser window is not large enough. Also please note that the full-screen (PRO) feature can’t work inside the popups yet (it’s on our list for the next major release!)

Click here to launch the popup:

arrow360

Use the following shortcode to achieve the same effect:

[wr360popup name="view02" width="650px" height="550px" config="/wordpress/360-assets/sampleshoe/config.xml"]your thumbnail image or text[/wr360popup]

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

Gallery popup 1
Gallery popup 2

The shortcodes don’t have to go one after another as in this example – you can arrange them anyway you like.

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

Load images from CDN and / or use master config (PRO)

Both shortcodes support the rootpath parameter that can be used to specify an alternative location of your image assets as configured in the config xml. When it’s set in the shortcode, the viewer will prepend rootpath to all image path specified in the viewer configuration xml. This is valuable when you need to store image assets on a dedicated file server or CDN.

[wr360embed name="viewxxx" width="100%" height="500px" rootpath="http://mycdn.com/360_assets/product1/" config="/360_assets/product1/config.xml"]

The rootpath parameter may be also used to load multiple shortcodes using just a single / master config xml that can be set under plugin settings via Master Config URL (assuming the number of images and their file names are the same across multiple shortcodes), in which case you don’t need to specify the config parameter in each of your shortcodes that share the same master config settings.

Please contact WebRotate 360 for any questions or just post on our forum.