# Visualizer UI Documentation

## Get Started

```html
<html>
  <head>
    <link href="https://visualizer.byondxr.com/releases/visualizer-ui/3.0.31/index.css" rel="stylesheet" />
  </head>
  <body>
    <div class="visualizer" data-role="visualizer" experienceId="<your experience id here>"></div>
    <script src="https://visualizer.byondxr.com/releases/visualizer/3.0.33/index.js"></script>
    <script src="https://visualizer.byondxr.com/releases/visualizer-ui/3.0.31/index.js"></script>
  </body>
</html>
```

### this project is a plugin for the visualizer, see <https://www.npmjs.com/package/@byondrnd/byondxr-web-visualizer> for more information

## Customization, Theming Supported & css variables

It can be given as a configuration linked to the experienceId
Otherwise as a HTML and CSS as in the examples bellow..

To override a css rules, add them to:
<https://visualizer.byondxr.com/releases/visualizer-ui/3.0.31/doc/modules/src_app_iconstants.html#icssvariables>
These are the possible css variables:
<https://visualizer.byondxr.com/releases/visualizer-ui/3.0.31/examples/globalVariables.css>

### Changing constant titles labels and icons

pass a stringified object as an attribute into the base div element

#### example

```html
<html>
  <head>
    <link href="https://visualizer.byondxr.com/releases/visualizer-ui/3.0.31/index.css" rel="stylesheet" />
  </head>
  <body>
    <div
      class="visualizer"
      data-role="visualizer"
      experienceId="<your experience id here>"
      constants='{"menu":{"hotspots":{"label":"Hotspots"}}}'
    ></div>
    <script src="https://visualizer.byondxr.com/releases/visualizer/3.0.33/index.js"></script>
    <script src="https://visualizer.byondxr.com/releases/visualizer-ui/3.0.31/index.js"></script>
  </body>
</html>
```

#### a full Documentation of custom labels titles and icons can be found under the Constants section

<https://visualizer.byondxr.com/releases/visualizer-ui/3.0.31/doc/modules/src_app_iconstants.html>

#### an example for a constant object can be found at

<https://visualizer.byondxr.com/releases/visualizer-ui/3.0.31/examples/Constants.json>"

### Client API

It is accessed through an object that is attached to the visualizer container:

```js
const container = document.querySelector('[data-role="visualizer"]')
container.visualizerUI.showAddToCart('sku')
```

Documentation of the methods available on that object:
<https://visualizer.byondxr.com/releases/visualizer-ui/3.0.31/doc/modules/src_app_clientapitypes.html>

## Launcher

Documentation:
<https://visualizer.byondxr.com/releases/visualizer-ui/3.0.31/doc/modules/generated_doc_launchertypes.html>

example:

```html
        <button
            onClick={() => {
                window.launchVisualizer({
                    experienceId: 'G2GcP2',
                    defaultProducts: { Countertop: '1200302000' },
                    defaultProduct: '1200302000',
                    productsList: ['1200302000', '334442000']
                    sceneId: '6',
                    scene_configuration: 'US-EN',
                    favoriteProducts: [ {product: {application: 'Backsplash', sku: '1040502005'}} ]
                }).then((visualizerContainer)=>{
                    // Here the visualizer is loaded and you can do with it whatever you need such as:
                    visualizerContainer.visualizerUI.showAddToCart('sku')
                    visualizerContainer.visualizer.setFavoriteProducts([ {product: {application: 'Backsplash', sku: '1040502005'}} ])
                })
            }}
        >
            Launch
        </button>
```

---

---

---

---
