# Visualizer Logic

## Get Started

```html

    <div
        class="visualizer"
        data-role="visualizer"
        experienceId="<your experience id, optional if using hashExperienceId>"
        hashExperienceId="<your hashed experience id, optional if using experienceId>"
        sceneId="<optional, will lunch a scene by scene id>"
        defaultProduct="<optional, product sku, will display the product on all available supported application>"
        defaultProducts="<optional, a stringified key vale pair, key: application, value: product sku, will present those as defaults >"
        maxFaceSize="<optional, the maximum width image size to use, a number from 0 to 2048>"
        maxFaceSizeMobile="<optional, the maximum width image size to use on mobile, a number from 0 to 2048>"
        fieldsMap="<optional, an object mapping between the catalog's custom fields to the displayed details of the products in the scene>"
        >
    </div>
        const containerElement = document.querySelector('[data-role="visualizer"]');
        containerElement.addEventListener('visualizerLoaded', (event)=>{
            const visualizer = event.detail.visualizer;
        });
    </div>
    <script src="https://unpkg.com/@byondrnd/byondxr-web-visualizer@2.0.9/dist/index.js"></script>
 
```

## Documentation
<https://unpkg.com/@byondrnd/byondxr-web-visualizer@2.0.9/doc/index.html>

## Plugins

### UI plugin
<https://www.npmjs.com/package/@byondrnd/byondxr-web-visualizer-ui>
