# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.variant3d.com/variant-js-sdk/showing-product-variants-on-webpages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.