# Visualizer Logic

## Get Started

        <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@0.2.51/dist/index.js"></script>

## Documentation

https://unpkg.com/@byondrnd/byondxr-web-visualizer@0.2.51/doc/index.html

## Plugins

### UI plugin

https://www.npmjs.com/package/@byondrnd/byondxr-web-visualizer-ui

Generated using TypeDoc