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 Variant Viewer

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

Loading a variant

Once the variant-viewer element has been added to your page, call loadToModelViewer(data, el) on the Variant SDK, passing the data object as normal, along with the DOM element of the model-viewer:
1
var el = document.getElementById('myModelViewer');
2
3
var data = {
4
options: {
5
CHAIR : {
6
material: 'leather',
7
enabled: true
8
}
9
},
10
productCode: 'SKU001'
11
};
12
13
Variant.loadToModelViewer(data, el).then(
14
function(){
15
// your code to run after modelviewer begins loading
16
});
Copied!
Because 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. 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.
Last modified 3mo ago
Copy link