Embed 360 product views and 360-degree panoramic views created with WebRotate 360 Product Viewer in your WordPress posts and pages.
Upload your 360 product views via FTP to your server and 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. Note that 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. There's also one sample 360 product view located under the plugin folder under 360_assets. To try this sample, please use the following config path as per the shortcode examples below: /wp-content/plugins/webrotate-360-product-viewer/360_assets/sampleshoe/config.xml
Simply add the following shortcode inside a page or post in WordPress admin where you would like to see your 360 product view embedded, replacing name, width, height and config with your own values.
Example 1: [wr360embed name="yourviewname" width="100%" height="450px" config="/wp-content/plugins/webrotate-360-product-viewer/360_assets/sampleshoe/config.xml"]
You can also add an extra shortcode parameter called basewidth to specify the original width of your embedded 360 product viewer. So when your primary shortcode width parameter is relative (i.e 100% as in the example above), the basewidth setting will force the 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.
Example 2: [wr360embed name="yourviewname" width="100%" height="450px" basewidth="620px" config="/wp-content/plugins/webrotate-360-product-viewer/360_assets/sampleshoe/config.xml"]
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.
Use the following shortcode to integrate via lightbox popup (replace name, width, height and config with your own values accordingly). Please note that the sample config path below indicates that the 360 product view was uploaded under the 360_assets folder located in the root of your WordPress website (i.e on the same level with wp-content) that you would need to create there first:
Example 3: [wr360popup name="yourviewname" width="620px" height="450px" config="/360_assets/sampleshoe2/config.xml"]your thumbnail image or text[/wr360popup]
If you need to show a gallery of your 360 product views via a popup, just add multiple wr360popup shortcodes for each view with an extra parameter called gallery:
Example 4: [wr360popup name="yourviewname1" gallery="true" width="620px" height="450px" config="/360_assets/sampleshoe2/config.xml"]your thumbnail image or text[/wr360popup]
[wr360popup name="yourviewname2" gallery="true" width="400px" height="400px" config="/360_assets/sampleshoe3/config.xml"]your thumbnail image or text[/wr360popup]
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.
Example 5: [wr360embed name="yourviewname" width="620px" height="450px" 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.