Visualizer UI Documentation
Get Started
<html>
<head>
<link
href="https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@0.2.82/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.2.35/dist/index.js"></script>
<script src="https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@0.2.82/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@0.2.82/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@0.2.82/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.2.35/dist/index.js"></script>
<script src="https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@0.2.82/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.2.82/doc/globals.html#constants"
an example for a constant object can be found at
https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@0.2.82/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@0.2.82/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>