/
Use custom products in Visualizer
Use custom products in Visualizer
Visualizer allows you to showcase custom products that are not uploaded to the Wizart PIM, providing flexibility in your product presentations.
Example: Integrating a Custom Product in Visualizer
Here’s how you can load and display a custom product using the DeploymentKit library:
<script>
document.addEventListener('DOMContentLoaded', () => {
// Create a Visualizer instance
const visualizer = new WizartDeploymentKit.Visualizer({
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(
// Define custom product properties
WizartDeploymentKit.PRODUCT_TYPES.WALL_PANEL, // Product type
"Custom product name", // Product name
"P277-VD343534", // Vendor code
"m", // Unit of measurement
3, // Width (in meters)
2.5, // Height (in meters)
"https://texture-url.jpg" // Product texture URL
)
},
});
// Load and display the Visualizer
visualizer.load().then(() => {
visualizer.show();
});
});
</script>
Updating the Product in the Visualizer
You can change the displayed product dynamically by calling the updateSceneData
method. Here’s an example:
visualizer.updateSceneData({
openWithCustomProduct: new WizartDeploymentKit.CustomProduct(
WizartDeploymentKit.PRODUCT_TYPES.WALL_PANEL,
"Another product", // New product name
"P277-VD34354544", // New vendor code
"m", // Unit of measurement
2.2, // New width (in meters)
2.7, // New height (in meters)
"https://another-texture-url.jpg" // New product texture URL
)
});
Passing Product Texture as a Base64 String
If you prefer to use a base64-encoded string for the product texture instead of a URL, you can do so as follows:
visualizer.updateSceneData({
openWithCustomProduct: new WizartDeploymentKit.CustomProduct(
WizartDeploymentKit.PRODUCT_TYPES.WALL_PANEL,
"Product with Base64 Texture",
"P277-VD34354544",
"m",
2.2,
2.7,
WizartDeploymentKit.formatBase64ImageSrc(imageBase64) // Pass base64 image
)
});
Opening a Specific Room with a Custom Product
To open a specific room with your custom product instead of the default room gallery, include the openInRoom
property when initializing the Visualizer or updating the scene data.
For more details, refer to the DeploymentKit documentation.