# Get Started

```html
<html>
  <head>
    <link
      href="https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@0.1.161/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.145/dist/index.js"></script>
    <script src="https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@0.1.161/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

to override a css rules add a css file like in the example <a href="https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@0.1.161/build/examples/globalVariables.css"  target="_blank">HERE</a>

# 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.161/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.145/dist/index.js"></script>
    <script src="https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@0.1.161/build/index.js"></script>
  </body>
</html>
```

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

#### an example for a constant object can be found <a href="https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@0.1.161/build/examples/Constants.json" target="_blank">HERE</a>
