Visualizer allow to use your products no loaded to the Wizart PIM
<script>
document.addEventListener('DOMContentLoaded', () => {
// Create a Visualizer instance
const visualizer = WizartDeploymentKit.createVisualizer({
token: 'YOUR_WEB_TOKEN', // Replace with your actual Web Token
targetElement: document.getElementById('visualizer-container'),
layoutSettings: {
layout: WizartDeploymentKit.LAYOUTS.FULL_SCREEN,
},
sceneData: {
openWithCustomProduct: new WizartDeploymentKit.CustomProduct(
// see supported types in the library version refference
type=WizartDeploymentKit.PRODUCT_TYPES.WALL_PANEL,
name="Custom product name",
vendor_code="P277-VD343534",
unit="m",
width=3,
height=2.5,
// product texture url
image_path="https://texture-url.jpg",
)
},
});
// Load and display the Visualizer
visualizer.load().then(() => {
visualizer.show();
}).catch(error => {
console.error('Failed to load the Visualizer:', error);
});
});
</script>
You can change applied product any time you need calling:
visualizer.updateSceneData({
openWithCustomProduct: new WizartDeploymentKit.CustomProduct(
type=WizartDeploymentKit.PRODUCT_TYPES.WALL_PANEL,
name="Another product",
vendor_code="P277-VD34354544",
unit="m",
width=2.2,
height=2.7,
image_path="https://another-texture-url.jpg"
)
});
You have two options how to pass product texture
the first one as on example above
the second passing image as base64 string
image_path=WizartDeploymentKit.formatBase64ImageSrc(imageBase64)
Aditionaly you can control to open product in the specific room instead of opening room gallery as a initial view. Add openInRoom value initializing Visualizer instance or calling updateSceneData method.
visualizer.updateSceneData({
openInRoom: 'a3c6086f-4aaa-45ca-b0f0-f681a65185df',
openWithCustomProduct: new WizartDeploymentKit.CustomProduct(
type=WizartDeploymentKit.PRODUCT_TYPES.WALL_PANEL,
name="Another product",
vendor_code="P277-VD34354544",
unit="m",
width=2.2,
height=2.7,
image_path="https://another-texture-url.jpg"
)
});