> For the complete documentation index, see [llms.txt](https://docs.variant3d.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.variant3d.com/variant-js-sdk/showing-product-variants-on-webpages.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.