The 360 HD Viewer is designed to be self containing and not to conflict with common resources such as jQuery. Therefore the 360 HD Viewer will run on the pages even if using a different jQuery version than what is used by the 360 HD Viewer. For the actual embedding of the 360 HD Viewer simply follow the simple viewer guide.

Summary of what is required:

• Identify the area on the product page where the 360 HD Viewer is to be displayed.
• Include the required 360 HD Viewer assets on the product page.
• Instantiate the 360 HD Viewer object on the product page.
• If the product page has the ability to change features without reloading the page, then connect the selection buttons with the 360 HD Viewer.

It is important to note that if there is a webshop associated with the product pages, then there is no need to change the method for adding products to the basket. The only integration points are the existing product IDs and changing of the feature sets in the 360 HD Viewer.

Best Practices

Fallback image

It is best practice to create a switch in your ecommerce platform that can enable the Cylindo 360 HD Viewer on a per product basis. This can be used to quickly switch between the Cylindo 360 HD Viewer experience and a static image you host. If you do not have imagery to use as a static image then Cylindo can provide the images to you which you can use (e.g. the first frame of the viewers).

Single load product page

We recommend that you use features to change variation on the product page as changing the sku will require the Cylindo 360 HD Viewer to reload. Using features will not reload the Cylindo 360 HD Viewer, but will instead swap out the images with the requested image set and this results in a smoother and faster user experience.

Javascript disabled clients

To maximize your user base then we recommend that you use our Content API (CAPI) to support browsers that does not execute javascript on the page. This can be done by implement an image element in a noscript section immediately after the cylindo script e.g.

<script>
// initialization of the 360 HD Viewer in this script section 
</script>
<noscript>
	// if the user's browser cannot execute javascript, but only pure html then 
	// this section is displayed instead.
	<img src=”http://viewer-images.cylindo.com/assets/viewer/7/24854/
Kilin%20Armchair_1_jpg/large.jpg?accountID=4404&size=512”>
</noscript>

The size requested from CAPI determines what is needed to request an CAPI image. If you select a size that is larger than your standard 360 image then you need to add an authorization header (request your authorization details from support@cylindo.com). When requesting images larger than your standard 360 image size then you are allowed to request images from the API at a rate of one image per second.

A higher frequency of request means some requests will be throttled (returns a 429 HTTP response). Any images dimension lower than your standard 360 size can be retrieved without authorization header. We do however reserve the right to block requests if we deem the service is being misused.

For more information regarding CAPI please see our CAPI documentation.