# Embedding the 3D viewer on your webpage

The Variant SDK supports loading models into Google’s [Model Viewer](https://modelviewer.dev/), 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:

```javascript
<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:

```javascript
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](https://modelviewer.dev/docs/index.html) for more advanced configuration options.&#x20;

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.