<html>
<head>
<link
href="https://visualizer.byondxr.com/releases/ui/<replace with current ui version>/index.css"
rel="stylesheet"
/>
</head>
<body>
<div
class="visualizer"
data-role="visualizer"
experienceId="<your experience id, optional if using hashExperienceId>"
hashExperienceId="<your hashed experience id, optional if using experienceId>"
sceneConfigurationLabel="<optional, the maximum width image size to use on mobile, a number from 0 to 2048>"
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 >"
>
</div>
const containerElement = document.querySelector('[data-role="visualizer"]');
containerElement.addEventListener('visualizerLoaded', (event)=>{
const visualizer = event.detail.visualizer;
});
</div>
<script src="https://visualizer.byondxr.com/releases/logic/3.0.92/index.js"></script>
<script src="https://visualizer.byondxr.com/releases/ui/<replace with current ui version>/index.js"></script>
</body>
</html>
.
https://visualizer.byondxr.com/releases/logic/3.0.92/doc/index.html
https://www.npmjs.com/package/byondrnd/byondxr-web-visualizer-ui
/** set favorite scenes */
abstract setFavoriteScenes(favoriteScenes: IFavoriteSceneList);
/** set favorite products */
abstract setFavoriteProducts(favoriteProducts: IFavoriteProductList | IFavoriteProductShortList);
Code example:
// subscribe to events that save favorites to localstorage
let subscribe = (container) => {
const saveProducts = (param) => {
localStorage.setItem('favoriteProducts', JSON.stringify(param.favorites));
};
const saveScenes = (param) => {
localStorage.setItem('favoriteScenes', JSON.stringify(param.favoriteScenes));
};
container.Visualizer.addListener('productAddedToFavorites', saveProducts);
container.Visualizer.addListener('productRemovedFromFavorites', saveProducts);
container.Visualizer.addListener('sceneAddedToFavorites', saveScenes);
container.Visualizer.addListener('sceneRemovedFromFavorites', saveScenes);
// upon new start of application - read from localstorage
container.Visualizer.setFavoriteProducts(JSON.parse(localStorage.getItem('favoriteProducts')));
container.Visualizer.setFavoriteScenes(JSON.parse(localStorage.getItem('favoriteScenes')));
};
Subscribe to the Visualizer by acquiring its container. Example:
container = document.querySelector('[data-role="visualizer"]');
subscribe(container);
If the container is not there beause it will be launched, then use the launchVisualizer promise to acquire the container
<button onclick="
const productsInitExampleSkus = ()=> {
const products = [ {product: {application: 'Backsplash', sku: '1040502005'}},
{product: {application: 'Countertop', sku: '1400402005'}},
{product: {application: 'Countertop', sku: '1401102015'}},
{product: {application: 'Countertop', sku: '1400302005'}} ]
localStorage.setItem('favoriteProducts', JSON.stringify(products))
}
productsInitExampleSkus()
">
example - saves favorite product sku/application pairs to localstorage
</button>
<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
subscribe(visualizerContainer)
})
}}
>
Launch
</button>
Generated using TypeDoc