Developer

Appearance

Introduction ​

The Viewer API lets you build web apps on top of rooom’s product-viewer. With the API, you can control the viewer in JavaScript. It provides functions for starting, stopping the viewer, moving the camera, taking screenshots and more.

Getting started ​

To use the viewer API in a website, follow these 3 steps:

  • Insert this script in your page: product-viewer-latest.min.js
  • Add an empty iframe
  • Initialize the viewer via JavaScript

Example ​

Here is a ready to use example for a product viewer:

Edit product-viewer-example

html
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>rooom Viewer Example</title>

    <!-- Insert this script -->
    <script type="text/javascript" src="https://static.rooom.com/viewer-api/product-viewer-latest.min.js"></script>
</head>

<body>
    <!-- Insert an empty iframe -->
    <iframe src="" id="viewer" allow="autoplay; fullscreen; vr" allowvr allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

    <!-- Initialize the viewer -->
    <script type="text/javascript">
	    var iframe = document.getElementById('viewer');
	    var id = 'e725a9e18cb87bbc2977b73d4bdc65';

	    var viewer = new ProductViewer(iframe);

	    viewer.init(id, {
	        onSuccess: function onSuccessFn(api){
	            api.on('viewer.start', function() {
	                // API is ready to use
	                // Insert your code here
	                console.log('Viewer is ready');
	            } );
	        },
	        onError: function onErrorFn() {
	            console.log('Viewer error');
	        }
	    });
    </script>
</body>
</html>