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

visualizer.updateSceneData({
    openInRoom: 'a3c6086f-4aaa-45ca-b0f0-f681a65185df', // Room ID
    openWithCustomProduct: new WizartDeploymentKit.CustomProduct(
        WizartDeploymentKit.PRODUCT_TYPES.WALL_PANEL,
        "Another product",
        "P277-VD34354544",
        "m",
        2.2,
        2.7,
        "https://another-texture-url.jpg"
    )
});

For more details, refer to the DeploymentKit documentation.