Showing Product Variants on Webpages

Embedding a viewer for desktop users, or previews before and AR quicklook.

Model Viewer

Variant supports loading models into Google’s Model Viewer, which supports onscreen display as well as AR via WebXR, Scene Viewer, and iOS Quicklook.

Follow the Model Viewer documentation to embed the required libraries on your page, or import them into your npm project.

Once the model-viewer element has been added to your page, call loadToModelViewer on the Variant SDK, passing the data object as normal, along with the DOM element of the model-viewer:

var el = document.getElementById('myModelViewer');
Variant.loadToModelViewer(data, el).then(
       // your code to run after modelviewer begins loading

Since we need to generate the model on the API if it doesn’t exist, this process is asynchronous and returns a promise. You may want to provide visual feedback to the user in this period.

You can also manually set the src links in the model-viewer element by using the generateModelUrl() method which returns promises.