# Visualizer UI Documentation

## Get Started

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

## 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 a css file like in the example https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@2.0.32/build/examples/globalVariables.css

### Changing constant titles labels and icons

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

#### example

    <html>
      <head>
        <link
          href="https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@2.0.32/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@2.0.15/dist/index.js"></script>
        <script src="https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@2.0.32/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@2.0.32/doc/globals.html#constants"

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

https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@2.0.32/build/examples/Constants.json"

### Client API

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

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

Documentation of the methods available on that object: https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@2.0.32/doc/classes/ivisualizerui.html"

## Launcher

    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
    }

    type TVisualizerContainer: Element
    window.launchVisualizer(params: TParams): Promise<TVisualizerContainer>

example:

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

Generated using TypeDoc