# Visualizer UI Documentation

## Get Started

```html
<html>
  <head>
    <link
      href="https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@0.1.209/build/index.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="visualizer" data-role="visualizer" experienceId="<your experience id here>"></div>
    <script src="https://unpkg.com/@byondrnd/byondxr-web-visualizer@0.1.198/dist/index.js"></script>
    <script src="https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@0.1.209/build/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

## 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 a css file like in the example
<https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@0.1.209/build/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://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@0.1.209/build/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://unpkg.com/@byondrnd/byondxr-web-visualizer@0.1.198/dist/index.js"></script>
    <script src="https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@0.1.209/build/index.js"></script>
  </body>
</html>
```

#### a full Documentation of custom labels titles and icons can be found  under the Constants section
<https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@0.1.209/doc/globals.html#constants>"

#### an example for a constant object can be found at
<https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@0.1.209/build/examples/Constants.json>"

## Launcher

```ts
type TParams = {
    sceneId?: string
    defaultProduct?: string  // sku, assigns product to each application, overrides defaultProducts
    defaultProducts?: Record<string, string>   // <application,sku>
    scene_configuration?: string // Scene configuration key (like country/language)
    experienceId?: string // either hashExperienceId
    hashExperienceId?: string // either experienceId
}

window.launchVisualizer(params: TParams): void
```

```html
        <button
            onClick={() => {
                window.launchVisualizer({
                    experienceId: 'G2GcP2',
                    defaultProducts: { Countertop: '1200302000' },
                    defaultProduct: '1200302000',
                    sceneId: '6',
                    scene_configuration: 'US-EN',
                })
            }}
        >
            Launch
        </button>
```
