<html>
<head>
<link
href="https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@{version}/build/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 >"
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>"
>
</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.1.22/dist/index.js"></script>
<script src="https://unpkg.com/@byondrnd/byondxr-web-visualizer-ui@{version}/build/index.js"></script>
</body>
</html>
https://unpkg.com/@byondrnd/byondxr-web-visualizer@2.1.22/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