Embedding the 3D viewer on your webpage

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

The Variant SDK supports loading models into Google’s Model Viewer, which supports onscreen display as well as AR features. Everything you need to use Model Viewer is included with the Variant SDK.

Adding a Model Viewer to the page

To embed a variant model, first include a <model-viewer> element in your HTML:

<model-viewer id="my-variant-viewer"></model-viewer>

Loading a variant

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

var el = document.getElementById('my-variant-viewer');

var data = {
    productCode: 'SKU001'
    options: {    
        meshes : [
            {
                tag: 'CHAIR'
                enabled: true
            }
        ]               
    }
};

Variant.loadToModelViewer(data, el).then(
    function(){
       // your code to run after modelviewer begins loading
});

Because we need to generate the model on the Variant 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. The model will display in the <model-viewer> element as soon as it is downloaded.

Additional viewer features & configuration

See the official model-viewer documentation for more advanced configuration options.

Be sure to always load models via the provided Variant SDK methods to ensure future compatibility. We don't recommend using model-viewer's automatic USDZ conversion as it will often result in conversion errors or out-of-memory errors.