/
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.

Related pages