Initialization and options

Initialize rooomProducts Viewer API with ProductViewer constructor for e-commerce and product configurators. Learn iframe binding, product-specific configuration options, and viewer instance setup.

Initialize the rooomProducts viewer for e-commerce applications, product configurators, and interactive product showcases. The ProductViewer is optimized for displaying and interacting with individual 3D product models.

ProductViewer(iframe)

This constructor returns a new rooom product viewer instance bound to the specified iframe element. The ProductViewer is specifically designed for product-focused applications.

E-commerce Integration Example:

var iframe = document.getElementById("product-viewer"); // The iframe HTML element
var viewer = new ProductViewer(iframe);
// Now ready to display 3D products for customers

init(id, options)

This function initializes a viewer with the specified ID. The ID is the identifier part in a viewer URL. You can also pass an options object to this function. See available options.

viewer.init("123456789123456789", {
  onSuccess: function onSuccessFn(api) {},
  onError: function onErrorFn() {},
  autospin: 1,
  autostart: 1,
  bg_color: "ffd700",
});

Customization

You can pass callbacks and customization options when you initialize a viewer.

viewer.init("123456789123456789", {
  onSuccess: function onSuccessFn(api) {},
  onError: function onErrorFn() {},
  autospin: 1,
  autostart: 1,
  bg_color: "ffd700",
});

Alternatively, you can pass customization options as URL parameters, as described in the URL parameters customization guide.

Callbacks

onSuccess - function(api)

Required. This callback will be invoked when the viewer has been successfully initialized. It will be passed an API object that allows you to interact with the viewer.

onError - function()

This callback will be invoked when the viewer cannot be initialized.